From da5f457b5a9d15058031f19436f4362028e70533 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20S=C3=A1nchez-Gallego?= <gallegoj@uw.edu>
Date: Mon, 23 Sep 2024 17:23:05 -0700
Subject: [PATCH] Show burger when navbar is hidden on mobile

---
 app/exposure-list/[[...mjd]]/page.tsx         | 14 ++++--
 .../LVMWebRoot/LVMAppShell/LVMAppShell.tsx    | 47 ++++++++++++-------
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/app/exposure-list/[[...mjd]]/page.tsx b/app/exposure-list/[[...mjd]]/page.tsx
index 7fb62ab..52c3d68 100644
--- 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
index 5592b16..c7a5bb9 100644
--- 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>
+    </>
   );
 }