show space name on hover in primary nav (#129) (#136)

Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>

src/lib/components/PrimaryNavItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import {page} from "$app/stores"
   import Button from "@lib/components/Button.svelte"
 
@@ -13,32 +14,35 @@
   } = $props()
 
   const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
+
+  const wrapperClass = $derived(
+    cx("relative h-14 w-14 p-1", {
+      "tooltip tooltip-right": title,
+    }),
+  )
+
+  const innerClass = $derived(
+    cx(
+      "flex h-full w-full cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-base-300",
+      restProps.class,
+    ),
+  )
 </script>
 
-{#if onclick}
-  <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
+<div class={wrapperClass} data-tip={title}>
+  {#if onclick}
+    <Button {onclick} class={innerClass}>
       {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
-    </div>
-  </Button>
-{:else}
-  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
+    </Button>
+  {:else}
+    <a {href} class={innerClass}>
       {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
-    </div>
-  </a>
-{/if}
+    </a>
+  {/if}
+</div>

src/lib/components/SecondaryNavItem.svelte

@@ -21,37 +21,40 @@
 </style>
 
 <script lang="ts">
+  import cx from "classnames"
   import {fade} from "@lib/transition"
   import {page} from "$app/stores"
 
-  const {children, href = "", notification = false, replaceState = false, ...restProps} = $props()
+  const {
+    children,
+    href = "",
+    title = "",
+    notification = false,
+    replaceState = false,
+    ...restProps
+  } = $props()
 
   const active = $derived($page.url.pathname === href)
+  const wrapperClass = $derived(
+    cx(restProps.class, "relative flex flex-shrink-0 items-center gap-3 text-left transition-all", {
+      "hover:bg-base-100 hover:text-base-content": true,
+      "text-base-content bg-base-100": active,
+      "tooltip tooltip-right": title,
+    }),
+  )
 </script>
 
 {#if href}
-  <a
-    {href}
-    {...restProps}
-    data-sveltekit-replacestate={replaceState}
-    class="{restProps.class} relative flex flex-shrink-0 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}>
+  <a {href} {...restProps} data-tip={title} data-sveltekit-replacestate={replaceState} class={wrapperClass}>
     {@render children?.()}
     {#if notification}
-      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
-      </div>
+      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
   </a>
 {:else}
-  <button
-    {...restProps}
-    class="{restProps.class} relative flex flex-shrink-0 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}>
+  <button {...restProps} data-tip={title} class={wrapperClass}>
     {#if notification}
-      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
-      </div>
+      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
     {@render children?.()}
   </button>