Group flight list by date

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>

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>

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">