diff --git a/src/@core/layouts/HorizontalLayout.js b/src/@core/layouts/HorizontalLayout.js index be51ca1..4d7a7be 100644 --- a/src/@core/layouts/HorizontalLayout.js +++ b/src/@core/layouts/HorizontalLayout.js @@ -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 (