@elacity-js/uikit/dist/layouts/DefaultLayout.js

React / Material UI Design kit for Elacity project

import { __rest } from '../node_modules/tslib/tslib.es6.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useRef } from 'react';
import { useLocation, Outlet } from 'react-router-dom';
import useMediaQuery from '@mui/material/useMediaQuery';
import { styled, useTheme } from '@mui/material/styles';
import ScrollToTop from '../components/ScrollToTopButton.js';
import MHidden from '../components/MHidden.js';
import Navbar from './Navbar.js';
import FooterLayout from './Footer/Footer.js';

const RootWrapper = styled('div')({
    display: 'flex',
    minHeight: '100%',
    overflow: 'hidden',
});
const Background = styled('div')(({ theme }) => ({
    position: 'fixed',
    width: '100%',
    height: '100%',
    zIndex: -2,
    opacity: theme.palette.mode === 'light' ? 0.75 : 0.8,
    background: theme.palette.mode === 'light'
        ? `radial-gradient(circle at right bottom, ${theme.palette.vivid.main} -360%, ${theme.palette.background.default} 40%)`
        : `radial-gradient(circle at right bottom, ${theme.palette.vivid.main} -460%, ${theme.palette.background.default} 40%)`,
}));
const MainLayout = styled('div', {
    name: 'MainLayout',
    slot: 'Root',
    shouldForwardProp: (prop) => !['noPadding', 'withBottomNav', 'sx'].includes(prop),
    overridesResolver: (props, styles) => [
        styles.root,
        props.noPadding && styles.noPadding,
        props.withBottomNav && styles.withBottomNav,
    ],
})(({ theme }) => ({
    flexGrow: 1,
    overflow: 'auto',
    minHeight: '100%',
    '& > *:first-of-type': {
        // ensure to fill all the available height, minus the header
        minHeight: 'calc(100vh - 160px)',
        [theme.breakpoints.down('lg')]: {
            minHeight: 'calc(100vh - 215px)',
        },
    },
}));
function DefaultLayout(_a) {
    var { sidebar, hiddenBottom, scrollToTop, Navbar, Footer } = _a, props = __rest(_a, ["sidebar", "hiddenBottom", "scrollToTop", "Navbar", "Footer"]);
    const theme = useTheme();
    const location = useLocation();
    const smDown = useMediaQuery(theme.breakpoints.down('sm'));
    const navRef = useRef(false);
    React__default.useEffect(() => {
        // always start from top when opening page
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }, [location.pathname]);
    return (jsxs(RootWrapper, Object.assign({ className: "RootWrapper" }, { children: [jsx(Background, {}), jsx(Navbar, {}), Boolean(sidebar) && sidebar, jsxs(MainLayout, Object.assign({ className: "MainLayout" }, props, { noPadding: props.noPadding || smDown, withBottomNav: Boolean(navRef.current) }, { children: [jsx(Outlet, {}), jsx(Footer, {}), Boolean(hiddenBottom) && (jsx(MHidden, Object.assign({ width: "smUp", alsoIf: !/(mobile|android|iphone|operamobile|ipad)/gi.test(navigator.userAgent) }, { children: hiddenBottom })))] })), Boolean(scrollToTop) && (jsx(ScrollToTop, {}))] })));
}
DefaultLayout.defaultProps = {
    Footer: FooterLayout,
    Navbar: Navbar,
};

export { Background, MainLayout, RootWrapper, DefaultLayout as default };
//# sourceMappingURL=DefaultLayout.js.map