From fa9b1cab5373926f63460fe570533bcd8a4ec821 Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Thu, 9 Oct 2025 20:26:11 -0700
Subject: [PATCH] design: round bottom corners of navbar

---
 src/lib/ui/layout/InvertedCorner.svelte | 18 ++++++++++++++++++
 src/lib/ui/layout/Shell.svelte          | 16 +++++++++++++---
 src/lib/ui/navbar/NavButton.svelte      |  2 +-
 src/lib/ui/navbar/Navbar.svelte         |  3 ++-
 src/lib/ui/shared/button/Button.svelte  |  2 --
 src/lib/ui/sidebar/SidebarButton.svelte |  4 ++--
 6 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/ui/layout/InvertedCorner.svelte

diff --git a/src/lib/ui/layout/InvertedCorner.svelte b/src/lib/ui/layout/InvertedCorner.svelte
new file mode 100644
index 00000000..b9465eef
--- /dev/null
+++ b/src/lib/ui/layout/InvertedCorner.svelte
@@ -0,0 +1,18 @@
+<script>
+  let { class: clazz } = $props()
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="64"
+  height="64"
+  viewBox="0 0 24 24"
+  aria-hidden="true"
+  class={clazz}
+>
+  <path
+    d="M0 0h64v64H0V0z M0 24a24 24 0 0 1 24-24v24H0z"
+    fill="currentColor"
+    fill-rule="evenodd"
+  />
+</svg>
diff --git a/src/lib/ui/layout/Shell.svelte b/src/lib/ui/layout/Shell.svelte
index a27be447..ea225c8a 100644
--- a/src/lib/ui/layout/Shell.svelte
+++ b/src/lib/ui/layout/Shell.svelte
@@ -7,6 +7,7 @@
     UIEventHandler,
   } from 'svelte/elements'
   import { scrollY } from 'svelte/reactivity/window'
+  import InvertedCorner from './InvertedCorner.svelte'
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
     children?: Snippet
@@ -45,10 +46,19 @@
     style="transition: bottom .4s cubic-bezier(0.075, 0.82, 0.165, 1);"
     aria-hidden="true"
   >
+    <div class="md:hidden flex justify-between" dir="ltr">
+      <InvertedCorner
+        class="w-8 h-8 text-slate-100 dark:text-zinc-950 rotate-270"
+      />
+      <InvertedCorner
+        class="w-8 h-8 text-slate-100 dark:text-zinc-950 rotate-180"
+      />
+    </div>
     {@render navbar?.({
       class: [
-        'bg-slate-100/70 dark:bg-zinc-950/90 border-slate-200/50 dark:border-zinc-900',
-        'pointer-events-auto backdrop-blur-xl border md:border-t-0 md:border-x-0',
+        'md:bg-slate-100/70 md:dark:bg-zinc-950/90 border-slate-200/50 dark:border-zinc-900',
+        'bg-slate-100 dark:bg-zinc-950',
+        'pointer-events-auto backdrop-blur-xl border border-t-0 md:border-x-0',
       ],
       style: '',
     })}
@@ -59,7 +69,7 @@
       style: 'grid-area: sidebar; width: 100% !important;',
     })}
     {@render main?.({
-      class: `w-full bg-slate-50 dark:bg-zinc-925 justify-self-center border-x border-slate-200 dark:border-zinc-900 max-lg:pb-22 pb-3 lg:pb-6`,
+      class: `w-full bg-slate-50 dark:bg-zinc-925 max-lg:pb-22 justify-self-center border-x border-slate-200 dark:border-zinc-900 pb-3 lg:pb-6`,
       style: 'grid-area: main',
     })}
     {@render suffix?.({
diff --git a/src/lib/ui/navbar/NavButton.svelte b/src/lib/ui/navbar/NavButton.svelte
index 938df4f9..b98678ba 100644
--- a/src/lib/ui/navbar/NavButton.svelte
+++ b/src/lib/ui/navbar/NavButton.svelte
@@ -75,7 +75,7 @@
         display: grid;
         place-items: center;
         aspect-ratio: 1 / 1;
-        border-radius: 100%;
+        border-radius: var(--radius-xl);
       }
     }
 
diff --git a/src/lib/ui/navbar/Navbar.svelte b/src/lib/ui/navbar/Navbar.svelte
index 46ecf6f2..8be3709b 100644
--- a/src/lib/ui/navbar/Navbar.svelte
+++ b/src/lib/ui/navbar/Navbar.svelte
@@ -33,11 +33,12 @@
 <nav
   class={[
     'w-full mx-auto z-50',
-    'md:gap-5 gap-2 flex flex-row items-center justify-between p-2',
+    'md:gap-5 gap-2 flex flex-row items-center justify-evenly p-2 px-8 md:px-2',
     'box-border p-0.5 duration-150 @container *:max-md:flex-1',
     clazz,
   ]}
   {style}
+  data-sveltekit-preload-data
 >
   <NavButton
     oncontextmenu={(e: Event) => {
diff --git a/src/lib/ui/shared/button/Button.svelte b/src/lib/ui/shared/button/Button.svelte
index 03b80084..8409fa8d 100644
--- a/src/lib/ui/shared/button/Button.svelte
+++ b/src/lib/ui/shared/button/Button.svelte
@@ -172,8 +172,6 @@
       font-size: var(--text-sm);
       gap: calc(var(--spacing) * 1.5);
 
-      transition: 75ms linear;
-
       @variant hover {
         cursor: pointer;
       }
diff --git a/src/lib/ui/sidebar/SidebarButton.svelte b/src/lib/ui/sidebar/SidebarButton.svelte
index 48b83447..31197846 100644
--- a/src/lib/ui/sidebar/SidebarButton.svelte
+++ b/src/lib/ui/sidebar/SidebarButton.svelte
@@ -14,8 +14,8 @@
   }
 
   let {
-    href = undefined,
-    icon = undefined,
+    href = '',
+    icon,
     class: clazz = '',
     customIcon,
     children,
-- 
2.51.2