From 233afb75eb16d4bbcdc82506987187eea0c54d96 Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Thu, 8 Sep 2022 23:30:38 -0400
Subject: [PATCH] More work on the mobile interface.

Begin toying with a hamburger menu.
Remove many redundant CSS definitions.
---
 src/app.css                  |  6 +++
 src/lib/header/Header.svelte | 62 +------------------------
 src/lib/header/NavBar.svelte | 87 ++++++++++++++++++++++--------------
 src/lib/state.js             |  2 +-
 src/routes/+page.svelte      | 12 +++++
 5 files changed, 73 insertions(+), 96 deletions(-)

diff --git a/src/app.css b/src/app.css
index 72ef145..fc8399f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -294,9 +294,15 @@ section {
 	.query-settings {
 		overflow: scroll;
 	}
+	.mobile {
+		display: none !important;
+	}
 }
 
 @media (max-width: 719px) {
+	.desktop {
+		display: none !important;
+	}
 	section {
 		flex-direction: column;
 		overflow: scroll;
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index 92e5433..ebe931a 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -13,7 +13,7 @@
 
 	<NavBar />
 
-	<div class="corner">
+	<div class="desktop corner">
 		<!--
 			{#if testMode}
 				<div class="error-display">TEST MODE ENABLED</div>
@@ -59,66 +59,6 @@
 		object-fit: contain;
 	}
 
-	nav {
-		display: flex;
-		justify-content: center;
-		--background: rgba(255, 255, 255, 0.7);
-	}
-
-	svg {
-		width: 2em;
-		height: 3em;
-		display: block;
-	}
-
-	path {
-		fill: var(--background);
-	}
-
-	ul {
-		position: relative;
-		padding: 0;
-		margin: 0;
-		height: 3em;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		list-style: none;
-		background: var(--background);
-		background-size: contain;
-	}
-
-	li {
-		position: relative;
-		height: 100%;
-	}
-
-	li.active::before {
-		--size: 6px;
-		content: '';
-		width: 0;
-		height: 0;
-		position: absolute;
-		top: 0;
-		left: calc(50% - var(--size));
-		border: var(--size) solid transparent;
-		border-top: var(--size) solid var(--accent-color);
-	}
-
-	nav a {
-		display: flex;
-		height: 100%;
-		align-items: center;
-		padding: 0 1em;
-		color: var(--heading-color);
-		font-weight: 700;
-		font-size: 0.8rem;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		text-decoration: none;
-		transition: color 0.2s linear;
-	}
-
 	a:hover {
 		color: var(--accent-color);
 	}
diff --git a/src/lib/header/NavBar.svelte b/src/lib/header/NavBar.svelte
index b08ac3f..c437e8d 100644
--- a/src/lib/header/NavBar.svelte
+++ b/src/lib/header/NavBar.svelte
@@ -1,12 +1,14 @@
 <script>
   import { page } from '$app/stores';
+
+  let dropdownVisible = false
 </script>
 
-<nav>
+<nav class="desktop">
     <svg viewBox="0 0 2 3" aria-hidden="true">
         <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
     </svg>
-    <ul>
+    <ul class="desktop">
         <li class:active={$page.url.pathname === '/'}>
             <a sveltekit:prefetch href="/">Topic Search</a>
         </li>
@@ -24,44 +26,37 @@
     </svg>
 </nav>
 
+<nav class="mobile">
+    <button style="font-size: 3rem;" on:click={() => dropdownVisible = !dropdownVisible}>{dropdownVisible ? 'x' : '≡'}</button>
+    {#if dropdownVisible}
+        <ul class="mobile">
+            <li class:active={$page.url.pathname === '/'}>
+                <a sveltekit:prefetch href="/">Topic Search</a>
+            </li>
+            <!--
+            <li class:active={$page.url.pathname === '/post-message'}>
+                <a sveltekit:prefetch href="/post-message">Post Message</a>
+            </li>
+            -->
+            <li class:active={$page.url.pathname === '/settings'}>
+                <a sveltekit:prefetch href="/settings">Settings</a>
+            </li>
+        </ul>
+    {/if}
+</nav>
+
 <style>
-    header {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .corner {
-      font-weight: bold;
-      font-size: 18px;
-      color: black;
-      height: 3em;
-    }
-
-    .corner a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    .corner span {
-      margin-top: 0.45em;
-      margin-left: 0.5em;
-    }
-
-    .corner img {
-      margin-left: 0.5em;
-      height: 2em;
-      object-fit: contain;
-    }
-
     nav {
       display: flex;
       justify-content: center;
       --background: rgba(255, 255, 255, 0.7);
     }
 
+    nav.mobile {
+        flex-direction: column;
+        align-items: end;
+    }
+
     svg {
       width: 2em;
       height: 3em;
@@ -72,7 +67,7 @@
       fill: var(--background);
     }
 
-    ul {
+    ul.desktop {
       position: relative;
       padding: 0;
       margin: 0;
@@ -85,6 +80,20 @@
       background-size: contain;
     }
 
+    ul.mobile {
+        flex-direction: column;
+        position: absolute;
+        padding: 128px 0 0;
+        margin: 0;
+        height: 3em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        list-style: none;
+        background: var(--background);
+        background-size: contain;
+    }
+
     li {
       position: relative;
       height: 100%;
@@ -120,4 +129,14 @@
       color: var(--accent-color);
     }
 
+    button {
+        z-index: 1;
+        padding: 0;
+        height: 64px;
+        width: 64px;
+        font-size: 64px;
+        border-radius: 0;
+        border-style: none;
+    }
+
 </style>
\ No newline at end of file
diff --git a/src/lib/state.js b/src/lib/state.js
index 8c6fc94..a96ced5 100644
--- a/src/lib/state.js
+++ b/src/lib/state.js
@@ -1,6 +1,6 @@
 // noinspection JSCheckFunctionSignatures
 
-import { get, writable } from 'svelte/store'
+import { writable } from 'svelte/store'
 import { backendAddressAndPort, queryMode, queryState } from './constants.js'
 
 const getRandomFromArray = array => array[Math.floor(Math.random() * array.length)]
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 09b637e..dc270c2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -177,6 +177,7 @@
 				{/if}
 			</div>
 		</div>
+		<hr>
 	{/if}
 
 	<div class="data-view-container">
@@ -226,6 +227,17 @@
 </section>
 
 <style>
+	hr {
+		width: 60%;
+		border-style: solid;
+		margin-bottom: 1.5em;
+		border-color: rgba(0, 0, 0, 0.2);
+	}
+	@media (min-width: 720px) {
+		hr {
+			display: none;
+		}
+	}
 	.data-view {
 		border-top: none;
 	}