Add notification badges

src/lib/components/PrimaryNavItem.svelte

@@ -5,6 +5,7 @@
   export let title = ""
   export let href = ""
   export let prefix = ""
+  export let notification = false
 
   $: active = $page.url?.pathname?.startsWith(prefix || href || "bogus")
 </script>
@@ -16,6 +17,9 @@
       class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>
+      {#if !active && notification}
+        <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary" />
+      {/if}
       <slot />
     </div>
   </a>
@@ -26,6 +30,9 @@
       class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>
+      {#if !active && notification}
+        <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary" />
+      {/if}
       <slot />
     </div>
   </Button>

src/lib/components/SecondaryNavItem.svelte

@@ -22,9 +22,11 @@
 
 <script lang="ts">
   import cx from "classnames"
+  import {fade} from "@lib/transition"
   import {page} from "$app/stores"
 
   export let href: string = ""
+  export let notification = false
 
   $: active = $page.url.pathname === href
 </script>
@@ -36,11 +38,14 @@
     on:click
     class={cx(
       $$props.class,
-      "flex items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content",
+      "relative flex items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content",
     )}
     class:text-base-content={active}
     class:bg-base-100={active}>
     <slot />
+    {#if !active && notification}
+      <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade />
+    {/if}
   </a>
 {:else}
   <button
@@ -48,10 +53,13 @@
     on:click
     class={cx(
       $$props.class,
-      "flex w-full items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content",
+      "relative flex w-full items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content",
     )}
     class:text-base-content={active}
     class:bg-base-100={active}>
+    {#if !active && notification}
+      <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade />
+    {/if}
     <slot />
   </button>
 {/if}