Show burger when navbar is hidden on mobile

sdss · Sep 24, 2024 · da5f457 · da5f457
1 parent 78de6be
commit da5f457
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/app/exposure-list/[[...mjd]]/page.tsx b/app/exposure-list/[[...mjd]]/page.tsx
@@ -41,13 +41,13 @@ type ExposureData = {
 };
 
 async function fetchMJDs(): Promise<number[]> {
-  const result = await fetchFromAPI<number[]>('/log/exposures/mjds');
+  const result = await fetchFromAPI<number[]>('/logs/exposures/mjds');
   return result;
 }
 
 async function fetchExposureListData(mjd: number): Promise<ExposureData[]> {
   const response = await fetchTask<{ [k: number]: ExposureData }>(
-    `/log/exposures/data/${mjd}?as_task=true`
+    `/logs/exposures/data/${mjd}?as_task=true`
   );
 
   return Object.values(response);
@@ -66,7 +66,9 @@ function ExposureListControls(props: {
   const { mjds, setCurrentMJD, forceRefresh } = props;
 
   React.useEffect(() => {
-    if (mjds.length === 0) return;
+    if (mjds.length === 0) {
+      return;
+    }
 
     if (!selected) {
       setSelected(mjds[mjds.length - 1].toString());
@@ -184,13 +186,15 @@ export default function ExposureListPage({ params }: { params: { mjd: string[] }
   const [data, setData] = React.useState<ExposureData[] | undefined>(undefined);
   const [mjds, setMJDs] = React.useState<number[]>([]);
   const [currentMJD, setCurrentMJD] = React.useState<number | undefined>(
-    params.mjd ? parseInt(params.mjd[0]) : undefined
+    params.mjd ? parseInt(params.mjd[0], 10) : undefined
   );
   const [reloading, setReloading] = React.useState(false);
 
   const forceRefresh = React.useCallback(
     (showReloading: boolean = true) => {
-      if (!currentMJD) return;
+      if (!currentMJD) {
+        return;
+      }
 
       if (showReloading) {
         setReloading(true);

diff --git a/src/components/LVMWebRoot/LVMAppShell/LVMAppShell.tsx b/src/components/LVMWebRoot/LVMAppShell/LVMAppShell.tsx
@@ -7,29 +7,42 @@
 
 'use client';
 
-import { AppShell } from '@mantine/core';
 import React from 'react';
+import { ActionIcon, Affix, AppShell, Burger, Drawer } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import Header from './Header/Header';
-import classes from './LVMAppShell.module.css';
 import NavBar from './NavBar/NavBar';
+import classes from './LVMAppShell.module.css';
 
 export default function LVMAppShell({ children }: { children: React.ReactNode }) {
+  const [drawerOpened, { close, toggle }] = useDisclosure(false);
+
   return (
-    <AppShell
-      header={{ height: 60 }}
-      navbar={{
-        width: 250,
-        breakpoint: 'sm',
-      }}
-      padding="md"
-    >
-      <AppShell.Header className={classes.header}>
-        <Header />
-      </AppShell.Header>
-      <AppShell.Navbar className={classes.navbar} visibleFrom="sm">
+    <>
+      <AppShell
+        header={{ height: 60 }}
+        navbar={{
+          width: 250,
+          breakpoint: 'sm',
+        }}
+        padding="md"
+      >
+        <AppShell.Header className={classes.header}>
+          <Header />
+        </AppShell.Header>
+        <AppShell.Navbar className={classes.navbar} visibleFrom="sm">
+          <NavBar />
+        </AppShell.Navbar>
+        <AppShell.Main>{children}</AppShell.Main>
+      </AppShell>
+      <Drawer opened={drawerOpened} onClose={close} position="left">
         <NavBar />
-      </AppShell.Navbar>
-      <AppShell.Main>{children}</AppShell.Main>
-    </AppShell>
+      </Drawer>
+      <Affix position={{ bottom: 30, right: 30 }} hiddenFrom="sm">
+        <ActionIcon radius="xl" size="xl" variant="filled">
+          <Burger opened={drawerOpened} onClick={toggle} lineSize={3} />
+        </ActionIcon>
+      </Affix>
+    </>
   );
 }