// ** MUI Imports import Fab from '@mui/material/Fab' import AppBar from '@mui/material/AppBar' import { styled } from '@mui/material/styles' import Box, { BoxProps } from '@mui/material/Box' import MuiToolbar, { ToolbarProps } from '@mui/material/Toolbar' // ** 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 Customizer from 'src/@core/components/customizer' import Footer from './components/shared-components/footer' import Navigation from './components/horizontal/navigation' import ScrollToTop from 'src/@core/components/scroll-to-top' import AppBarContent from './components/horizontal/app-bar-content' // ** Util Import import { hexToRGBA } from 'src/@core/utils/hex-to-rgba' const HorizontalLayoutWrapper = styled('div')({ height: '100%', display: 'flex', ...(themeConfig.horizontalMenuAnimation && { overflow: 'clip' }) }) const MainContentWrapper = styled(Box)({ flexGrow: 1, minWidth: 0, display: 'flex', minHeight: '100vh', flexDirection: 'column' }) const Toolbar = styled(MuiToolbar)(({ theme }) => ({ width: '100%', padding: `${theme.spacing(0, 6)} !important`, [theme.breakpoints.down('sm')]: { paddingLeft: theme.spacing(2), paddingRight: theme.spacing(4) }, [theme.breakpoints.down('xs')]: { paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2) } })) 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 HorizontalLayout = (props: LayoutProps) => { // ** Props const { hidden, children, settings, scrollToTop, footerProps, saveSettings, contentHeightFixed, horizontalLayoutProps } = props // ** Vars const { skin, appBar, navHidden, appBarBlur, contentWidth } = settings const appBarProps = horizontalLayoutProps?.appBar?.componentProps const userNavMenuContent = horizontalLayoutProps?.navMenu?.content let userAppBarStyle = {} if (appBarProps && appBarProps.sx) { userAppBarStyle = appBarProps.sx } const userAppBarProps = Object.assign({}, appBarProps) delete userAppBarProps.sx return ( {/* Navbar (or AppBar) and Navigation Menu Wrapper */} `1px solid ${theme.palette.divider}` }), transition: 'border-bottom 0.2s ease-in-out, backdrop-filter .25s ease-in-out, box-shadow .25s ease-in-out', ...(appBar === 'fixed' ? appBarBlur && { backdropFilter: 'blur(8px)', backgroundColor: theme => hexToRGBA(theme.palette.background.paper, 0.9) } : {}), ...userAppBarStyle }} {...userAppBarProps} > {/* Navbar / AppBar */} `1px solid ${theme.palette.divider}` }) }} > `${(theme.mixins.toolbar.minHeight as number) - 1}px !important` }} > {/* Navigation Menu */} {navHidden ? null : ( `${(theme.mixins.toolbar.minHeight as number) - (skin === 'bordered' ? 1 : 0)}px !important` }} > {(userNavMenuContent && userNavMenuContent(props)) || ( ).navMenu?.navItems } /> )} )} {/* Content */} {children} {/* Footer */}