♿️ Add mobile drawer for navigation

src/components/layout/admin/main-admin.layout.tsx

@@ -2,6 +2,8 @@ import {
   AppShell,
   Avatar,
   Box,
+  Burger,
+  Drawer,
   Flex,
   Footer,
   Group,
@@ -16,6 +18,7 @@ import {
   UnstyledButton,
   useMantineTheme,
 } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import {
   IconAlertTriangle,
   IconBook2,
@@ -37,6 +40,7 @@ import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import Link from 'next/link';
 import { ReactNode } from 'react';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 
 import { Logo } from '../Logo';
@@ -49,146 +53,166 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
   const { t } = useTranslation();
   const { attributes } = usePackageAttributesStore();
   const theme = useMantineTheme();
-  return (
-    <AppShell
-      styles={{
-        root: {
-          background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
-        },
-      }}
-      navbar={
-        <Navbar width={{ base: 220 }}>
-          <Navbar.Section pt="xs" grow>
-            <NavLink
-              icon={
-                <ThemeIcon size="md" variant="light" color="red">
-                  <IconHome size="1rem" />
-                </ThemeIcon>
-              }
-              label="Home"
-              component={Link}
-              href="/manage/"
-            />
-            <NavLink
-              label="Users"
-              icon={
-                <ThemeIcon size="md" variant="light" color="red">
-                  <IconUser size="1rem" />
-                </ThemeIcon>
-              }
-            >
-              <NavLink
-                icon={<IconUsers size="1rem" />}
-                label="Manage"
-                component={Link}
-                href="/manage/users"
-              />
-              <NavLink
-                icon={<IconMailForward size="1rem" />}
-                label="Invites"
-                component={Link}
-                href="/manage/users/invites"
-              />
-            </NavLink>
-            <NavLink
-              label="Help"
-              icon={
-                <ThemeIcon size="md" variant="light" color="red">
-                  <IconQuestionMark size="1rem" />
-                </ThemeIcon>
-              }
-            >
-              <NavLink
-                icon={<IconBook2 size="1rem" />}
-                component="a"
-                href="https://homarr.dev/docs/about"
-                label="Documentation"
-              />
-              <NavLink
-                icon={<IconBrandGithub size="1rem" />}
-                component="a"
-                href="https://github.com/ajnart/homarr/issues/new/choose"
-                label="Report an issue / bug"
-              />
-              <NavLink
-                icon={<IconBrandDiscord size="1rem" />}
-                component="a"
-                href="https://discord.com/invite/aCsmEV5RgA"
-                label="Community Discord"
-              />
-              <NavLink
-                icon={<IconGitFork size="1rem" />}
-                component="a"
-                href="https://github.com/ajnart/homarr"
-                label="Contribute"
-              />
-            </NavLink>
-          </Navbar.Section>
-        </Navbar>
-      }
-      header={
-        <Header height={60 + 30} pb="sm" pt={0}>
-          <Box bg="red" h={30} p={3} px={6}>
-            <Flex h="100%" align="center" columnGap={7}>
-              <IconAlertTriangle color="white" size="1rem" />
-              <Text color="white" lineClamp={1}>
-                This is an experimental feature of Homarr. Please report any issues to the official
-                Homarr team.
-              </Text>
-            </Flex>
-          </Box>
-          <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
-            <UnstyledButton component={Link} href="/manage">
-              <Logo />
-            </UnstyledButton>
-            <TextInput radius="xl" w={400} placeholder="Search..." variant="filled" />
 
-            <Group noWrap>
+  const screenLargerThanMd = useScreenLargerThan('md');
-              <UnstyledButton>
+
-                <Menu>
+  const [burgerMenuOpen, { toggle: toggleBurgerMenu, close: closeBurgerMenu }] = useDisclosure(false);
-                  <Menu.Target>
+
-                    <Avatar />
+  const navigationLinks = (
-                  </Menu.Target>
+    <>
-                  <Menu.Dropdown>
+      <NavLink
-                    <Menu.Item icon={<IconSun size="1rem" />}>Switch theme</Menu.Item>
+        icon={
-                    <Menu.Item icon={<IconUserSearch size="1rem" />}>View Profile</Menu.Item>
+          <ThemeIcon size="md" variant="light" color="red">
-                    <Menu.Item icon={<IconDashboard size="1rem" />}>Default Dashboard</Menu.Item>
+            <IconHome size="1rem" />
-                    <Menu.Divider />
+          </ThemeIcon>
-                    <Menu.Item
+        }
-                      icon={<IconLogout size="1rem" />}
+        label="Home"
-                      color="red"
+        component={Link}
-                      onClick={() => signOut()}
+        href="/manage/"
-                    >
+      />
-                      Logout
+      <NavLink
-                    </Menu.Item>
+        label="Users"
-                  </Menu.Dropdown>
+        icon={
-                </Menu>
+          <ThemeIcon size="md" variant="light" color="red">
-              </UnstyledButton>
+            <IconUser size="1rem" />
-            </Group>
+          </ThemeIcon>
-          </Group>
+        }
-        </Header>
+      >
-      }
+        <NavLink
-      footer={
+          icon={<IconUsers size="1rem" />}
-        <Footer height={25}>
+          label="Manage"
-          <Group position="apart" px="md">
+          component={Link}
-            <Flex gap="md" align="center" columnGap={5}>
+          href="/manage/users"
-              <Image src="/imgs/logo/logo.svg" width={20} height={20} alt="" />
+        />
-              <Text fw="bold" size={15}>
+        <NavLink
-                Homarr
+          icon={<IconMailForward size="1rem" />}
-              </Text>
+          label="Invites"
-              {attributes.packageVersion && (
+          component={Link}
-                <Text color="dimmed" size={13}>
+          href="/manage/users/invites"
-                  {attributes.packageVersion}
+        />
+      </NavLink>
+      <NavLink
+        label="Help"
+        icon={
+          <ThemeIcon size="md" variant="light" color="red">
+            <IconQuestionMark size="1rem" />
+          </ThemeIcon>
+        }
+      >
+        <NavLink
+          icon={<IconBook2 size="1rem" />}
+          component="a"
+          href="https://homarr.dev/docs/about"
+          label="Documentation"
+        />
+        <NavLink
+          icon={<IconBrandGithub size="1rem" />}
+          component="a"
+          href="https://github.com/ajnart/homarr/issues/new/choose"
+          label="Report an issue / bug"
+        />
+        <NavLink
+          icon={<IconBrandDiscord size="1rem" />}
+          component="a"
+          href="https://discord.com/invite/aCsmEV5RgA"
+          label="Community Discord"
+        />
+        <NavLink
+          icon={<IconGitFork size="1rem" />}
+          component="a"
+          href="https://github.com/ajnart/homarr"
+          label="Contribute"
+        />
+      </NavLink>
+    </>
+  );
+  return (
+    <>
+      <AppShell
+        styles={{
+          root: {
+            background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+          },
+        }}
+        navbar={
+          <Navbar width={{ base: !screenLargerThanMd ? 0 : 220 }} hidden={!screenLargerThanMd}>
+            <Navbar.Section pt="xs" grow>
+              {navigationLinks}
+            </Navbar.Section>
+          </Navbar>
+        }
+        header={
+          <Header height={60 + 30} pb="sm" pt={0}>
+            <Box bg="red" h={30} p={3} px={6}>
+              <Flex h="100%" align="center" columnGap={7}>
+                <IconAlertTriangle color="white" size="1rem" />
+                <Text color="white" lineClamp={1}>
+                  This is an experimental feature of Homarr. Please report any issues to the
+                  official Homarr team.
                 </Text>
-              )}
+              </Flex>
-            </Flex>
+            </Box>
-          </Group>
+            <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
-        </Footer>
+              <Group noWrap>
-      }
+                {!screenLargerThanMd && (
-    >
+                  <Burger opened={burgerMenuOpen} onClick={toggleBurgerMenu} />
-      <Paper p="xl" mih="100%" withBorder>
+                )}
-        {children}
+                <UnstyledButton component={Link} href="/manage">
-      </Paper>
+                  <Logo />
-    </AppShell>
+                </UnstyledButton>
+              </Group>
+              <TextInput radius="xl" w={400} placeholder="Search..." variant="filled" />
+
+              <Group noWrap>
+                <UnstyledButton>
+                  <Menu>
+                    <Menu.Target>
+                      <Avatar />
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      <Menu.Item icon={<IconSun size="1rem" />}>Switch theme</Menu.Item>
+                      <Menu.Item icon={<IconUserSearch size="1rem" />}>View Profile</Menu.Item>
+                      <Menu.Item icon={<IconDashboard size="1rem" />}>Default Dashboard</Menu.Item>
+                      <Menu.Divider />
+                      <Menu.Item
+                        icon={<IconLogout size="1rem" />}
+                        color="red"
+                        onClick={() => signOut()}
+                      >
+                        Logout
+                      </Menu.Item>
+                    </Menu.Dropdown>
+                  </Menu>
+                </UnstyledButton>
+              </Group>
+            </Group>
+          </Header>
+        }
+        footer={
+          <Footer height={25}>
+            <Group position="apart" px="md">
+              <Flex gap="md" align="center" columnGap={5}>
+                <Image src="/imgs/logo/logo.svg" width={20} height={20} alt="" />
+                <Text fw="bold" size={15}>
+                  Homarr
+                </Text>
+                {attributes.packageVersion && (
+                  <Text color="dimmed" size={13}>
+                    {attributes.packageVersion}
+                  </Text>
+                )}
+              </Flex>
+            </Group>
+          </Footer>
+        }
+      >
+        <Paper p="xl" mih="100%" withBorder>
+          {children}
+        </Paper>
+      </AppShell>
+      <Drawer opened={burgerMenuOpen} onClose={closeBurgerMenu}>
+        {navigationLinks}
+      </Drawer>
+    </>
   );
 };