Rework app shell

site/src/app/components/PageFooter.tsx

@@ -0,0 +1,24 @@
+import HumanFriendlyColumn from "@/app/components/HumanFriendlyColumn";
+import { Box, Text } from "@mantine/core";
+import React from "react";
+
+export default function PageFooter() {
+  return (
+    <Box mt="xl" mb="xl" component="footer">
+      <HumanFriendlyColumn>
+        <Text mt="xs" c="dimmed">
+          Disclaimer:
+          <br />
+          <br />
+          The information provided on this webpage is intended for reference
+          purposes only. The summaries are generated by artificial intelligence
+          and should not be regarded as fully accurate or comprehensive. The
+          data is sourced exclusively from publicly available parliamentary
+          sources online such as parliament.gov.sg. Users are advised to consult
+          original parliamentary documents and official records for precise and
+          authoritative information.
+        </Text>
+      </HumanFriendlyColumn>
+    </Box>
+  );
+}

site/src/app/components/StandardShell.module.css

@@ -0,0 +1,10 @@
+.control {
+    display: block;
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+    border-radius: var(--mantine-radius-md);
+    font-weight: 500;
+}
+
+.control:hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+}

site/src/app/components/StandardShell.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  AppShell,
+  AppShellHeader,
+  AppShellMain,
+  Burger,
+  Group,
+  rem,
+  UnstyledButton,
+} from "@mantine/core";
+import React from "react";
+import { useDisclosure, useHeadroom } from "@mantine/hooks";
+import classes from "./StandardShell.module.css";
+import PageFooter from "@/app/components/PageFooter";
+import Link from "next/link";
+
+type PageLink = {
+  name: string;
+  href: string;
+};
+
+function generateButtonsFromLinks(links: PageLink[]) {
+  return links.map(({ name, href }) => (
+    <UnstyledButton className={classes.control} component={Link} href={href}>
+      {name}
+    </UnstyledButton>
+  ));
+}
+
+export default function StandardShell({
+  children,
+  logo,
+  links,
+}: {
+  children: React.ReactNode;
+  logo: React.ReactNode;
+  links: PageLink[];
+}) {
+  const [opened, { toggle }] = useDisclosure();
+  const pinned = useHeadroom({ fixedAt: 120 });
+  const generatedButtons = generateButtonsFromLinks(links);
+
+  return (
+    <AppShell
+      header={{ height: 60, collapsed: !pinned, offset: false }}
+      navbar={{
+        width: 300,
+        breakpoint: "sm",
+        collapsed: { desktop: true, mobile: !opened },
+      }}
+      padding="md"
+    >
+      <AppShellHeader>
+        <Group h="100%" px="md">
+          <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+          <Group justify="space-between" style={{ flex: 1 }}>
+            {logo}
+            <Group ml="xl" gap={0} visibleFrom="sm">
+              {generatedButtons}
+            </Group>
+          </Group>
+        </Group>
+      </AppShellHeader>
+
+      <AppShell.Navbar py="md" px={4}>
+        {generatedButtons}
+      </AppShell.Navbar>
+
+      <AppShellMain pt={`calc(${rem(60)} + var(--mantine-spacing-md))`}>
+        {children}
+      </AppShellMain>
+
+      <PageFooter />
+    </AppShell>
+  );
+}

site/src/app/layout.tsx

@@ -5,15 +5,8 @@ import "./globals.css";
 // Import styles of packages that you've installed.
 // All packages except `@mantine/hooks` require styles imports
 import "@mantine/core/styles.css";
-import {
-  AppShell,
-  AppShellMain,
-  Text,
-  Box,
-  ColorSchemeScript,
-  MantineProvider,
-} from "@mantine/core";
-import HumanFriendlyColumn from "@/app/components/HumanFriendlyColumn";
+import { ColorSchemeScript, MantineProvider, Text } from "@mantine/core";
+import StandardShell from "@/app/components/StandardShell";
 
 export const metadata: Metadata = {
   title: {
@@ -22,37 +15,17 @@ export const metadata: Metadata = {
   },
 };
 
-function Shell({ children }: { children: React.ReactNode }) {
-  return (
-    <AppShell padding="md">
-      <AppShellMain>{children}</AppShellMain>
-
-      <Box mt="xl" mb="xl" component="footer">
-        <HumanFriendlyColumn>
-          <Text mt="xs" c="dimmed">
-            Disclaimer:
-            <br />
-            <br />
-            The information provided on this webpage is intended for reference
-            purposes only. The summaries are generated by artificial
-            intelligence and should not be regarded as fully accurate or
-            comprehensive. The data is sourced exclusively from publicly
-            available parliamentary sources online such as parliament.gov.sg.
-            Users are advised to consult original parliamentary documents and
-            official records for precise and authoritative information.
-          </Text>
-        </HumanFriendlyColumn>
-      </Box>
-    </AppShell>
-  );
-}
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const defaultColorScheme = "auto";
+  const logo = <Text>Parliament Summary</Text>;
+  const links = [
+    { name: "Bills", href: "/bills" },
+    { name: "Debates", href: "/debates" },
+  ];
 
   // noinspection HtmlRequiredTitleElement
   return (
@@ -62,7 +35,9 @@ export default function RootLayout({
       </head>
       <body>
         <MantineProvider defaultColorScheme={defaultColorScheme}>
-          <Shell>{children}</Shell>
+          <StandardShell logo={logo} links={links}>
+            {children}
+          </StandardShell>
         </MantineProvider>
       </body>
     </html>