// ** React Imports import { useState } from 'react' // ** MUI Imports import Fab from '@mui/material/Fab' import { styled } from '@mui/material/styles' import Box, { BoxProps } from '@mui/material/Box' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Theme Config Import import themeConfig from 'src/configs/themeConfig' // ** Type Import import { LayoutProps } from 'src/@core/layouts/types' // ** Components import AppBar from './components/vertical/appBar' import Customizer from 'src/@core/components/customizer' import Navigation from './components/vertical/navigation' import Footer from './components/shared-components/footer' import ScrollToTop from 'src/@core/components/scroll-to-top' const VerticalLayoutWrapper = styled('div')({ height: '100%', display: 'flex' }) const MainContentWrapper = styled(Box)({ flexGrow: 1, minWidth: 0, display: 'flex', minHeight: '100vh', flexDirection: 'column' }) const ContentWrapper = styled('main')(({ theme }) => ({ flexGrow: 1, width: '100%', padding: theme.spacing(6), transition: 'padding .25s ease-in-out', [theme.breakpoints.down('sm')]: { paddingLeft: theme.spacing(4), paddingRight: theme.spacing(4) } })) const VerticalLayout = (props: LayoutProps) => { // ** Props const { hidden, settings, children, scrollToTop, footerProps, contentHeightFixed, verticalLayoutProps } = props // ** Vars const { skin, navHidden, contentWidth } = settings const { navigationSize, disableCustomizer, collapsedNavigationSize } = themeConfig const navWidth = navigationSize const navigationBorderWidth = skin === 'bordered' ? 1 : 0 const collapsedNavWidth = collapsedNavigationSize // ** States const [navVisible, setNavVisible] = useState(false) // ** Toggle Functions const toggleNavVisibility = () => setNavVisible(!navVisible) return ( <> {/* Navigation Menu */} {navHidden && !(navHidden && settings.lastLayout === 'horizontal') ? null : ( )} {/* AppBar Component */} {/* Content */} :first-of-type': { height: '100%' } }), ...(contentWidth === 'boxed' && { mx: 'auto', '@media (min-width:1440px)': { maxWidth: 1440 }, '@media (min-width:1200px)': { maxWidth: '100%' } }) }} > {children} {/* Footer Component */}