|
|
|
@ -1,129 +1,136 @@ |
|
|
|
// ** React Imports
|
|
|
|
// ** React Imports
|
|
|
|
import { useState, useEffect } from 'react' |
|
|
|
import { useState, useEffect } from 'react'; |
|
|
|
import { useLocation } from 'react-router-dom' |
|
|
|
import { useLocation } from 'react-router-dom'; |
|
|
|
|
|
|
|
|
|
|
|
// ** Store & Actions
|
|
|
|
// ** Store & Actions
|
|
|
|
import { useSelector, useDispatch } from 'react-redux' |
|
|
|
import { useSelector, useDispatch } from 'react-redux'; |
|
|
|
import { handleMenuCollapsed, handleContentWidth, handleMenuHidden } from '@store/actions/layout' |
|
|
|
import { |
|
|
|
|
|
|
|
handleMenuCollapsed, |
|
|
|
|
|
|
|
handleContentWidth, |
|
|
|
|
|
|
|
handleMenuHidden |
|
|
|
|
|
|
|
} from '@store/actions/layout'; |
|
|
|
|
|
|
|
|
|
|
|
// ** Third Party Components
|
|
|
|
// ** Third Party Components
|
|
|
|
import classnames from 'classnames' |
|
|
|
import classnames from 'classnames'; |
|
|
|
import { ArrowUp } from 'react-feather' |
|
|
|
import { ArrowUp } from 'react-feather'; |
|
|
|
import ScrollToTop from 'react-scroll-up' |
|
|
|
import ScrollToTop from 'react-scroll-up'; |
|
|
|
import { Navbar, Button } from 'reactstrap' |
|
|
|
import { Navbar, Button } from 'reactstrap'; |
|
|
|
|
|
|
|
|
|
|
|
// ** Configs
|
|
|
|
// ** Configs
|
|
|
|
import themeConfig from '@configs/themeConfig' |
|
|
|
import themeConfig from '@configs/themeConfig'; |
|
|
|
|
|
|
|
|
|
|
|
// ** Custom Components
|
|
|
|
// ** Custom Components
|
|
|
|
import Customizer from '@components/customizer' |
|
|
|
import Customizer from '@components/customizer'; |
|
|
|
import FooterComponent from './components/footer' |
|
|
|
import FooterComponent from './components/footer'; |
|
|
|
import NavbarComponent from './components/navbar' |
|
|
|
import NavbarComponent from './components/navbar'; |
|
|
|
import SidebarComponent from './components/menu/vertical-menu' |
|
|
|
import SidebarComponent from './components/menu/vertical-menu'; |
|
|
|
|
|
|
|
|
|
|
|
// ** Custom Hooks
|
|
|
|
// ** Custom Hooks
|
|
|
|
import { useRTL } from '@hooks/useRTL' |
|
|
|
import { useRTL } from '@hooks/useRTL'; |
|
|
|
import { useSkin } from '@hooks/useSkin' |
|
|
|
import { useSkin } from '@hooks/useSkin'; |
|
|
|
import { useNavbarType } from '@hooks/useNavbarType' |
|
|
|
import { useNavbarType } from '@hooks/useNavbarType'; |
|
|
|
import { useFooterType } from '@hooks/useFooterType' |
|
|
|
import { useFooterType } from '@hooks/useFooterType'; |
|
|
|
import { useNavbarColor } from '@hooks/useNavbarColor' |
|
|
|
import { useNavbarColor } from '@hooks/useNavbarColor'; |
|
|
|
|
|
|
|
|
|
|
|
// ** Styles
|
|
|
|
// ** Styles
|
|
|
|
import '@styles/base/core/menu/menu-types/vertical-menu.scss' |
|
|
|
import '@styles/base/core/menu/menu-types/vertical-menu.scss'; |
|
|
|
import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss' |
|
|
|
import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss'; |
|
|
|
|
|
|
|
|
|
|
|
const VerticalLayout = props => { |
|
|
|
const VerticalLayout = props => { |
|
|
|
// ** Props
|
|
|
|
// ** Props
|
|
|
|
const { children, navbar, footer, menu, routerProps, currentActiveItem } = props |
|
|
|
const { children, navbar, footer, menu, routerProps, currentActiveItem } = |
|
|
|
|
|
|
|
props; |
|
|
|
|
|
|
|
|
|
|
|
// ** Hooks
|
|
|
|
// ** Hooks
|
|
|
|
const [skin, setSkin] = useSkin() |
|
|
|
const [skin, setSkin] = useSkin(); |
|
|
|
const [isRtl, setIsRtl] = useRTL() |
|
|
|
const [isRtl, setIsRtl] = useRTL(); |
|
|
|
const [navbarType, setNavbarType] = useNavbarType() |
|
|
|
const [navbarType, setNavbarType] = useNavbarType(); |
|
|
|
const [footerType, setFooterType] = useFooterType() |
|
|
|
const [footerType, setFooterType] = useFooterType(); |
|
|
|
const [navbarColor, setNavbarColor] = useNavbarColor() |
|
|
|
const [navbarColor, setNavbarColor] = useNavbarColor(); |
|
|
|
|
|
|
|
|
|
|
|
// ** States
|
|
|
|
// ** States
|
|
|
|
const [isMounted, setIsMounted] = useState(false) |
|
|
|
const [isMounted, setIsMounted] = useState(false); |
|
|
|
const [menuVisibility, setMenuVisibility] = useState(false) |
|
|
|
const [menuVisibility, setMenuVisibility] = useState(false); |
|
|
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth) |
|
|
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth); |
|
|
|
|
|
|
|
|
|
|
|
// ** Store Vars
|
|
|
|
// ** Store Vars
|
|
|
|
const dispatch = useDispatch() |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const layoutStore = useSelector(state => state.layout) |
|
|
|
const layoutStore = useSelector(state => state.layout); |
|
|
|
|
|
|
|
|
|
|
|
// ** Update Window Width
|
|
|
|
// ** Update Window Width
|
|
|
|
const handleWindowWidth = () => { |
|
|
|
const handleWindowWidth = () => { |
|
|
|
setWindowWidth(window.innerWidth) |
|
|
|
setWindowWidth(window.innerWidth); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// ** Vars
|
|
|
|
// ** Vars
|
|
|
|
const location = useLocation() |
|
|
|
const location = useLocation(); |
|
|
|
const contentWidth = layoutStore.contentWidth |
|
|
|
const contentWidth = layoutStore.contentWidth; |
|
|
|
const menuCollapsed = layoutStore.menuCollapsed |
|
|
|
const menuCollapsed = layoutStore.menuCollapsed; |
|
|
|
const isHidden = layoutStore.menuHidden |
|
|
|
const isHidden = layoutStore.menuHidden; |
|
|
|
|
|
|
|
|
|
|
|
// ** Toggles Menu Collapsed
|
|
|
|
// ** Toggles Menu Collapsed
|
|
|
|
const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val)) |
|
|
|
const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val)); |
|
|
|
|
|
|
|
|
|
|
|
// ** Handles Content Width
|
|
|
|
// ** Handles Content Width
|
|
|
|
const setContentWidth = val => dispatch(handleContentWidth(val)) |
|
|
|
const setContentWidth = val => dispatch(handleContentWidth(val)); |
|
|
|
|
|
|
|
|
|
|
|
// ** Handles Content Width
|
|
|
|
// ** Handles Content Width
|
|
|
|
const setIsHidden = val => dispatch(handleMenuHidden(val)) |
|
|
|
const setIsHidden = val => dispatch(handleMenuHidden(val)); |
|
|
|
|
|
|
|
|
|
|
|
//** This function will detect the Route Change and will hide the menu on menu item click
|
|
|
|
//** This function will detect the Route Change and will hide the menu on menu item click
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (menuVisibility && windowWidth < 1200) { |
|
|
|
if (menuVisibility && windowWidth < 1200) { |
|
|
|
setMenuVisibility(false) |
|
|
|
setMenuVisibility(false); |
|
|
|
} |
|
|
|
} |
|
|
|
}, [location]) |
|
|
|
}, [location]); |
|
|
|
|
|
|
|
|
|
|
|
//** Sets Window Size & Layout Props
|
|
|
|
//** Sets Window Size & Layout Props
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (window !== undefined) { |
|
|
|
if (window !== undefined) { |
|
|
|
window.addEventListener('resize', handleWindowWidth) |
|
|
|
window.addEventListener('resize', handleWindowWidth); |
|
|
|
} |
|
|
|
} |
|
|
|
}, [windowWidth]) |
|
|
|
}, [windowWidth]); |
|
|
|
|
|
|
|
|
|
|
|
//** ComponentDidMount
|
|
|
|
//** ComponentDidMount
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
setIsMounted(true) |
|
|
|
setIsMounted(true); |
|
|
|
return () => setIsMounted(false) |
|
|
|
return () => setIsMounted(false); |
|
|
|
}, []) |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
// ** Vars
|
|
|
|
// ** Vars
|
|
|
|
const footerClasses = { |
|
|
|
const footerClasses = { |
|
|
|
static: 'footer-static', |
|
|
|
static: 'footer-static', |
|
|
|
sticky: 'footer-fixed', |
|
|
|
sticky: 'footer-fixed', |
|
|
|
hidden: 'footer-hidden' |
|
|
|
hidden: 'footer-hidden' |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const navbarWrapperClasses = { |
|
|
|
const navbarWrapperClasses = { |
|
|
|
floating: 'navbar-floating', |
|
|
|
floating: 'navbar-floating', |
|
|
|
sticky: 'navbar-sticky', |
|
|
|
sticky: 'navbar-sticky', |
|
|
|
static: 'navbar-static', |
|
|
|
static: 'navbar-static', |
|
|
|
hidden: 'navbar-hidden' |
|
|
|
hidden: 'navbar-hidden' |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const navbarClasses = { |
|
|
|
const navbarClasses = { |
|
|
|
floating: 'floating-nav', |
|
|
|
floating: 'floating-nav', |
|
|
|
sticky: 'fixed-top', |
|
|
|
sticky: 'fixed-top', |
|
|
|
static: 'navbar-static-top', |
|
|
|
static: 'navbar-static-top', |
|
|
|
hidden: 'd-none' |
|
|
|
hidden: 'd-none' |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white' |
|
|
|
const bgColorCondition = |
|
|
|
|
|
|
|
navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'; |
|
|
|
|
|
|
|
|
|
|
|
if (!isMounted) { |
|
|
|
if (!isMounted) { |
|
|
|
return null |
|
|
|
return null; |
|
|
|
} |
|
|
|
} |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div |
|
|
|
<div |
|
|
|
|
|
|
|
id='vertical' |
|
|
|
className={classnames( |
|
|
|
className={classnames( |
|
|
|
`wrapper vertical-layout ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${ |
|
|
|
`wrapper vertical-layout ${ |
|
|
|
footerClasses[footerType] || 'footer-static' |
|
|
|
navbarWrapperClasses[navbarType] || 'navbar-floating' |
|
|
|
}`,
|
|
|
|
} ${footerClasses[footerType] || 'footer-static'}`,
|
|
|
|
{ |
|
|
|
{ |
|
|
|
// Modern Menu
|
|
|
|
// Modern Menu
|
|
|
|
'vertical-menu-modern': windowWidth >= 1200, |
|
|
|
'vertical-menu-modern': windowWidth >= 1200, |
|
|
|
@ -157,11 +164,21 @@ const VerticalLayout = props => { |
|
|
|
dark={skin === 'dark' || bgColorCondition} |
|
|
|
dark={skin === 'dark' || bgColorCondition} |
|
|
|
color={bgColorCondition ? navbarColor : undefined} |
|
|
|
color={bgColorCondition ? navbarColor : undefined} |
|
|
|
className={classnames( |
|
|
|
className={classnames( |
|
|
|
`header-navbar navbar align-items-center ${navbarClasses[navbarType] || 'floating-nav'} navbar-shadow` |
|
|
|
`header-navbar navbar align-items-center ${ |
|
|
|
|
|
|
|
navbarClasses[navbarType] || 'floating-nav' |
|
|
|
|
|
|
|
} navbar-shadow` |
|
|
|
)} |
|
|
|
)} |
|
|
|
> |
|
|
|
> |
|
|
|
<div className='navbar-container d-flex content'> |
|
|
|
<div className='navbar-container d-flex content'> |
|
|
|
{navbar ? navbar : <NavbarComponent setMenuVisibility={setMenuVisibility} skin={skin} setSkin={setSkin} />} |
|
|
|
{navbar ? ( |
|
|
|
|
|
|
|
navbar |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<NavbarComponent |
|
|
|
|
|
|
|
setMenuVisibility={setMenuVisibility} |
|
|
|
|
|
|
|
skin={skin} |
|
|
|
|
|
|
|
setSkin={setSkin} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Navbar> |
|
|
|
</Navbar> |
|
|
|
{children} |
|
|
|
{children} |
|
|
|
@ -201,11 +218,21 @@ const VerticalLayout = props => { |
|
|
|
/> |
|
|
|
/> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
<footer |
|
|
|
<footer |
|
|
|
className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, { |
|
|
|
className={classnames( |
|
|
|
|
|
|
|
`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, |
|
|
|
|
|
|
|
{ |
|
|
|
'd-none': footerType === 'hidden' |
|
|
|
'd-none': footerType === 'hidden' |
|
|
|
})} |
|
|
|
} |
|
|
|
|
|
|
|
)} |
|
|
|
> |
|
|
|
> |
|
|
|
{footer ? footer : <FooterComponent footerType={footerType} footerClasses={footerClasses} />} |
|
|
|
{footer ? ( |
|
|
|
|
|
|
|
footer |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<FooterComponent |
|
|
|
|
|
|
|
footerType={footerType} |
|
|
|
|
|
|
|
footerClasses={footerClasses} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
)} |
|
|
|
</footer> |
|
|
|
</footer> |
|
|
|
|
|
|
|
|
|
|
|
{themeConfig.layout.scrollTop === true ? ( |
|
|
|
{themeConfig.layout.scrollTop === true ? ( |
|
|
|
@ -218,7 +245,7 @@ const VerticalLayout = props => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default VerticalLayout |
|
|
|
export default VerticalLayout; |
|
|
|
|
junh_eee(이준희)
6 months ago