From 0a748b1ed26f81455b79a64e4da6d5942373c91c Mon Sep 17 00:00:00 2001
From: Cameron Clough <cameronjclough@gmail.com>
Date: Sun, 16 Jun 2024 20:23:39 +0100
Subject: [PATCH] add logout button to nav drawer (#33)

---
 src/components/material/Drawer.tsx | 4 ++--
 src/pages/dashboard/Dashboard.tsx  | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/material/Drawer.tsx b/src/components/material/Drawer.tsx
index 28ba3e4f..7779b410 100644
--- a/src/components/material/Drawer.tsx
+++ b/src/components/material/Drawer.tsx
@@ -22,14 +22,14 @@ const Drawer: ParentComponent<DrawerProps> = (props) => {
   return (
     <>
       <nav
-        class="hide-scrollbar fixed inset-y-0 left-0 w-screen touch-pan-y overflow-y-auto overscroll-y-contain transition-drawer duration-500"
+        class="hide-scrollbar fixed inset-y-0 left-0 h-full w-screen touch-pan-y overflow-y-auto overscroll-y-contain transition-drawer duration-500"
         style={{
           left: props.open ? 0 : `${-PEEK}px`,
           opacity: props.open ? 1 : 0.5,
           width: `${drawerWidth}px`,
         }}
       >
-        <div class="size-full rounded-r-lg bg-surface-container-low text-on-surface-variant sm:rounded-r-none">
+        <div class="flex size-full flex-col rounded-r-lg bg-surface-container-low text-on-surface-variant sm:rounded-r-none">
           {props.drawer}
         </div>
       </nav>
diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx
index 0e6bab61..4e84bfab 100644
--- a/src/pages/dashboard/Dashboard.tsx
+++ b/src/pages/dashboard/Dashboard.tsx
@@ -15,6 +15,7 @@ import { getDevices } from '~/api/devices'
 import { getProfile } from '~/api/profile'
 import type { Device } from '~/types'
 
+import Button from '~/components/material/Button'
 import Drawer from '~/components/material/Drawer'
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
@@ -49,6 +50,9 @@ const DashboardDrawer = (props: {
       <Show when={props.devices} keyed>
         {(devices: Device[]) => <DeviceList class="p-2" devices={devices} />}
       </Show>
+      <div class="grow" />
+      <hr class="mx-4 opacity-20" />
+      <Button class="m-4" href="/logout">Sign out</Button>
     </>
   )
 }