add logout button to nav drawer (commaai#33)

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>

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>
     </>
   )
 }