Collapse app header actions into menu on small viewports. Resolves #185

techniq · Jan 11, 2024 · 4cf9432 · 4cf9432
1 parent f71b2ee
commit 4cf9432
Showing 1 changed file with 60 additions and 23 deletions.
diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
@@ -2,11 +2,12 @@
   import { onMount } from 'svelte';
   import posthog from 'posthog-js';
   import 'prism-themes/themes/prism-vsc-dark-plus.css';
-  import { mdiArrowTopRight, mdiGithub, mdiTwitter } from '@mdi/js';
+  import { mdiArrowTopRight, mdiDotsVertical, mdiGithub, mdiTwitter } from '@mdi/js';
 
   import AppBar from '$lib/components/AppBar.svelte';
   import AppLayout from '$lib/components/AppLayout.svelte';
   import Button from '$lib/components/Button.svelte';
+  import MenuButton from '$lib/components/MenuButton.svelte';
   import NavMenu from './_NavMenu.svelte';
   import QuickSearch from '$lib/components/QuickSearch.svelte';
   import ThemeSelect from '$lib/components/ThemeSelect.svelte';
@@ -18,6 +19,7 @@
   import { page } from '$app/stores';
 
   import { settings } from '$lib/components/settings';
+  import { lgScreen } from '$lib/stores/matchMedia';
   import type { PageData } from './$types';
 
   import { createLocaleSettings } from '$lib';
@@ -151,7 +153,7 @@
         href="https://www.layerchart.com"
         icon={{ data: mdiArrowTopRight, class: 'opacity-50' }}
         target="_blank"
-        class="p-2 max-md:hidden flex-row-reverse"
+        class="p-2 max-lg:hidden flex-row-reverse"
       >
         LayerChart
       </Button>
@@ -167,27 +169,62 @@
         {/if}
       </div>
 
-      <Tooltip title="Discord" placement="left" offset={2}>
-        <Button
-          icon="M20.33 5.06C18.78 4.33 17.12 3.8 15.38 3.5 15.17 3.89 14.92 4.4 14.74 4.82 12.9 4.54 11.07 4.54 9.26 4.82 9.09 4.4 8.83 3.89 8.62 3.5 6.88 3.8 5.21 4.33 3.66 5.06 0.53 9.79-0.32 14.41 0.1 18.96 2.18 20.52 4.19 21.46 6.17 22.08 6.66 21.4 7.1 20.69 7.48 19.93 6.76 19.66 6.07 19.33 5.43 18.94 5.6 18.81 5.77 18.68 5.93 18.54 9.88 20.39 14.17 20.39 18.07 18.54 18.23 18.68 18.4 18.81 18.57 18.94 17.92 19.33 17.24 19.66 16.52 19.94 16.9 20.69 17.33 21.41 17.82 22.08 19.8 21.46 21.82 20.52 23.9 18.96 24.4 13.69 23.05 9.11 20.33 5.06ZM8.01 16.17C6.83 16.17 5.86 15.06 5.86 13.71 5.86 12.36 6.81 11.25 8.01 11.25 9.22 11.25 10.19 12.36 10.17 13.71 10.17 15.06 9.22 16.17 8.01 16.17ZM15.99 16.17C14.8 16.17 13.83 15.06 13.83 13.71 13.83 12.36 14.78 11.25 15.99 11.25 17.19 11.25 18.17 12.36 18.14 13.71 18.14 15.06 17.19 16.17 15.99 16.17Z"
-          href="https://discord.gg/697JhMPD3t"
-          class="p-2"
-          target="_blank"
-        />
-      </Tooltip>
-
-      <Tooltip title="Open Twitter / X" placement="left" offset={2}>
-        <Button
-          icon={mdiTwitter}
-          href="https://twitter.com/techniq35"
-          class="p-2"
-          target="_blank"
-        />
-      </Tooltip>
-
-      <Tooltip title="View repository" placement="left" offset={2}>
-        <Button icon={mdiGithub} href={ghLink} class="p-2" target="_blank" />
-      </Tooltip>
+      {#if $lgScreen}
+        <Tooltip title="Discord" placement="left" offset={2}>
+          <Button
+            icon="M20.33 5.06C18.78 4.33 17.12 3.8 15.38 3.5 15.17 3.89 14.92 4.4 14.74 4.82 12.9 4.54 11.07 4.54 9.26 4.82 9.09 4.4 8.83 3.89 8.62 3.5 6.88 3.8 5.21 4.33 3.66 5.06 0.53 9.79-0.32 14.41 0.1 18.96 2.18 20.52 4.19 21.46 6.17 22.08 6.66 21.4 7.1 20.69 7.48 19.93 6.76 19.66 6.07 19.33 5.43 18.94 5.6 18.81 5.77 18.68 5.93 18.54 9.88 20.39 14.17 20.39 18.07 18.54 18.23 18.68 18.4 18.81 18.57 18.94 17.92 19.33 17.24 19.66 16.52 19.94 16.9 20.69 17.33 21.41 17.82 22.08 19.8 21.46 21.82 20.52 23.9 18.96 24.4 13.69 23.05 9.11 20.33 5.06ZM8.01 16.17C6.83 16.17 5.86 15.06 5.86 13.71 5.86 12.36 6.81 11.25 8.01 11.25 9.22 11.25 10.19 12.36 10.17 13.71 10.17 15.06 9.22 16.17 8.01 16.17ZM15.99 16.17C14.8 16.17 13.83 15.06 13.83 13.71 13.83 12.36 14.78 11.25 15.99 11.25 17.19 11.25 18.17 12.36 18.14 13.71 18.14 15.06 17.19 16.17 15.99 16.17Z"
+            href="https://discord.gg/697JhMPD3t"
+            class="p-2"
+            target="_blank"
+          />
+        </Tooltip>
+
+        <Tooltip title="Open Twitter / X" placement="left" offset={2}>
+          <Button
+            icon={mdiTwitter}
+            href="https://twitter.com/techniq35"
+            class="p-2"
+            target="_blank"
+          />
+        </Tooltip>
+
+        <Tooltip title="View repository" placement="left" offset={2}>
+          <Button icon={mdiGithub} href={ghLink} class="p-2" target="_blank" />
+        </Tooltip>
+      {:else}
+        <MenuButton
+          icon={mdiDotsVertical}
+          menuIcon={null}
+          iconOnly={true}
+          options={[
+            {
+              label: 'LayerChart',
+              value: 'https://www.layerchart.com',
+              icon: mdiArrowTopRight,
+            },
+            {
+              label: 'Github',
+              value: ghLink,
+              icon: mdiGithub,
+            },
+            {
+              label: 'Discord',
+              value: 'https://discord.gg/697JhMPD3t',
+              icon: 'M20.33 5.06C18.78 4.33 17.12 3.8 15.38 3.5 15.17 3.89 14.92 4.4 14.74 4.82 12.9 4.54 11.07 4.54 9.26 4.82 9.09 4.4 8.83 3.89 8.62 3.5 6.88 3.8 5.21 4.33 3.66 5.06 0.53 9.79-0.32 14.41 0.1 18.96 2.18 20.52 4.19 21.46 6.17 22.08 6.66 21.4 7.1 20.69 7.48 19.93 6.76 19.66 6.07 19.33 5.43 18.94 5.6 18.81 5.77 18.68 5.93 18.54 9.88 20.39 14.17 20.39 18.07 18.54 18.23 18.68 18.4 18.81 18.57 18.94 17.92 19.33 17.24 19.66 16.52 19.94 16.9 20.69 17.33 21.41 17.82 22.08 19.8 21.46 21.82 20.52 23.9 18.96 24.4 13.69 23.05 9.11 20.33 5.06ZM8.01 16.17C6.83 16.17 5.86 15.06 5.86 13.71 5.86 12.36 6.81 11.25 8.01 11.25 9.22 11.25 10.19 12.36 10.17 13.71 10.17 15.06 9.22 16.17 8.01 16.17ZM15.99 16.17C14.8 16.17 13.83 15.06 13.83 13.71 13.83 12.36 14.78 11.25 15.99 11.25 17.19 11.25 18.17 12.36 18.14 13.71 18.14 15.06 17.19 16.17 15.99 16.17Z',
+            },
+            {
+              label: 'Twitter / X',
+              value: 'https://twitter.com/techniq35',
+              icon: mdiTwitter,
+            },
+          ]}
+          on:change={(e) => {
+            window.open(e.detail.value, '_blank');
+          }}
+        >
+          <span slot="selection" class="hidden" />
+        </MenuButton>
+      {/if}
     </div>
   </AppBar>