diff --git a/package-lock.json b/package-lock.json index a3de847..c2d70aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21968,6 +21968,14 @@ } } }, + "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 af65893..9109bfb 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "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 43145f8..4e990e6 100644 --- a/src/@core/layouts/VerticalLayout.js +++ b/src/@core/layouts/VerticalLayout.js @@ -1,129 +1,136 @@ // ** 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 (