From d13347fd4e4b5c4cd8a9eb7a094320bf064acf73 Mon Sep 17 00:00:00 2001 From: Manuel Date: Sat, 29 Jul 2023 21:44:16 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Add=20mobile=20drawer=20fo?= =?UTF-8?q?r=20navigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout/admin/main-admin.layout.tsx | 302 ++++++++++-------- 1 file changed, 163 insertions(+), 139 deletions(-) diff --git a/src/components/layout/admin/main-admin.layout.tsx b/src/components/layout/admin/main-admin.layout.tsx index 5c1ebe4aa..5d812b8b3 100644 --- a/src/components/layout/admin/main-admin.layout.tsx +++ b/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 ( - - - - - - } - label="Home" - component={Link} - href="/manage/" - /> - - - - } - > - } - label="Manage" - component={Link} - href="/manage/users" - /> - } - label="Invites" - component={Link} - href="/manage/users/invites" - /> - - - - - } - > - } - component="a" - href="https://homarr.dev/docs/about" - label="Documentation" - /> - } - component="a" - href="https://github.com/ajnart/homarr/issues/new/choose" - label="Report an issue / bug" - /> - } - component="a" - href="https://discord.com/invite/aCsmEV5RgA" - label="Community Discord" - /> - } - component="a" - href="https://github.com/ajnart/homarr" - label="Contribute" - /> - - - - } - header={ -
- - - - - This is an experimental feature of Homarr. Please report any issues to the official - Homarr team. - - - - - - - - - - - - - - - - }>Switch theme - }>View Profile - }>Default Dashboard - - } - color="red" - onClick={() => signOut()} - > - Logout - - - - - - -
- } - footer={ -
- - - - - Homarr - - {attributes.packageVersion && ( - - {attributes.packageVersion} + const screenLargerThanMd = useScreenLargerThan('md'); + + const [burgerMenuOpen, { toggle: toggleBurgerMenu, close: closeBurgerMenu }] = useDisclosure(false); + + const navigationLinks = ( + <> + + + + } + label="Home" + component={Link} + href="/manage/" + /> + + + + } + > + } + label="Manage" + component={Link} + href="/manage/users" + /> + } + label="Invites" + component={Link} + href="/manage/users/invites" + /> + + + + + } + > + } + component="a" + href="https://homarr.dev/docs/about" + label="Documentation" + /> + } + component="a" + href="https://github.com/ajnart/homarr/issues/new/choose" + label="Report an issue / bug" + /> + } + component="a" + href="https://discord.com/invite/aCsmEV5RgA" + label="Community Discord" + /> + } + component="a" + href="https://github.com/ajnart/homarr" + label="Contribute" + /> + + + ); + return ( + <> +
- } - > - - {children} - - + + + + + {!screenLargerThanMd && ( + + )} + + + + + + + + + + + + + + }>Switch theme + }>View Profile + }>Default Dashboard + + } + color="red" + onClick={() => signOut()} + > + Logout + + + + + + + + } + footer={ + + } + > + + {children} + + + + {navigationLinks} + + ); };