♿️ 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,16 +53,13 @@ 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>
+
+  const screenLargerThanMd = useScreenLargerThan('md');
+
+  const [burgerMenuOpen, { toggle: toggleBurgerMenu, close: closeBurgerMenu }] = useDisclosure(false);
+
+  const navigationLinks = (
+    <>
       <NavLink
         icon={
           <ThemeIcon size="md" variant="light" color="red">
@@ -123,6 +124,20 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
           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>
         }
@@ -132,15 +147,20 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
               <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.
+                  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>
+              <Group noWrap>
+                {!screenLargerThanMd && (
+                  <Burger opened={burgerMenuOpen} onClick={toggleBurgerMenu} />
+                )}
                 <UnstyledButton component={Link} href="/manage">
                   <Logo />
                 </UnstyledButton>
+              </Group>
               <TextInput radius="xl" w={400} placeholder="Search..." variant="filled" />
 
               <Group noWrap>
@@ -190,5 +210,9 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
           {children}
         </Paper>
       </AppShell>
+      <Drawer opened={burgerMenuOpen} onClose={closeBurgerMenu}>
+        {navigationLinks}
+      </Drawer>
+    </>
   );
 };