From 8f360dd9cc45bb14431238ccc5e3d137c020fa7b Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 23 Oct 2024 21:52:24 -0400
Subject: Do a big mobile app design thing

Mobile-friendly anyway. Thanks to
[Miriam](https://www.miriamsuzanne.com/) for the CSS that enables a
sliding menu on mobile size, constant menu on larger.
---
 ui/lib/assets/logo.png           | Bin 0 -> 137101 bytes
 ui/lib/components/Channel.svelte |   8 ++-
 ui/lib/store.js                  |   1 +
 ui/routes/(app)/+layout.svelte   | 108 ++++++++++++++++++++++++++++-----------
 ui/routes/+layout.svelte         |  41 +++++++++------
 ui/static/favicon.png            | Bin 1571 -> 137101 bytes
 6 files changed, 112 insertions(+), 46 deletions(-)
 create mode 100644 ui/lib/assets/logo.png

(limited to 'ui')

diff --git a/ui/lib/assets/logo.png b/ui/lib/assets/logo.png
new file mode 100644
index 0000000..5df6b4e
Binary files /dev/null and b/ui/lib/assets/logo.png differ
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index e62f0f3..bbe9ff7 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,14 +1,20 @@
 <script>
+    import { showMenu } from '$lib/store';
+
     export let id;
     export let name;
     export let active = false;
+
+    function hideMenu() {
+        showMenu.update(() => false);
+    }
 </script>
 
 <li
     class="rounded-full"
     class:bg-slate-400={active}
 >
-<a href="/ch/{id}">
+<a href="/ch/{id}" on:click={hideMenu}>
     <span class="badge bg-primary-500">#</span>
     <span class="flex-auto">{name}</span>
 </a>
diff --git a/ui/lib/store.js b/ui/lib/store.js
index ae17ffa..bdd3e3b 100644
--- a/ui/lib/store.js
+++ b/ui/lib/store.js
@@ -3,6 +3,7 @@ import { Channels } from '$lib/store/channels';
 import { Messages } from '$lib/store/messages';
 import { Logins } from '$lib/store/logins';
 
+export const showMenu = writable(false);
 export const currentUser = writable(null);
 export const logins = writable(new Logins());
 export const channelsList = writable(new Channels());
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 9abaaf4..b63a607 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;
 
@@ -57,37 +66,76 @@
 {#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="h-full pt-20 p-2">
+        <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>
+
+        <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>
     </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;
-    }
-    #interface .active-channel {
-        border: 1px solid grey;
-        border-radius: 1.25rem;
-    }
+#interface {
+  margin: unset;
+  min-block-size: 100%;
+  display: grid;
+  grid-template: 
+    'side main' 1fr
+    / auto 1fr
+  ;
+  
+  @media (width > 50em) {
+    --toggle-display: none;
+    --overlay: static;
+    --translate: 0;
+  }
+}
+nav {
+    grid-area: side;
+    background-color: rgb(var(--color-surface-600));
+    inset: 0 auto 0 0;
+    padding: 0.25rem;
+    position: var(--overlay, absolute);
+    transition: translate 300ms ease-out;
+    height: 100vh;
+    width: 21rem;
+}
+nav button {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+.active-channel {
+    height: 87vh;
+    overflow: scroll;
+}
+.channel-list {
+    height: 94vh;
+    overflow: scroll;
+}
+main {
+    grid-area: main;
+    max-height: 88vh;  /* How do we ensure that this is 100vh - header size? */
+}
+nav[data-expanded=false] {
+  translate: var(--translate, -100% 0);
+}
+[aria-controls="sidebar"] {
+  display: var(--toggle-display, revert);
+}
+
 </style>
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 7b99d62..1b2391c 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -1,29 +1,40 @@
 <script>
-  import { AppBar } from '@skeletonlabs/skeleton';
-  import "../app.css";
+    import { AppBar } from '@skeletonlabs/skeleton';
+    import "../app.css";
 
-  import { currentUser } from '$lib/store';
-  import LogOut from '$lib/components/LogOut.svelte';
+    import logo from '$lib/assets/logo.png';
+
+    import { showMenu, currentUser } from '$lib/store';
+    import LogOut from '$lib/components/LogOut.svelte';
+
+    function toggleMenu() {
+        showMenu.update((value) => !value);
+    }
 </script>
 
-<div id="app">
-    <AppBar>
-        <svelte:fragment slot="lead">🌳</svelte:fragment>
+<div id="app" class="m-0 p-0 h-vh w-full">
+    <div class="fixed w-full">
+        <AppBar>
+            <svelte:fragment slot="lead">
+                <a on:click|preventDefault={toggleMenu} class="cursor-pointer">
+                <img class="w-8 h-8" alt="logo" src={logo} />
+                </a>
+            </svelte:fragment>
             <a href="/">understory</a>
-        <svelte:fragment slot="trail">
-            {#if $currentUser}
-                <LogOut />
-            {/if}
-        </svelte:fragment>
-    </AppBar>
-
+            <svelte:fragment slot="trail">
+                {#if $currentUser}
+                    <LogOut />
+                {/if}
+            </svelte:fragment>
+        </AppBar>
+    </div>
     <slot />
 </div>
 
 <style>
     #app {
         margin: 0;
-        padding: 1rem;
+        padding: 0;
         height: 100vh;
         width: 100%;
     }
diff --git a/ui/static/favicon.png b/ui/static/favicon.png
index 825b9e6..5df6b4e 100644
Binary files a/ui/static/favicon.png and b/ui/static/favicon.png differ
-- 
cgit v1.2.3