Add proper mobile Navigation

LorisSigrist · Oct 24, 2023 · 2a61d6d · 2a61d6d
1 parent 06e839e
commit 2a61d6d
Show file tree

Hide file tree

Showing 20 changed files with 181 additions and 141 deletions.
diff --git a/site/src/lib/ui/BottomAppbar.svelte b/site/src/lib/ui/BottomAppbar.svelte
diff --git a/site/src/lib/ui/Code.svelte b/site/src/lib/ui/Code.svelte
@@ -1,17 +1,9 @@
 <script>
   import CodeTab from "./Code/CodeTab.svelte";
-  /** @type {string}*/
-  export let code;
-
-  /** @type {string | null}*/
-  export let language = null;
-
-  /** @type {string | null}*/
-  export let filename = null;
 </script>
 
 <div
-  class="my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10 not-prose"
+  class="shadow-xl my-6 overflow-hidden rounded-md bg-zinc-900 dark:ring-1 dark:ring-white/10 not-prose"
 >
-  <CodeTab code={"npm install --save-dev t18s"}>npm install --save-dev t18s</CodeTab>
+  <CodeTab>npm install --save-dev t18s</CodeTab>
 </div>
diff --git a/site/src/lib/ui/Code/CodeGroup.svelte b/site/src/lib/ui/Code/CodeGroup.svelte
diff --git a/site/src/lib/ui/Code/CodeGroupHeader.svelte b/site/src/lib/ui/Code/CodeGroupHeader.svelte
@@ -1,20 +1,18 @@
 <script>
-    /** @type {string}*/
-    export let title ="";
-    export let seletctedIndex = 0;
+  /** @type {string}*/
+  export let title = "";
 </script>
 
-<div class="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
-
-    {#if title}
-      <h3 class="mr-auto pt-3 text-xs font-semibold text-white">
-        {title}
-      </h3>
-    {/if}
-
-    <!--
-
-    {hasTabs && (
+<div
+  class="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent"
+>
+  {#if title}
+    <h3 class="mr-auto pt-3 text-xs font-semibold text-white">
+      {title}
+    </h3>
+  {/if}
+  <!--
+      {#if hasTabs}
       <Tab.List className="-mb-px flex gap-4 text-xs font-medium">
         {Children.map(children, (child, childIndex) => (
           <Tab
@@ -29,6 +27,6 @@
           </Tab>
         ))}
       </Tab.List>
-    )}
+    {/if}
     -->
-  </div>
+</div>
diff --git a/site/src/lib/ui/Code/CodeHeader.svelte b/site/src/lib/ui/Code/CodeHeader.svelte
@@ -0,0 +1,8 @@
+<script>
+
+</script>
+
+
+<header>
+    <slot />
+</header>
diff --git a/site/src/lib/ui/Code/CodePanelHeader.svelte b/site/src/lib/ui/Code/CodePanelHeader.svelte
@@ -8,7 +8,7 @@
 
 {#if tag || label}
   <div
-    class="flex h-9 items-center gap-2 border-y border-b-white/7.5 border-t-transparent bg-white/2.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1"
+    class="flex h-9 items-center gap-2 border-y border-t-transparent bg-zinc-900 px-4 border-b-white/5 bg-white/1"
   >
     {#if tag}
       <div class="dark flex">

diff --git a/site/src/lib/ui/Code/CodeTab.svelte b/site/src/lib/ui/Code/CodeTab.svelte
@@ -2,14 +2,23 @@
   import CodePanelHeader from "./CodePanelHeader.svelte";
   import CopyButton from "./CopyButton.svelte";
 
-  /** @type {string} */
-  export let code;
+  /** @type {HTMLElement}*/
+  let content;
+
+  let copied = false;
+  function saveCodeToClipboard() {
+    copied = true;
+    navigator.clipboard.writeText(content.innerText);
+    setTimeout(() => {
+      copied = false;
+    }, 1000);
+  }
 </script>
 
 <div class="group dark:bg-white/2.5">
   <CodePanelHeader tag="GET" label="sigrist.dev/api/v1/users" />
   <div class="relative">
-    <pre class="overflow-x-auto p-4 text-xs text-white"><slot /></pre>
-    <CopyButton {code} />
+    <pre class="overflow-x-auto p-4 text-xs text-white" bind:this={content}><slot /></pre>
+    <CopyButton on:click={saveCodeToClipboard} {copied} />
   </div>
 </div>
diff --git a/site/src/lib/ui/Code/CopyButton.svelte b/site/src/lib/ui/Code/CopyButton.svelte
@@ -1,26 +1,15 @@
 <script>
   import ClipboardIcon from "virtual:icons/heroicons/clipboard";
 
-  /** @type {string} */
-  export let code;
-
-  let copied = false;
-
-  function saveCodeToClipboard() {
-    navigator.clipboard.writeText(code);
-    copied = true;
-    setTimeout(() => {
-      copied = false;
-    }, 1000);
-  }
+  export let copied = false;
 </script>
 
 <button
-  class="group/button text-sm absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100
+  class="group/button text-sm absolute right-4 top-2.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100
 {copied
     ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
     : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'}"
-  on:click={saveCodeToClipboard}
+  on:click
 >
   <span
     aria-hidden={copied}

diff --git a/site/src/lib/ui/SidebarLink.svelte b/site/src/lib/ui/SidebarLink.svelte
diff --git a/site/src/lib/ui/Tab/Panel.svelte b/site/src/lib/ui/Tab/Panel.svelte
diff --git a/site/src/lib/ui/nav/Appbar/BottomAppbar.svelte b/site/src/lib/ui/nav/Appbar/BottomAppbar.svelte
@@ -0,0 +1,55 @@
+<script>
+  import MenuBars from "virtual:icons/heroicons/bars-3";
+  import XMark from "virtual:icons/heroicons/x-mark";
+  import BottomAppbarSection from "./BottomAppbarSection.svelte";
+  import { page } from "$app/stores";
+
+  let navOpen = false;
+</script>
+
+{#if navOpen}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="fixed inset-0 bg-black bg-opacity-30 z-40 md:hidden"
+    on:click={() => (navOpen = false)}
+  />
+{/if}
+
+<header class="block md:hidden relative z-50">
+
+  <div class="flex p-4 border-t items-center justify-between z-50 bg-white">
+    <a class="flex gap-2" href="/">
+      <img src="/icon.svg" alt="t18s" class="w-6 h-6" />
+      <span class="font-semibold">T18S</span>
+    </a>
+
+    <button on:click={() => (navOpen = !navOpen)}>
+      {#if navOpen}
+        <XMark class="w-6 h-6" />
+      {:else}
+        <MenuBars class="w-6 h-6" />
+      {/if}
+    </button>
+  </div>
+
+  {#if navOpen}
+  <nav
+    class="absolute grid gap-2 top-0 left-0 -translate-y-full bg-white rounded-t-lg border-t w-full p-4 max-h-96 overflow-y-auto"
+  >
+    <BottomAppbarSection let:Link let:Heading>
+      <Heading>Getting Started</Heading>
+      <Link href="/" active={$page.url.pathname === "/"}>Installation</Link>
+      <Link
+        href="/getting-started"
+        active={$page.url.pathname === "/getting-started"}>Setting Up</Link
+      >
+      <Link href="/roadmap" active={$page.url.pathname === "/roadmap"}
+        >Roadmap</Link
+      >
+      <Link href="/syntax" active={$page.url.pathname === "/syntax"}
+        >Syntax</Link
+      >
+    </BottomAppbarSection>
+  </nav>
+{/if}
+</header>
diff --git a/site/src/lib/ui/nav/Appbar/BottomAppbarLink.svelte b/site/src/lib/ui/nav/Appbar/BottomAppbarLink.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { merge } from "$lib/utils/class-merge";
+  export let active = false;
+  export let href = "#";
+</script>
+
+<a
+  {href}
+  class={merge(
+    "flex justify-between gap-2 py-2 px-2 rounded-md text-sm transition text-zinc-600 hover:text-zinc-900",
+    active && "bg-orange-50"
+  )}
+>
+  <span class="truncate"><slot /></span>
+</a>
diff --git a/site/src/lib/ui/nav/Appbar/BottomAppbarSection.svelte b/site/src/lib/ui/nav/Appbar/BottomAppbarSection.svelte
@@ -0,0 +1,8 @@
+<script>
+    import Link from "./BottomAppbarLink.svelte"
+    import Heading from "./BottomAppbarSectionHeading.svelte"
+</script>
+
+<div class="grid">
+    <slot {Link} {Heading} />
+</div>
diff --git a/site/src/lib/ui/nav/Appbar/BottomAppbarSectionHeading.svelte b/site/src/lib/ui/nav/Appbar/BottomAppbarSectionHeading.svelte
@@ -0,0 +1,3 @@
+<h3 class="uppercase font-bold text-gray-500 text-sm py-2">
+    <slot />
+</h3>
diff --git a/site/src/lib/ui/Sidebar.svelte → site/src/lib/ui/nav/Sidebar/Sidebar.svelte b/site/src/lib/ui/Sidebar.svelte → site/src/lib/ui/nav/Sidebar/Sidebar.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Searchbar from "./Searchbar.svelte";
-  import SidebarLink from "./SidebarLink.svelte";
-  import SidebarSectionHeading from "./SidebarSectionHeading.svelte";
+  import { page } from "$app/stores";
+  import Searchbar from "../../Searchbar.svelte";
+  import SidebarSection from "./SidebarSection.svelte";
   import GithubIcon from "virtual:icons/simple-icons/github";
 </script>
 
@@ -16,19 +16,14 @@
     <Searchbar />
   </header>
   <nav class="grid gap-8">
-
-    <div class="grid">
-      <SidebarSectionHeading>Getting Started</SidebarSectionHeading>
-      <SidebarLink href="/" active>Installation</SidebarLink>
-      <SidebarLink href="/getting-started">Setting Up</SidebarLink>
-      <SidebarLink href="/roadmap">Loading Messages</SidebarLink>
-    </div>
 
-    <div class="grid">
-      <SidebarSectionHeading>Guides</SidebarSectionHeading>
-      <SidebarLink href="/" active>Installation</SidebarLink>
-      <SidebarLink href="/syntax">Syntax</SidebarLink>
-    </div>
+    <SidebarSection let:Heading let:Link>
+      <Heading>Getting Started</Heading>
+      <Link href="/" active={$page.url.pathname === "/"}>Installation</Link>
+      <Link href="/getting-started" active={$page.url.pathname === "/getting-started"}>Setting Up</Link>
+      <Link href="/roadmap" active={$page.url.pathname === "/roadmap"}>Roadmap</Link>
+      <Link href="/syntax" active={$page.url.pathname === "/syntax"}>Syntax</Link>
+    </SidebarSection>
   </nav>
 
   <footer>

diff --git a/site/src/lib/ui/nav/Sidebar/SidebarLink.svelte b/site/src/lib/ui/nav/Sidebar/SidebarLink.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { cubicInOut } from "svelte/easing";
+  import { crossfade } from "svelte/transition";
+  export let active = false;
+
+  /** @type {string} */
+  export let href;
+
+  const [send, receive] = crossfade({
+    duration: 250,
+    easing: cubicInOut,
+  });
+</script>
+
+<a
+  class="{active
+    ? 'font-semibold'
+    : ''} text-gray-700 relative outline-orange-400 hover:bg-orange-50 py-2 rounded-md"
+  {href}
+>
+  <slot />
+
+  {#if active}
+    <!--Active Indicator-->
+    <span
+      class="absolute top-1/2 left-0 w-1.5 h-1.5 -translate-y-1/2 -translate-x-4 rounded-full bg-orange-500"
+      in:send={{ key: 'sidebar-link-active-indicator' }}
+      out:receive={{ key: 'sidebar-link-active-indicator' }}
+    />
+  {/if}
+</a>
diff --git a/site/src/lib/ui/nav/Sidebar/SidebarSection.svelte b/site/src/lib/ui/nav/Sidebar/SidebarSection.svelte
@@ -0,0 +1,8 @@
+<script>
+  import SidebarSectionHeading from "./SidebarSectionHeading.svelte";
+  import SidebarSectionLink from "./SidebarLink.svelte";
+</script>
+
+<div class="grid">
+  <slot Heading={SidebarSectionHeading} Link={SidebarSectionLink} />
+</div>
diff --git a/site/src/lib/ui/SidebarSectionHeading.svelte → .../nav/Sidebar/SidebarSectionHeading.svelte b/site/src/lib/ui/SidebarSectionHeading.svelte → .../nav/Sidebar/SidebarSectionHeading.svelte
diff --git a/site/src/lib/utils/class-merge.js b/site/src/lib/utils/class-merge.js
@@ -0,0 +1,8 @@
+/**
+ * Merges classes together & ignores any falsy values
+ * @param  {(string | false | null)[]} classes 
+ * @returns 
+ */
+export function merge(...classes) {
+    return classes.filter(Boolean).join(' ');
+}