1 files changed, 83 insertions, 26 deletions
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 08c6694..cf5d5f1 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -4,7 +4,7 @@
 	import { onMount, onDestroy } from 'svelte';
 
 	import { boot, subscribeToEvents } from '$lib/apiServer';
-	import { currentUser, logins, channelsList, messages } from '$lib/store';
+	import { showMenu, currentUser, logins, channelsList, messages } from '$lib/store';
 
     import ChannelList from '$lib/components/ChannelList.svelte';
     import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
@@ -12,6 +12,15 @@
 
     let loading = true;
     let events = null;
+    let showMenuValue;
+    showMenu.subscribe((value) => {
+        showMenuValue = value;
+    });
+
+
+    function toggleMenu() {
+        showMenu.update((value) => !value);
+    }
 
     $: channel = $page?.params?.channel;
 
@@ -54,36 +63,84 @@
     });
 </script>
 
+<svelte:head>
+    <title>understory</title>
+</svelte:head>
+
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else}
-    <div id="interface">
-        <div class="channel-list">
-            <ChannelList active={channel} />
-        </div>
-        <div class="active-channel">
-            <slot />
-        </div>
-        <div class="create-channel">
-            <CreateChannelForm />
-        </div>
-        <div class="create-message">
-            <MessageInput {channel} />
-        </div>
+    <div id="interface" class="p-2">
+        <nav id="sidebar" data-expanded={showMenuValue}>
+            <button class="h-4 w-4" aria-controls="sidebar" aria-expanded={showMenuValue} on:click={toggleMenu}>&#10006;</button>
+            <div class="channel-list">
+                <ChannelList active={channel} />
+            </div>
+            <div class="create-channel">
+                <CreateChannelForm />
+            </div>
+        </nav>
+        <main>
+            <div class="active-channel border border-solid border-gray-400 rounded-[1.25rem]">
+                <slot />
+            </div>
+            <div class="create-message overflow-scroll max-h-full">
+                <MessageInput {channel} />
+            </div>
+        </main>
     </div>
 {/if}
 
 <style>
-    #interface {
-        height: 88vh;
-        margin: 1rem;
-        display: grid;
-        grid-template-columns: 18rem auto;
-        grid-template-rows: auto 2rem;
-        grid-gap: 0.25rem;
-    }
-    #interface div {
-        max-height: 100%;
-        overflow: scroll;
-    }
+:root {
+    --app-bar-height: 68px;
+    --input-row-height: 2rem;
+    --interface-padding: 16px;
+}
+
+#interface {
+  margin: unset;
+  display: grid;
+  grid-template: 
+    'side main' 1fr
+    / auto 1fr
+  ;
+  height: calc(100vh - var(--app-bar-height));
+  
+  @media (width > 640px) {
+    --overlay: static;
+    --translate: 0;
+  }
+}
+nav {
+    grid-area: side;
+    background-color: rgb(var(--color-surface-600));
+    inset: auto auto 0 0;
+    padding: 0.25rem;
+    position: var(--overlay, absolute);
+    transition: translate 300ms ease-out;
+    width: 21rem;
+    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
+    z-index: 10;
+}
+nav button {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+main {
+    grid-area: main;
+    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
+}
+.active-channel {
+    height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height));
+    overflow: scroll;
+}
+.channel-list {
+    height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height));
+    overflow: scroll;
+}
+nav[data-expanded=false] {
+  translate: var(--translate, -100% 0);
+}
 </style>