|
|
|
@ -1,62 +1,68 @@
|
|
|
|
|
// ** React Imports
|
|
|
|
|
import { Fragment, useEffect } from 'react' |
|
|
|
|
import { Fragment, useEffect } from 'react'; |
|
|
|
|
|
|
|
|
|
// ** Third Party Components
|
|
|
|
|
import classnames from 'classnames' |
|
|
|
|
import classnames from 'classnames'; |
|
|
|
|
|
|
|
|
|
// ** Store & Actions
|
|
|
|
|
import { useSelector, useDispatch } from 'react-redux' |
|
|
|
|
import { handleContentWidth, handleMenuCollapsed, handleMenuHidden } from '@store/actions/layout' |
|
|
|
|
import { useSelector, useDispatch } from 'react-redux'; |
|
|
|
|
import { |
|
|
|
|
handleContentWidth, |
|
|
|
|
handleMenuCollapsed, |
|
|
|
|
handleMenuHidden |
|
|
|
|
} from '@store/actions/layout'; |
|
|
|
|
|
|
|
|
|
// ** Styles
|
|
|
|
|
import 'animate.css/animate.css' |
|
|
|
|
import 'animate.css/animate.css'; |
|
|
|
|
|
|
|
|
|
const LayoutWrapper = props => { |
|
|
|
|
// ** Props
|
|
|
|
|
const { layout, children, appLayout, wrapperClass, transition, routeMeta } = props |
|
|
|
|
const { layout, children, appLayout, wrapperClass, transition, routeMeta } = |
|
|
|
|
props; |
|
|
|
|
|
|
|
|
|
// ** Store Vars
|
|
|
|
|
const dispatch = useDispatch() |
|
|
|
|
const store = useSelector(state => state) |
|
|
|
|
const navbarStore = store.navbar |
|
|
|
|
const contentWidth = store.layout.contentWidth |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const store = useSelector(state => state); |
|
|
|
|
const navbarStore = store.navbar; |
|
|
|
|
const contentWidth = store.layout.contentWidth; |
|
|
|
|
|
|
|
|
|
//** Vars
|
|
|
|
|
const Tag = layout === 'HorizontalLayout' && !appLayout ? 'div' : Fragment |
|
|
|
|
const Tag = layout === 'HorizontalLayout' && !appLayout ? 'div' : Fragment; |
|
|
|
|
|
|
|
|
|
// ** Clean Up Function
|
|
|
|
|
const cleanUp = () => { |
|
|
|
|
if (routeMeta) { |
|
|
|
|
if (routeMeta.contentWidth) { |
|
|
|
|
dispatch(handleContentWidth('full')) |
|
|
|
|
dispatch(handleContentWidth('full')); |
|
|
|
|
} |
|
|
|
|
if (routeMeta.menuCollapsed) { |
|
|
|
|
dispatch(handleMenuCollapsed(!routeMeta.menuCollapsed)) |
|
|
|
|
dispatch(handleMenuCollapsed(!routeMeta.menuCollapsed)); |
|
|
|
|
} |
|
|
|
|
if (routeMeta.menuHidden) { |
|
|
|
|
dispatch(handleMenuHidden(!routeMeta.menuHidden)) |
|
|
|
|
} |
|
|
|
|
dispatch(handleMenuHidden(!routeMeta.menuHidden)); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// ** ComponentDidMount
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (routeMeta) { |
|
|
|
|
if (routeMeta.contentWidth) { |
|
|
|
|
dispatch(handleContentWidth(routeMeta.contentWidth)) |
|
|
|
|
dispatch(handleContentWidth(routeMeta.contentWidth)); |
|
|
|
|
} |
|
|
|
|
if (routeMeta.menuCollapsed) { |
|
|
|
|
dispatch(handleMenuCollapsed(routeMeta.menuCollapsed)) |
|
|
|
|
dispatch(handleMenuCollapsed(routeMeta.menuCollapsed)); |
|
|
|
|
} |
|
|
|
|
if (routeMeta.menuHidden) { |
|
|
|
|
dispatch(handleMenuHidden(routeMeta.menuHidden)) |
|
|
|
|
dispatch(handleMenuHidden(routeMeta.menuHidden)); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return () => cleanUp() |
|
|
|
|
}, []) |
|
|
|
|
return () => cleanUp(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
id='app-content' |
|
|
|
|
className={classnames('app-content content overflow-hidden', { |
|
|
|
|
[wrapperClass]: wrapperClass, |
|
|
|
|
'show-overlay': navbarStore.query.length |
|
|
|
@ -69,7 +75,8 @@ const LayoutWrapper = props => {
|
|
|
|
|
'content-wrapper': !appLayout, |
|
|
|
|
'content-area-wrapper': appLayout, |
|
|
|
|
'container p-0': contentWidth === 'boxed', |
|
|
|
|
[`animate__animated animate__${transition}`]: transition !== 'none' && transition.length |
|
|
|
|
[`animate__animated animate__${transition}`]: |
|
|
|
|
transition !== 'none' && transition.length |
|
|
|
|
})} |
|
|
|
|
> |
|
|
|
|
<Tag |
|
|
|
@ -83,7 +90,7 @@ const LayoutWrapper = props => {
|
|
|
|
|
</Tag> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default LayoutWrapper |
|
|
|
|
export default LayoutWrapper; |
|
|
|
|