|
|
|
@ -1,123 +1,129 @@
|
|
|
|
|
// ** React Imports
|
|
|
|
|
import { useState, useEffect } from 'react' |
|
|
|
|
import { Link } from 'react-router-dom' |
|
|
|
|
import { useState, useEffect } from 'react'; |
|
|
|
|
import { Link } from 'react-router-dom'; |
|
|
|
|
|
|
|
|
|
// ** Store & Actions
|
|
|
|
|
import { useSelector, useDispatch } from 'react-redux' |
|
|
|
|
import { handleMenuHidden, handleContentWidth } from '@store/actions/layout' |
|
|
|
|
import { useSelector, useDispatch } from 'react-redux'; |
|
|
|
|
import { handleMenuHidden, handleContentWidth } from '@store/actions/layout'; |
|
|
|
|
|
|
|
|
|
// ** Third Party Components
|
|
|
|
|
import classnames from 'classnames' |
|
|
|
|
import { ArrowUp } from 'react-feather' |
|
|
|
|
import ScrollToTop from 'react-scroll-up' |
|
|
|
|
import { Navbar, NavItem, Button } from 'reactstrap' |
|
|
|
|
import classnames from 'classnames'; |
|
|
|
|
import { ArrowUp } from 'react-feather'; |
|
|
|
|
import ScrollToTop from 'react-scroll-up'; |
|
|
|
|
import { Navbar, NavItem, Button } from 'reactstrap'; |
|
|
|
|
|
|
|
|
|
// ** Configs
|
|
|
|
|
import themeConfig from '@configs/themeConfig' |
|
|
|
|
import themeConfig from '@configs/themeConfig'; |
|
|
|
|
|
|
|
|
|
// ** Custom Components
|
|
|
|
|
import Customizer from '@components/customizer' |
|
|
|
|
import NavbarComponent from './components/navbar' |
|
|
|
|
import FooterComponent from './components/footer' |
|
|
|
|
import MenuComponent from './components/menu/horizontal-menu' |
|
|
|
|
import Customizer from '@components/customizer'; |
|
|
|
|
import NavbarComponent from './components/navbar'; |
|
|
|
|
import FooterComponent from './components/footer'; |
|
|
|
|
import MenuComponent from './components/menu/horizontal-menu'; |
|
|
|
|
|
|
|
|
|
// ** Custom Hooks
|
|
|
|
|
import { useRTL } from '@hooks/useRTL' |
|
|
|
|
import { useSkin } from '@hooks/useSkin' |
|
|
|
|
import { useNavbarType } from '@hooks/useNavbarType' |
|
|
|
|
import { useFooterType } from '@hooks/useFooterType' |
|
|
|
|
import { useNavbarColor } from '@hooks/useNavbarColor' |
|
|
|
|
import { useRTL } from '@hooks/useRTL'; |
|
|
|
|
import { useSkin } from '@hooks/useSkin'; |
|
|
|
|
import { useNavbarType } from '@hooks/useNavbarType'; |
|
|
|
|
import { useFooterType } from '@hooks/useFooterType'; |
|
|
|
|
import { useNavbarColor } from '@hooks/useNavbarColor'; |
|
|
|
|
|
|
|
|
|
// ** Styles
|
|
|
|
|
import '@styles/base/core/menu/menu-types/horizontal-menu.scss' |
|
|
|
|
import '@styles/base/core/menu/menu-types/horizontal-menu.scss'; |
|
|
|
|
|
|
|
|
|
const HorizontalLayout = props => { |
|
|
|
|
// ** Props
|
|
|
|
|
const { children, navbar, footer, menu, currentActiveItem, routerProps } = props |
|
|
|
|
const { children, navbar, footer, menu, currentActiveItem, routerProps } = |
|
|
|
|
props; |
|
|
|
|
|
|
|
|
|
// ** Hooks
|
|
|
|
|
const [skin, setSkin] = useSkin() |
|
|
|
|
const [isRtl, setIsRtl] = useRTL() |
|
|
|
|
const [navbarType, setNavbarType] = useNavbarType() |
|
|
|
|
const [footerType, setFooterType] = useFooterType() |
|
|
|
|
const [navbarColor, setNavbarColor] = useNavbarColor() |
|
|
|
|
const [skin, setSkin] = useSkin(); |
|
|
|
|
const [isRtl, setIsRtl] = useRTL(); |
|
|
|
|
const [navbarType, setNavbarType] = useNavbarType(); |
|
|
|
|
const [footerType, setFooterType] = useFooterType(); |
|
|
|
|
const [navbarColor, setNavbarColor] = useNavbarColor(); |
|
|
|
|
|
|
|
|
|
// ** States
|
|
|
|
|
const [isMounted, setIsMounted] = useState(false) |
|
|
|
|
const [navbarScrolled, setNavbarScrolled] = useState(false) |
|
|
|
|
const [isMounted, setIsMounted] = useState(false); |
|
|
|
|
const [navbarScrolled, setNavbarScrolled] = useState(false); |
|
|
|
|
|
|
|
|
|
// ** Store Vars
|
|
|
|
|
const dispatch = useDispatch() |
|
|
|
|
const layoutStore = useSelector(state => state.layout) |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const layoutStore = useSelector(state => state.layout); |
|
|
|
|
const { user } = useSelector(state => state.authState); |
|
|
|
|
|
|
|
|
|
// ** Vars
|
|
|
|
|
const contentWidth = layoutStore.contentWidth |
|
|
|
|
const isHidden = layoutStore.menuHidden |
|
|
|
|
const contentWidth = layoutStore.contentWidth; |
|
|
|
|
const isHidden = layoutStore.menuHidden; |
|
|
|
|
|
|
|
|
|
// ** Handles Content Width
|
|
|
|
|
const setContentWidth = val => dispatch(handleContentWidth(val)) |
|
|
|
|
const setContentWidth = val => dispatch(handleContentWidth(val)); |
|
|
|
|
|
|
|
|
|
// ** Handles Content Width
|
|
|
|
|
const setIsHidden = val => dispatch(handleMenuHidden(val)) |
|
|
|
|
const setIsHidden = val => dispatch(handleMenuHidden(val)); |
|
|
|
|
|
|
|
|
|
// ** UseEffect Cleanup
|
|
|
|
|
const cleanup = () => { |
|
|
|
|
setIsMounted(false) |
|
|
|
|
setNavbarScrolled(false) |
|
|
|
|
} |
|
|
|
|
setIsMounted(false); |
|
|
|
|
setNavbarScrolled(false); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//** ComponentDidMount
|
|
|
|
|
useEffect(() => { |
|
|
|
|
setIsMounted(true) |
|
|
|
|
setIsMounted(true); |
|
|
|
|
window.addEventListener('scroll', function () { |
|
|
|
|
if (window.pageYOffset > 65 && navbarScrolled === false) { |
|
|
|
|
setNavbarScrolled(true) |
|
|
|
|
setNavbarScrolled(true); |
|
|
|
|
} |
|
|
|
|
if (window.pageYOffset < 65) { |
|
|
|
|
setNavbarScrolled(false) |
|
|
|
|
setNavbarScrolled(false); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
return () => cleanup() |
|
|
|
|
}, []) |
|
|
|
|
}); |
|
|
|
|
return () => cleanup(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
// ** Vars
|
|
|
|
|
const footerClasses = { |
|
|
|
|
static: 'footer-static', |
|
|
|
|
sticky: 'footer-fixed', |
|
|
|
|
hidden: 'footer-hidden' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const navbarWrapperClasses = { |
|
|
|
|
floating: 'navbar-floating', |
|
|
|
|
sticky: 'navbar-sticky', |
|
|
|
|
static: 'navbar-static' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const navbarClasses = { |
|
|
|
|
floating: 'floating-nav', |
|
|
|
|
sticky: 'fixed-top' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white' |
|
|
|
|
const bgColorCondition = |
|
|
|
|
navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'; |
|
|
|
|
|
|
|
|
|
if (!isMounted) { |
|
|
|
|
return null |
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className={classnames( |
|
|
|
|
`wrapper horizontal-layout horizontal-menu ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${ |
|
|
|
|
footerClasses[footerType] || 'footer-static' |
|
|
|
|
} menu-expanded` |
|
|
|
|
`wrapper horizontal-layout horizontal-menu ${ |
|
|
|
|
navbarWrapperClasses[navbarType] || 'navbar-floating' |
|
|
|
|
} ${footerClasses[footerType] || 'footer-static'} menu-expanded` |
|
|
|
|
)} |
|
|
|
|
{...(isHidden ? { 'data-col': '1-column' } : {})} |
|
|
|
|
> |
|
|
|
|
<Navbar |
|
|
|
|
expand='lg' |
|
|
|
|
className={classnames('header-navbar navbar-fixed align-items-center navbar-shadow navbar-brand-center', { |
|
|
|
|
className={classnames( |
|
|
|
|
'header-navbar navbar-fixed align-items-center navbar-shadow navbar-brand-center', |
|
|
|
|
{ |
|
|
|
|
'navbar-scrolled': navbarScrolled |
|
|
|
|
})} |
|
|
|
|
} |
|
|
|
|
)} |
|
|
|
|
> |
|
|
|
|
{!navbar && ( |
|
|
|
|
<div className='navbar-header d-xl-block d-none'> |
|
|
|
@ -127,7 +133,9 @@ const HorizontalLayout = props => {
|
|
|
|
|
<span className='brand-logo'> |
|
|
|
|
<img src={themeConfig.app.appLogoImage} alt='logo' /> |
|
|
|
|
</span> |
|
|
|
|
<h2 className='brand-text mb-0'>{themeConfig.app.appName}</h2> |
|
|
|
|
<h2 className='brand-text mb-0'> |
|
|
|
|
{user?.cstmrSno === 27 ? 'FLYTO' : themeConfig.app.appName} |
|
|
|
|
</h2> |
|
|
|
|
</Link> |
|
|
|
|
</NavItem> |
|
|
|
|
</ul> |
|
|
|
@ -145,12 +153,24 @@ const HorizontalLayout = props => {
|
|
|
|
|
expand='sm' |
|
|
|
|
light={skin !== 'dark'} |
|
|
|
|
dark={skin === 'dark' || bgColorCondition} |
|
|
|
|
className={classnames(`header-navbar navbar-horizontal navbar-shadow menu-border`, { |
|
|
|
|
className={classnames( |
|
|
|
|
`header-navbar navbar-horizontal navbar-shadow menu-border`, |
|
|
|
|
{ |
|
|
|
|
[navbarClasses[navbarType]]: navbarType !== 'static', |
|
|
|
|
'floating-nav': (!navbarClasses[navbarType] && navbarType !== 'static') || navbarType === 'floating' |
|
|
|
|
})} |
|
|
|
|
'floating-nav': |
|
|
|
|
(!navbarClasses[navbarType] && navbarType !== 'static') || |
|
|
|
|
navbarType === 'floating' |
|
|
|
|
} |
|
|
|
|
)} |
|
|
|
|
> |
|
|
|
|
{menu ? menu : <MenuComponent routerProps={routerProps} currentActiveItem={currentActiveItem} />} |
|
|
|
|
{menu ? ( |
|
|
|
|
menu |
|
|
|
|
) : ( |
|
|
|
|
<MenuComponent |
|
|
|
|
routerProps={routerProps} |
|
|
|
|
currentActiveItem={currentActiveItem} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
</Navbar> |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
@ -180,11 +200,21 @@ const HorizontalLayout = props => {
|
|
|
|
|
/> |
|
|
|
|
) : null} |
|
|
|
|
<footer |
|
|
|
|
className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, { |
|
|
|
|
className={classnames( |
|
|
|
|
`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, |
|
|
|
|
{ |
|
|
|
|
'd-none': footerType === 'hidden' |
|
|
|
|
})} |
|
|
|
|
} |
|
|
|
|
)} |
|
|
|
|
> |
|
|
|
|
{footer ? footer : <FooterComponent footerType={footerType} footerClasses={footerClasses} />} |
|
|
|
|
{footer ? ( |
|
|
|
|
footer |
|
|
|
|
) : ( |
|
|
|
|
<FooterComponent |
|
|
|
|
footerType={footerType} |
|
|
|
|
footerClasses={footerClasses} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
</footer> |
|
|
|
|
|
|
|
|
|
{themeConfig.layout.scrollTop === true ? ( |
|
|
|
@ -197,6 +227,6 @@ const HorizontalLayout = props => {
|
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
export default HorizontalLayout |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
export default HorizontalLayout; |
|
|
|
|