AppShell

import { useState } from 'react';
import {
  AppShell,
  Navbar,
  Header,
  Footer,
  Aside,
  Text,
  MediaQuery,
  Burger,
  useMantineTheme,
} from '@mantine/core';

export default function AppShellDemo() {
  const theme = useMantineTheme();
  const [opened, setOpened] = useState(false);
  return (
    <AppShell
      styles={{
        main: {
          background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
        },
      }}
      navbarOffsetBreakpoint="sm"
      asideOffsetBreakpoint="sm"
      navbar={
        <Navbar p="md" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }}>
          <Text>Application navbar</Text>
        </Navbar>
      }
      aside={
        <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
          <Aside p="md" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
            <Text>Application sidebar</Text>
          </Aside>
        </MediaQuery>
      }
      footer={
        <Footer height={60} p="md">
          Application footer
        </Footer>
      }
      header={
        <Header height={{ base: 50, md: 70 }} p="md">
          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
            <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
              <Burger
                opened={opened}
                onClick={() => setOpened((o) => !o)}
                size="sm"
                color={theme.colors.gray[6]}
                mr="xl"
              />
            </MediaQuery>

            <Text>Application header</Text>
          </div>
        </Header>
      }
    >
      <Text>Resize app to see responsive navbar in action</Text>
    </AppShell>
  );
}

import { AppShell, Navbar, Header } from '@mantine/core';

function Demo() {
  // Navbar and Header will not be rendered when hidden prop is set
  return (
    <AppShell navbar={<Navbar />} header={<Header />} hidden>
      App content
    </AppShell>
  );
}

import { Navbar } from '@mantine/core';

function Demo() {
  // Same can be applied to Aside component with Aside.Section component
  return (
    <Navbar>
      {/* First section with normal height (depends on section content) */}
      <Navbar.Section>First section</Navbar.Section>

      {/* Grow section will take all available space that is not taken by first and last sections */}
      <Navbar.Section grow>Grow section</Navbar.Section>

      {/* Last section with normal height (depends on section content) */}
      <Navbar.Section>Last section</Navbar.Section>
    </Navbar>
  );
}

import { Navbar } from '@mantine/core';

function Demo() {
  // Same can be applied to Aside component
  return (
    <Navbar
      width={{
        // When viewport is larger than theme.breakpoints.sm, Navbar width will be 300
        sm: 300,

        // When viewport is larger than theme.breakpoints.lg, Navbar width will be 400
        lg: 400,

        // When other breakpoints do not match base width is used, defaults to 100%
        base: 100,
      }}
    >
      Application navbar
    </Navbar>
  );
}

import { Navbar } from '@mantine/core';

function Demo() {
  return (
    <Navbar fixed={false} position={{ top: 0, left: 0 }}>
      Application navbar
    </Navbar>
  );
}