Fix mobile menu in header

211-Connect · Oct 9, 2023 · 48625bf · 48625bf
1 parent c43de19
commit 48625bf
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/packages/client/components/organisms/AppHeader.tsx b/packages/client/components/organisms/AppHeader.tsx
@@ -8,6 +8,8 @@ import {
  Anchor as MantineAnchor,
  Stack,
  useMantineTheme,
+ Box,
+ Modal,
 } from '@mantine/core';
 import {
  IconHeart,
@@ -24,13 +26,14 @@ import ISO from 'iso-639-1';
 import { Anchor } from '../atoms/Anchor';
 import { useAppConfig } from '../../lib/hooks/useAppConfig';
 import { openContextModal } from '@mantine/modals';
+import { useDisclosure } from '@mantine/hooks';
 
 type Props = {
  fullWidth?: boolean;
 };
 
 export function AppHeader(props: Props) {
- const [opened, setOpened] = useState(false);
+ const [opened, { open, close }] = useDisclosure(false);
  const appConfig = useAppConfig();
  const theme = useMantineTheme();
  const session = useSession();
@@ -192,15 +195,11 @@ export function AppHeader(props: Props) {
 
  <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
  <Group position="right" align="center">
- <Drawer opened={opened} onClose={() => setOpened(false)}>
+ <Modal opened={opened} onClose={close} fullScreen>
  <Stack align="center">{menuItems}</Stack>
- </Drawer>
+ </Modal>
 
- <Burger
- opened={opened}
- onClick={() => setOpened((prev) => !prev)}
- mr="md"
- />
+ <Burger opened={opened} onClick={open} mr="md" />
  </Group>
  </MediaQuery>
  </Group>