From 05fefd40b1b0c0e829648bdf6f609ef085ce3f6d Mon Sep 17 00:00:00 2001
From: april <aprl.petersen@gmail.com>
Date: Fri, 5 Jan 2024 11:13:21 -0600
Subject: [PATCH] Group flight list by date

---
 web/app/routes/logbook.flights.$id/route.tsx  | 471 +++++++++---------
 web/app/routes/logbook.flights.new/route.tsx  |   1 -
 .../routes/logbook.flights/flights-list.tsx   | 170 +++++--
 web/app/routes/logbook.flights/route.tsx      |  12 +-
 web/app/ui/display/log-item.tsx               |   2 +-
 web/app/ui/nav/app-shell.tsx                  |   6 +-
 web/app/ui/nav/navbar.tsx                     |  10 +-
 web/app/util/api.ts                           |   1 -
 8 files changed, 379 insertions(+), 294 deletions(-)

diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx
index fe8bcdc..a4eb8cb 100644
--- a/web/app/routes/logbook.flights.$id/route.tsx
+++ b/web/app/routes/logbook.flights.$id/route.tsx
@@ -1,13 +1,12 @@
-import { LogItem, VerticalLogItem } from "@/ui/display/log-item";
+import { VerticalLogItem } from "@/ui/display/log-item";
 import ErrorDisplay from "@/ui/error-display";
 import { client } from "@/util/api";
 import {
   Center,
   Container,
-  Divider,
   Grid,
   Loader,
-  ScrollAreaAutosize,
+  ScrollArea,
   Stack,
   Title,
 } from "@mantine/core";
@@ -26,238 +25,238 @@ export default function Flight() {
   const log = flight.data;
 
   return (
-    <Container>
-      <Stack>
-        {flight.isError ? (
-          <Center h="calc(100vh - 95px)">
-            <ErrorDisplay error="Error Fetching Flight" />
-          </Center>
-        ) : flight.isPending ? (
-          <Center h="calc(100vh - 95px)">
-            <Loader />
-          </Center>
-        ) : flight.data ? (
-          <>
-            <Title order={3} py="lg" style={{ textAlign: "center" }}>
-              Flight Log
-            </Title>
-            <ScrollAreaAutosize mah="calc(100vh - 95px - 110px)" m="0" p="0">
-              <Container h="100%">
-                <Grid justify="center">
-                  <Grid.Col span={6}>
-                    <VerticalLogItem label="Date" content={log.date} date />
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                    <VerticalLogItem label="Aircraft" content={log.aircraft} />
-                  </Grid.Col>
-                  {log.waypoint_from || log.waypoint_to ? (
-                    <>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Waypoint From"
-                          content={log.waypoint_from}
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Waypoint To"
-                          content={log.waypoint_to}
-                        />
-                      </Grid.Col>
-                    </>
-                  ) : null}
-                  {log.route ? (
-                    <>
-                      <Grid.Col span={12}>
-                        <VerticalLogItem label="Route" content={log.route} />
-                      </Grid.Col>
-                    </>
-                  ) : null}
-                  {log.hobbs_start || log.hobbs_end ? (
-                    <>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Hobbs Start"
-                          content={log.hobbs_start}
-                          hours
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Hobbs End"
-                          content={log.hobbs_end}
-                          hours
-                        />
-                      </Grid.Col>
-                    </>
-                  ) : null}
-                  {log.tach_start || log.tach_end ? (
-                    <>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Tach Start"
-                          content={log.tach_start}
-                          hours
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Tach End"
-                          content={log.tach_end}
-                          hours
-                        />
-                      </Grid.Col>
-                    </>
-                  ) : null}
-                  {log.time_start || log.time_off ? (
-                    <>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Time Start"
-                          content={log.time_start}
-                          time
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Time Off"
-                          content={log.time_off}
-                          time
-                        />
-                      </Grid.Col>
-                    </>
-                  ) : null}
-                  {log.time_down || log.time_stop ? (
-                    <>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Time Down"
-                          content={log.time_down}
-                          time
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Time Stop"
-                          content={log.time_stop}
-                          time
-                        />
-                      </Grid.Col>
-                    </>
-                  ) : null}
-                  <Grid.Col span={4}>
-                    <VerticalLogItem
-                      label="Total Time"
-                      content={log.time_total}
-                      hours
-                    />
-                  </Grid.Col>
-                  <Grid.Col span={4}>
-                    <VerticalLogItem
-                      label="Time Solo"
-                      content={log.time_solo}
-                      hours
-                    />
-                  </Grid.Col>
-                  <Grid.Col span={4}>
-                    <VerticalLogItem
-                      label="Time Night"
-                      content={log.time_night}
-                      hours
-                    />
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                    <VerticalLogItem
-                      label="Time PIC"
-                      content={log.time_pic}
-                      hours
-                    />
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                    <VerticalLogItem
-                      label="Time SIC"
-                      content={log.time_sic}
-                      hours
-                    />
-                  </Grid.Col>
-                  {log.time_xc && log.dist_xc ? (
-                    <>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Time Cross-Country"
-                          content={log.time_xc}
-                          hours
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={6}>
-                        <VerticalLogItem
-                          label="Cross-Country Distance"
-                          content={log.dist_xc}
-                          decimal={2}
-                        />
-                      </Grid.Col>
-                    </>
-                  ) : null}
-                  <Grid.Col span={6}>
-                    <VerticalLogItem
-                      label="Takeoffs (Day)"
-                      content={log.takeoffs_day}
-                    />
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                    <VerticalLogItem
-                      label="Landings (Day)"
-                      content={log.landings_day}
-                    />
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                    <VerticalLogItem
-                      label="Takeoffs (Night)"
-                      content={log.takeoffs_night}
-                    />
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                    <VerticalLogItem
-                      label="Landings (Night)"
-                      content={log.landings_night}
-                    />
-                  </Grid.Col>
-                  {log.time_instrument ||
-                  log.time_sim_instrument ||
-                  log.holds_instrument ? (
-                    <>
-                      <Grid.Col span={4}>
-                        <VerticalLogItem
-                          label="Instrument Time"
-                          content={log.time_instrument}
-                          hours
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={4}>
-                        <VerticalLogItem
-                          label="Simulated Instrument Time"
-                          content={log.time_sim_instrument}
-                          hours
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={4}>
-                        <VerticalLogItem
-                          label="Instrument Holds"
-                          content={log.holds_instrument}
-                        />
-                      </Grid.Col>
-                    </>
-                  ) : null}
-                </Grid>
-              </Container>
-            </ScrollAreaAutosize>
-          </>
-        ) : (
-          <Center h="calc(100vh - 95px)">
-            <ErrorDisplay error="Unknown Error" />
-          </Center>
-        )}
-      </Stack>
-    </Container>
+    // <Container>
+    <Stack h="calc(100vh-95px)">
+      {flight.isError ? (
+        <Center h="calc(100vh - 95px)">
+          <ErrorDisplay error="Error Fetching Flight" />
+        </Center>
+      ) : flight.isPending ? (
+        <Center h="calc(100vh - 95px)">
+          <Loader />
+        </Center>
+      ) : flight.data ? (
+        <>
+          <Title order={3} py="lg" style={{ textAlign: "center" }}>
+            Flight Log
+          </Title>
+          <ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0">
+            <Container h="100%">
+              <Grid justify="center">
+                <Grid.Col span={6}>
+                  <VerticalLogItem label="Date" content={log.date} date />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <VerticalLogItem label="Aircraft" content={log.aircraft} />
+                </Grid.Col>
+                {log.waypoint_from || log.waypoint_to ? (
+                  <>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Waypoint From"
+                        content={log.waypoint_from}
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Waypoint To"
+                        content={log.waypoint_to}
+                      />
+                    </Grid.Col>
+                  </>
+                ) : null}
+                {log.route ? (
+                  <>
+                    <Grid.Col span={12}>
+                      <VerticalLogItem label="Route" content={log.route} />
+                    </Grid.Col>
+                  </>
+                ) : null}
+                {log.hobbs_start || log.hobbs_end ? (
+                  <>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Hobbs Start"
+                        content={log.hobbs_start}
+                        hours
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Hobbs End"
+                        content={log.hobbs_end}
+                        hours
+                      />
+                    </Grid.Col>
+                  </>
+                ) : null}
+                {log.tach_start || log.tach_end ? (
+                  <>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Tach Start"
+                        content={log.tach_start}
+                        hours
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Tach End"
+                        content={log.tach_end}
+                        hours
+                      />
+                    </Grid.Col>
+                  </>
+                ) : null}
+                {log.time_start || log.time_off ? (
+                  <>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Time Start"
+                        content={log.time_start}
+                        time
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Time Off"
+                        content={log.time_off}
+                        time
+                      />
+                    </Grid.Col>
+                  </>
+                ) : null}
+                {log.time_down || log.time_stop ? (
+                  <>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Time Down"
+                        content={log.time_down}
+                        time
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Time Stop"
+                        content={log.time_stop}
+                        time
+                      />
+                    </Grid.Col>
+                  </>
+                ) : null}
+                <Grid.Col span={4}>
+                  <VerticalLogItem
+                    label="Total Time"
+                    content={log.time_total}
+                    hours
+                  />
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <VerticalLogItem
+                    label="Time Solo"
+                    content={log.time_solo}
+                    hours
+                  />
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <VerticalLogItem
+                    label="Time Night"
+                    content={log.time_night}
+                    hours
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <VerticalLogItem
+                    label="Time PIC"
+                    content={log.time_pic}
+                    hours
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <VerticalLogItem
+                    label="Time SIC"
+                    content={log.time_sic}
+                    hours
+                  />
+                </Grid.Col>
+                {log.time_xc && log.dist_xc ? (
+                  <>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Time Cross-Country"
+                        content={log.time_xc}
+                        hours
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <VerticalLogItem
+                        label="Cross-Country Distance"
+                        content={log.dist_xc}
+                        decimal={2}
+                      />
+                    </Grid.Col>
+                  </>
+                ) : null}
+                <Grid.Col span={6}>
+                  <VerticalLogItem
+                    label="Takeoffs (Day)"
+                    content={log.takeoffs_day}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <VerticalLogItem
+                    label="Landings (Day)"
+                    content={log.landings_day}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <VerticalLogItem
+                    label="Takeoffs (Night)"
+                    content={log.takeoffs_night}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <VerticalLogItem
+                    label="Landings (Night)"
+                    content={log.landings_night}
+                  />
+                </Grid.Col>
+                {log.time_instrument ||
+                log.time_sim_instrument ||
+                log.holds_instrument ? (
+                  <>
+                    <Grid.Col span={4}>
+                      <VerticalLogItem
+                        label="Instrument Time"
+                        content={log.time_instrument}
+                        hours
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={4}>
+                      <VerticalLogItem
+                        label="Simulated Instrument Time"
+                        content={log.time_sim_instrument}
+                        hours
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={4}>
+                      <VerticalLogItem
+                        label="Instrument Holds"
+                        content={log.holds_instrument}
+                      />
+                    </Grid.Col>
+                  </>
+                ) : null}
+              </Grid>
+            </Container>
+          </ScrollArea>
+        </>
+      ) : (
+        <Center h="calc(100vh - 95px)">
+          <ErrorDisplay error="Unknown Error" />
+        </Center>
+      )}
+    </Stack>
+    // </Container>
   );
 }
diff --git a/web/app/routes/logbook.flights.new/route.tsx b/web/app/routes/logbook.flights.new/route.tsx
index 2ea7744..6dfb9ca 100644
--- a/web/app/routes/logbook.flights.new/route.tsx
+++ b/web/app/routes/logbook.flights.new/route.tsx
@@ -86,7 +86,6 @@ export default function NewFlight() {
     mutationFn: async (values: FlightFormSchema) => {
       const newFlight = flightCreateHelper(values);
       const res = await client.post("/flights", newFlight);
-      console.log(res);
       return res.data;
     },
     retry: (failureCount, error: AxiosError) => {
diff --git a/web/app/routes/logbook.flights/flights-list.tsx b/web/app/routes/logbook.flights/flights-list.tsx
index b681f66..c0e490e 100644
--- a/web/app/routes/logbook.flights/flights-list.tsx
+++ b/web/app/routes/logbook.flights/flights-list.tsx
@@ -8,30 +8,24 @@ import {
   Stack,
   Loader,
   Center,
-  Divider,
   Badge,
+  Group,
+  Divider,
 } from "@mantine/core";
+import { randomId } from "@mantine/hooks";
 import { Link, useLocation, useNavigate } from "@remix-run/react";
-import { IconPlus } from "@tabler/icons-react";
+import {
+  IconArrowRightTail,
+  IconPlaneTilt,
+  IconPlus,
+} from "@tabler/icons-react";
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 
 function useFlights() {
   const flights = useQuery({
     queryKey: ["flights-list"],
-    queryFn: async () => {
-      const res = await client.get(`/flights`);
-      const groupedFlights: { [date: string]: FlightConciseSchema[] } = {};
-      res.data.map((log: FlightConciseSchema) => {
-        const dateStr = log.date;
-
-        if (!groupedFlights[dateStr]) {
-          groupedFlights[dateStr] = [];
-        }
-
-        groupedFlights[dateStr].push(log);
-      });
-      return groupedFlights;
-    },
+    queryFn: async () =>
+      await client.get(`/flights/by-date`).then((res) => res.data),
   });
 
   return flights;
@@ -41,41 +35,127 @@ function FlightsListDisplay({
   flights,
   page,
 }: {
-  flights: UseQueryResult<{ [date: string]: FlightConciseSchema[] }>;
+  flights: UseQueryResult<{
+    [year: string]: {
+      [month: string]: { [day: string]: FlightConciseSchema[] };
+    };
+  }>;
   page: string;
 }) {
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
   return (
     <>
       {flights.data ? (
-        Object.entries(flights.data).map(([date, logs], index: number) => (
+        Object.entries(flights.data).map(([year, months]) => (
           <>
-            <Text key={date} mt="md" mb="xs" fw={700}>
-              {date}
-            </Text>
-            <Divider key={date + index} />
-            {logs.map((flight: FlightConciseSchema) => (
-              <NavLink
-                key={flight.id}
-                component={Link}
-                to={`/logbook/flights/${flight.id}`}
-                label={`${
-                  !(flight.waypoint_from || flight.waypoint_to)
-                    ? "No Route"
-                    : ""
-                }${flight.waypoint_from ? flight.waypoint_from : ""} ${
-                  flight.waypoint_to ? flight.waypoint_to : ""
-                }`}
-                description={`${flight.date}`}
-                rightSection={
-                  flight.aircraft ? (
-                    <Badge key={"aircraft" + index} color="gray">
-                      {flight.aircraft}
-                    </Badge>
-                  ) : null
-                }
-                active={page === flight.id}
-              />
-            ))}
+            <NavLink
+              key={randomId()}
+              label={`-- ${year} --`}
+              fw={700}
+              style={{ textAlign: "center" }}
+              defaultOpened
+              childrenOffset={0}
+            >
+              <>
+                <Divider />
+                {Object.entries(months).map(([month, days]) => (
+                  <NavLink
+                    key={randomId()}
+                    label={monthNames[Number(month) - 1]}
+                    fw={500}
+                    style={{ textAlign: "center" }}
+                    defaultOpened
+                  >
+                    <Divider />
+                    {Object.entries(days).map(([, logs]) => (
+                      <>
+                        {logs.map((flight: FlightConciseSchema) => (
+                          <>
+                            <NavLink
+                              key={randomId()}
+                              component={Link}
+                              to={`/logbook/flights/${flight.id}`}
+                              label={
+                                <Group>
+                                  <Badge
+                                    color="gray"
+                                    size="lg"
+                                    radius="sm"
+                                    px="xs"
+                                  >
+                                    {flight.date}
+                                  </Badge>
+                                  <Text fw={500}>
+                                    {`${Number(flight.time_total).toFixed(
+                                      1
+                                    )} hr`}
+                                  </Text>
+                                  {flight.waypoint_from ||
+                                  flight.waypoint_to ? (
+                                    <Text>/</Text>
+                                  ) : null}
+                                  <Group gap="xs">
+                                    {flight.waypoint_from ? (
+                                      <Text>{flight.waypoint_from}</Text>
+                                    ) : (
+                                      ""
+                                    )}
+                                    {flight.waypoint_from &&
+                                    flight.waypoint_to ? (
+                                      <IconArrowRightTail />
+                                    ) : null}
+                                    {flight.waypoint_to ? (
+                                      <Text>{flight.waypoint_to}</Text>
+                                    ) : (
+                                      ""
+                                    )}
+                                  </Group>
+                                </Group>
+                              }
+                              description={
+                                <Text lineClamp={1}>
+                                  {flight.comments
+                                    ? flight.comments
+                                    : "(No Comment)"}
+                                </Text>
+                              }
+                              rightSection={
+                                flight.aircraft ? (
+                                  <Badge
+                                    key={randomId()}
+                                    leftSection={<IconPlaneTilt size="1rem" />}
+                                    color="gray"
+                                    size="lg"
+                                  >
+                                    {flight.aircraft}
+                                  </Badge>
+                                ) : null
+                              }
+                              active={page === flight.id}
+                            />
+                            <Divider />
+                          </>
+                        ))}
+                      </>
+                    ))}
+                  </NavLink>
+                ))}
+              </>
+            </NavLink>
           </>
         ))
       ) : flights.isLoading ? (
diff --git a/web/app/routes/logbook.flights/route.tsx b/web/app/routes/logbook.flights/route.tsx
index 1879f00..6dd4153 100644
--- a/web/app/routes/logbook.flights/route.tsx
+++ b/web/app/routes/logbook.flights/route.tsx
@@ -1,22 +1,22 @@
-import { Divider, Grid, Container, ScrollAreaAutosize } from "@mantine/core";
+import { Divider, Grid, Container, ScrollArea } from "@mantine/core";
 import { Outlet } from "@remix-run/react";
 import { FlightsList } from "./flights-list";
 
 export default function FlightsLayout() {
   return (
     <>
-      <Grid h="100%" visibleFrom="md">
-        <Grid.Col span={3}>
+      <Grid h="100%" visibleFrom="lg">
+        <Grid.Col span={4}>
           <FlightsList />
         </Grid.Col>
         <Divider orientation="vertical" m="sm" />
         <Grid.Col span="auto">
-          <ScrollAreaAutosize mah="calc(100vh - 95px)">
+          <ScrollArea.Autosize mah="calc(100vh - 95px)">
             <Outlet />
-          </ScrollAreaAutosize>
+          </ScrollArea.Autosize>
         </Grid.Col>
       </Grid>
-      <Container hiddenFrom="md">
+      <Container hiddenFrom="lg" style={{ paddingLeft: 0, paddingRight: 0 }}>
         <Outlet />
       </Container>
     </>
diff --git a/web/app/ui/display/log-item.tsx b/web/app/ui/display/log-item.tsx
index 15c6746..479a2c1 100644
--- a/web/app/ui/display/log-item.tsx
+++ b/web/app/ui/display/log-item.tsx
@@ -40,7 +40,7 @@ export function VerticalLogItem({
 
   return (
     <Card>
-      <Stack gap="xs" align="center">
+      <Stack gap="xs" align="center" h="100%">
         <Text c="dimmed" style={{ textalign: "center" }}>
           {label}
         </Text>
diff --git a/web/app/ui/nav/app-shell.tsx b/web/app/ui/nav/app-shell.tsx
index 955a852..392e65a 100644
--- a/web/app/ui/nav/app-shell.tsx
+++ b/web/app/ui/nav/app-shell.tsx
@@ -19,7 +19,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
   return (
     <AppShell
       header={{ height: 60 }}
-      navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
+      navbar={{ width: 300, breakpoint: "xl", collapsed: { mobile: !opened } }}
       padding="md"
     >
       <AppShell.Header>
@@ -28,7 +28,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
             <Burger
               opened={opened}
               onClick={toggle}
-              hiddenFrom="sm"
+              hiddenFrom="xl"
               size="sm"
             />
           </Group>
@@ -44,7 +44,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
         </Group>
       </AppShell.Header>
       <AppShell.Navbar>
-        <Navbar />
+        <Navbar opened={opened} toggle={toggle} />
       </AppShell.Navbar>
       <AppShell.Main>{children}</AppShell.Main>
     </AppShell>
diff --git a/web/app/ui/nav/navbar.tsx b/web/app/ui/nav/navbar.tsx
index f9cf64c..6b8e1ef 100644
--- a/web/app/ui/nav/navbar.tsx
+++ b/web/app/ui/nav/navbar.tsx
@@ -8,7 +8,13 @@ import {
   IconUser,
 } from "@tabler/icons-react";
 
-export default function Navbar() {
+export default function Navbar({
+  opened,
+  toggle,
+}: {
+  opened: boolean;
+  toggle: () => void;
+}) {
   const location = useLocation();
   const page = location.pathname.split("/")[2];
 
@@ -24,6 +30,7 @@ export default function Navbar() {
           label="Dashboard"
           leftSection={<IconPlaneDeparture />}
           active={page == null}
+          onClick={() => (opened ? toggle() : null)}
         />
         <NavLink
           p="md"
@@ -32,6 +39,7 @@ export default function Navbar() {
           label="Flights"
           leftSection={<IconBook2 />}
           active={page === "flights"}
+          onClick={() => (opened ? toggle() : null)}
         />
       </Stack>
       <Stack gap="0">
diff --git a/web/app/util/api.ts b/web/app/util/api.ts
index 8d8e16a..d0e612a 100644
--- a/web/app/util/api.ts
+++ b/web/app/util/api.ts
@@ -27,7 +27,6 @@ client.interceptors.request.use(
         error.config.headers.Authorization = `Bearer ${newAccessToken}`;
         return client(error.config);
       } catch (err) {
-        console.log("ERRORRRRRRRRRRRRRR");
         clearUser();
         window.location.href = "/login";
       }