Add more menu for additional controls and links in the desktop layout

gomander · Jan 6, 2024 · 897d9ad · 897d9ad
1 parent d0b4d70
commit 897d9ad
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 13 deletions.
diff --git a/src/lib/components/EntriesTextbox.svelte b/src/lib/components/EntriesTextbox.svelte
@@ -43,3 +43,5 @@
   disabled={$busyStore.spinning}
   aria-label="Entries"
 />
+
+<pre>{$wheelStore.entries.map(e => `${e.text} - ${e.id}`).join('\n')}</pre>
diff --git a/src/lib/components/MobileMenu.svelte b/src/lib/components/MobileMenu.svelte
@@ -2,6 +2,7 @@
   import { createEventDispatcher } from 'svelte'
   import { LightSwitch } from '@skeletonlabs/skeleton'
   import busyStore from '$lib/stores/BusyStore'
+  import debugStore from '$lib/stores/DebugStore'
 
   const dispatch = createEventDispatcher<{
     new: null,
@@ -82,12 +83,21 @@
     <span class="flex-grow text-left">Theme</span>
   </div>
 
+  <a
+    href="https://github.com/gomander/svelte-wheel"
+    target="_blank"
+    class="btn text-xl hover:variant-soft-primary"
+  >
+    <i class="fab fa-github w-6" />
+    <span class="flex-grow text-left">GitHub</span>
+  </a>
+
   <button
     class="btn text-xl hover:variant-soft-primary"
     on:click={() => dispatch('debug')}
     disabled={$busyStore.spinning}
   >
-    <i class="fas fa-bug w-6" />
+    <i class="fas {$debugStore.active ? 'fa-bug-slash' : 'fa-bug'} w-6" />
     <span class="flex-grow text-left">Debug</span>
   </button>
 </div>
diff --git a/src/lib/components/MoreMenu.svelte b/src/lib/components/MoreMenu.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { LightSwitch } from '@skeletonlabs/skeleton'
+  import busyStore from '$lib/stores/BusyStore'
+  import debugStore from '$lib/stores/DebugStore'
+
+  const dispatch = createEventDispatcher<{
+    account: null,
+    debug: null
+  }>()
+</script>
+
+<div class="card flex flex-col w-fit shadow-xl p-2">
+  <button
+    class="btn text-xl hover:variant-soft-primary"
+    on:click={() => dispatch('account')}
+    disabled={$busyStore.spinning}
+  >
+    <i class="fas fa-user w-6" />
+    <span class="flex-grow text-left">Account</span>
+  </button>
+
+  <a
+    href="/faq"
+    class="btn text-xl hover:variant-soft-primary"
+  >
+    <i class="fas fa-question w-6" />
+    <span class="flex-grow text-left">FAQ</span>
+  </a>
+
+  <div class="btn text-xl">
+    <LightSwitch />
+    <span class="flex-grow text-left">Theme</span>
+  </div>
+
+  <a
+    href="https://github.com/gomander/svelte-wheel"
+    target="_blank"
+    class="btn text-xl hover:variant-soft-primary"
+  >
+    <i class="fab fa-github w-6" />
+    <span class="flex-grow text-left">GitHub</span>
+  </a>
+
+  <button
+    class="btn text-xl hover:variant-soft-primary"
+    on:click={() => dispatch('debug')}
+    disabled={$busyStore.spinning}
+  >
+    <i class="fas {$debugStore.active ? 'fa-bug-slash' : 'fa-bug'} w-6" />
+    <span class="flex-grow text-left">Debug</span>
+  </button>
+</div>
diff --git a/src/lib/components/ResultsTextbox.svelte b/src/lib/components/ResultsTextbox.svelte
@@ -12,3 +12,5 @@
   bind:value={text}
   aria-label="Results"
 />
+
+<pre>{$wheelStore.winners.map(e => `${e.text} - ${e.id}`).join('\n')}</pre>
diff --git a/src/lib/components/Toolbar.svelte b/src/lib/components/Toolbar.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { popup, LightSwitch } from '@skeletonlabs/skeleton'
+  import { popup } from '@skeletonlabs/skeleton'
   import fullscreenStore from '$lib/stores/FullscreenStore'
   import busyStore from '$lib/stores/BusyStore'
   import MobileMenu from '$lib/components/MobileMenu.svelte'
+  import MoreMenu from '$lib/components/MoreMenu.svelte'
 
   const dispatch = createEventDispatcher<{
     new: null,
@@ -97,16 +98,6 @@
       >
         <i class="fas fa-share-nodes" />
       </button>
-
-      <button
-        class="btn btn-icon-sm text-lg hover:variant-soft-primary"
-        on:click={() => dispatch('account')}
-        disabled={$busyStore.spinning}
-        aria-label="Account"
-        title="Account"
-      >
-        <i class="fas fa-user" />
-      </button>
     {/if}
 
     {#if $fullscreenStore.supported}
@@ -120,6 +111,21 @@
       </button>
     {/if}
 
-    <LightSwitch />
+    <div>
+      <button
+        class="btn btn-icon-sm text-xl hover:variant-soft-primary"
+        use:popup={{ event: 'click', target: 'moreMenu' }}
+        role="menu"
+      >
+        <i class="fas fa-bars" />
+      </button>
+
+      <div data-popup="moreMenu">
+        <MoreMenu
+          on:account={() => dispatch('account')}
+          on:debug={() => dispatch('debug')}
+        />
+      </div>
+    </div>
   </div>
 </header>