fix: responsiveness of ToC was broken on smaller windows and mobile (#2)

OpenTTD · Apr 28, 2024 · 58dfecc · 58dfecc
1 parent 78b28a0
commit 58dfecc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/app/translation/[project]/[language]/Listing.tsx b/src/app/translation/[project]/[language]/Listing.tsx
@@ -2,7 +2,7 @@
 import clsx from "clsx";
 import React from "react";
 import Link from 'next/link';
-import { Anchor, Box, Group, LoadingOverlay, NavLink, Table, Text, rem } from "@mantine/core";
+import { Anchor, AppShell, Box, Group, LoadingOverlay, NavLink, Table, Text, rem } from "@mantine/core";
 import { IconListSearch } from "@tabler/icons-react";
 import { LanguageContext } from "@/providers/LanguageProvider";
 import { LayoutCommon } from "@/components/LayoutCommon";
@@ -22,13 +22,13 @@ const NavigationItem = ({ id, name, entries }: { id: string, name: string, entri
 
 const Navigation = ({ children }: { children: React.ReactNode }) => {
   return (
-    <Box>
+    <AppShell.Section>
       <Group mb="md">
         <IconListSearch style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
         <Text>Table of contents</Text>
       </Group>
       {children}
-    </Box>
+    </AppShell.Section>
   );
 }
 

diff --git a/src/components/LayoutCommon.tsx b/src/components/LayoutCommon.tsx
@@ -1,14 +1,26 @@
 'use client';
-import { AppShell, Container } from "@mantine/core"
+import { AppShell, Burger, Container, Group } from "@mantine/core"
 import { Header } from "./Header"
+import { useDisclosure } from "@mantine/hooks";
 
 export const LayoutCommon = ({ navigation, ref, children }: { navigation?: React.ReactNode, ref?: React.RefObject<any>, children: React.ReactNode }) => {
+  const [opened, { toggle }] = useDisclosure();
+
   return (
-    <AppShell header={{ height: 60 }} padding="md" ref={ref}>
+    <AppShell header={{ height: 60 }} navbar={{ width: { sm: 200, lg: 300 }, breakpoint: 'sm', collapsed: { mobile: !opened } }} padding="md" ref={ref}>
       <AppShell.Header>
-        <Header />
+        <Group h="100%">
+          {navigation !== undefined && <Burger
+            opened={opened}
+            onClick={toggle}
+            hiddenFrom="sm"
+            size="sm"
+            p="md"
+          />}
+          <Header />
+        </Group>
       </AppShell.Header>
-      {navigation !== undefined && <AppShell.Navbar p="md" w={300}>
+      {navigation !== undefined && <AppShell.Navbar p="md">
         {navigation}
       </AppShell.Navbar>}
       <AppShell.Main>