Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
CollapseBtn,
CollapseIcon,
SecondaryCollapseBtn,
SecondaryCollapseIcon,
Footer,
Content,
InsetContainer,
ConfigGenerator,
} from '@mui-treasury/layout';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import Toolbar from '@material-ui/core/Toolbar';
import { ContentMockUp } from '@mui-treasury/mockup/layout';
const config = ConfigGenerator({ addOnsIncluded: true });
config.setPrimarySidebarToNonInset();
config.primarySidebar.setVariant('persistent');
config.primarySidebar.setCollapsible(true);
config.setSecondarySidebarToInset();
config.footer.setSecondaryInsetBehavior('none');
// config.primarySidebar.setVariant('persistent');
// config.primarySidebar.setCollapsible(true);
// config.primarySidebar.setCollapsedWidth(80);
// config.header.setPosition('fixed');
// config.header.setClipped(true);
// config.header.setSecondaryClipped(true);
// config.header.setPersistentBehavior('flexible');
// config.header.setSecondaryPersistentBehavior('flexible');
// config.content.setPersistentBehavior('flexible');
// config.content.setSecondaryPersistentBehavior('flexible');
InsetSidebar,
Footer,
Content,
ConfigGenerator,
} from '@mui-treasury/layout';
import Container from '@material-ui/core/Container';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import {
ContentMockUp,
FooterMockUp,
HeaderMockUp,
NavContentMockUp,
} from '@mui-treasury/mockup/layout';
const config = ConfigGenerator();
config.setPrimarySidebarToInset();
config.debug({ addOnsIncluded: true });
const InsetSidebarDemo = () => {
return (
{({ headerStyles, containerStyles }) => (
<>
<header>
</header>
HeaderMockUp,
ContentMockUp,
FooterMockUp,
} from '@mui-treasury/mockup/layout';
import { RoundIconSidebar } from '@mui-treasury/mockup/sidebars';
const useStyles = makeStyles(() => ({
header: {
backgroundColor: '#fff',
},
sidebar: {
backgroundColor: '#36338E',
},
}));
const config = ConfigGenerator();
config.primarySidebar
.setCollapsible(false)
.setVariant('persistent')
.setWidth(84);
config.header.unclipPrimary();
const ControlSidebarDemo = () => {
const styles = useStyles();
return (
{({ headerStyles, sidebarStyles, setOpened }) => (
<>
<header>
</header>
const SidebarLayout = ({ totalItems, pkg, children, getOpenKeys }) => {
const menus = MENUS[PKG[pkg]];
const styles = useStyles();
const headerStyles = useHeaderStyles();
const sidebarStyles = useSidebarStyles();
const footerStyles = useFooterStyles();
return (
<>
<header>
<div>
</div></header>
const index = () => {
const [preset, setPreset] = useState("createStandardLayout");
const [data, setData] = useState({
header: true,
nav: true,
content: true,
footer: true
});
const sidebarStyles = useSidebarStyles();
const headerStyles = useHeaderStyles();
return (
<header>
{data.header && }
</header>
const index = () => {
const [preset, setPreset] = useState("createStandardLayout");
const [data, setData] = useState({
header: true,
nav: true,
content: true,
footer: true
});
const sidebarStyles = useSidebarStyles();
const headerStyles = useHeaderStyles();
return (
<header>
{data.header && }
</header>
const SidebarLayout = ({ totalItems, pkg, children, getOpenKeys }) => {
const menus = MENUS[PKG[pkg]];
const styles = useStyles();
const headerStyles = useHeaderStyles();
const sidebarStyles = useSidebarStyles();
const footerStyles = useFooterStyles();
return (
<>
<header>
<div>
</div></header>
const PageHeader = () => {
const data = useStaticQuery(graphql`
query HeaderQuery {
logo: file(absolutePath: { regex: "/logo.png/" }) {
childImageSharp {
fixed(width: 48, height: 48) {
...GatsbyImageSharpFixed
}
}
}
}
`);
const { logo } = data;
const styles = useStyles();
const screen = useScreen();
return (
{({ location }) => {
const shouldRenderLogo =
screen !== 'xs' || (screen === 'xs' && location.pathname === '/');
return (
{shouldRenderLogo && (