diff --git a/package-lock.json b/package-lock.json index c2d70aa..a3de847 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21968,14 +21968,6 @@ } } }, - "react-portal": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.2.2.tgz", - "integrity": "sha512-vS18idTmevQxyQpnde0Td6ZcUlv+pD8GTyR42n3CHUQq9OHi1C4jDE4ZWEbEsrbrLRhSECYiao58cvocwMtP7Q==", - "requires": { - "prop-types": "^15.5.8" - } - }, "react-rating": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/react-rating/-/react-rating-2.0.5.tgz", diff --git a/package.json b/package.json index 9109bfb..af65893 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,6 @@ "react-pdf": "5.3.2", "react-perfect-scrollbar": "1.5.5", "react-player": "2.6.2", - "react-portal": "^4.2.2", "react-rating": "2.0.5", "react-redux": "7.2.2", "react-router-dom": "5.2.0", diff --git a/src/@core/layouts/VerticalLayout.js b/src/@core/layouts/VerticalLayout.js index 4e990e6..43145f8 100644 --- a/src/@core/layouts/VerticalLayout.js +++ b/src/@core/layouts/VerticalLayout.js @@ -1,136 +1,129 @@ // ** React Imports -import { useState, useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useState, useEffect } from 'react' +import { useLocation } from 'react-router-dom' // ** Store & Actions -import { useSelector, useDispatch } from 'react-redux'; -import { - handleMenuCollapsed, - handleContentWidth, - handleMenuHidden -} from '@store/actions/layout'; +import { useSelector, useDispatch } from 'react-redux' +import { handleMenuCollapsed, handleContentWidth, handleMenuHidden } from '@store/actions/layout' // ** Third Party Components -import classnames from 'classnames'; -import { ArrowUp } from 'react-feather'; -import ScrollToTop from 'react-scroll-up'; -import { Navbar, Button } from 'reactstrap'; +import classnames from 'classnames' +import { ArrowUp } from 'react-feather' +import ScrollToTop from 'react-scroll-up' +import { Navbar, Button } from 'reactstrap' // ** Configs -import themeConfig from '@configs/themeConfig'; +import themeConfig from '@configs/themeConfig' // ** Custom Components -import Customizer from '@components/customizer'; -import FooterComponent from './components/footer'; -import NavbarComponent from './components/navbar'; -import SidebarComponent from './components/menu/vertical-menu'; +import Customizer from '@components/customizer' +import FooterComponent from './components/footer' +import NavbarComponent from './components/navbar' +import SidebarComponent from './components/menu/vertical-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/vertical-menu.scss'; -import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss'; +import '@styles/base/core/menu/menu-types/vertical-menu.scss' +import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss' const VerticalLayout = props => { // ** Props - const { children, navbar, footer, menu, routerProps, currentActiveItem } = - props; + const { children, navbar, footer, menu, routerProps, currentActiveItem } = 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 [menuVisibility, setMenuVisibility] = useState(false); - const [windowWidth, setWindowWidth] = useState(window.innerWidth); + const [isMounted, setIsMounted] = useState(false) + const [menuVisibility, setMenuVisibility] = useState(false) + const [windowWidth, setWindowWidth] = useState(window.innerWidth) // ** Store Vars - const dispatch = useDispatch(); - const layoutStore = useSelector(state => state.layout); + const dispatch = useDispatch() + const layoutStore = useSelector(state => state.layout) // ** Update Window Width const handleWindowWidth = () => { - setWindowWidth(window.innerWidth); - }; + setWindowWidth(window.innerWidth) + } // ** Vars - const location = useLocation(); - const contentWidth = layoutStore.contentWidth; - const menuCollapsed = layoutStore.menuCollapsed; - const isHidden = layoutStore.menuHidden; + const location = useLocation() + const contentWidth = layoutStore.contentWidth + const menuCollapsed = layoutStore.menuCollapsed + const isHidden = layoutStore.menuHidden // ** Toggles Menu Collapsed - const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val)); + const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val)) // ** 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)) //** This function will detect the Route Change and will hide the menu on menu item click useEffect(() => { if (menuVisibility && windowWidth < 1200) { - setMenuVisibility(false); + setMenuVisibility(false) } - }, [location]); + }, [location]) //** Sets Window Size & Layout Props useEffect(() => { if (window !== undefined) { - window.addEventListener('resize', handleWindowWidth); + window.addEventListener('resize', handleWindowWidth) } - }, [windowWidth]); + }, [windowWidth]) //** ComponentDidMount useEffect(() => { - setIsMounted(true); - return () => setIsMounted(false); - }, []); + setIsMounted(true) + return () => setIsMounted(false) + }, []) // ** Vars const footerClasses = { static: 'footer-static', sticky: 'footer-fixed', hidden: 'footer-hidden' - }; + } const navbarWrapperClasses = { floating: 'navbar-floating', sticky: 'navbar-sticky', static: 'navbar-static', hidden: 'navbar-hidden' - }; + } const navbarClasses = { floating: 'floating-nav', sticky: 'fixed-top', static: 'navbar-static-top', hidden: 'd-none' - }; + } - const bgColorCondition = - navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'; + const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white' if (!isMounted) { - return null; + return null } return (