Trashed half my styling, this settings page is going to be a nightmare

src/lib/components/navbar/navTab.svelte

@@ -10,31 +10,33 @@
     export let disabled = false
     export let nav: NavTab
 
-    import { createEventDispatcher } from "svelte";
-    import { goto } from "$app/navigation";
+    import { createEventDispatcher } from 'svelte'
+    import { goto } from '$app/navigation'
 
     const dispatch = createEventDispatcher()
+
+    let button: HTMLButtonElement
 </script>
 
-<button
-    class="grid aspect-square w-full place-items-center transition-colors"
-    {disabled}
-    on:click={() => {
-        dispatch('click')
-        goto(nav.pathname)
-    }}
->
+<button bind:this={button} class="relative grid aspect-square w-full place-items-center transition-colors" {disabled} on:click={() => goto(nav.pathname)}>
     <span class="pointer-events-none flex flex-col gap-2 text-xs">
         <i class="{nav.icon} text-xl" />
         {nav.name}
     </span>
+    <div class="absolute left-0 top-1/2 h-0 w-[0.2rem] -translate-x-2 -translate-y-1/2 rounded-lg bg-white transition-all" />
 </button>
 
 <style>
+    button:disabled > div {
+        height: 80%;
+    }
     button:not(:disabled) {
         color: rgb(163 163, 163);
     }
     button:not(:disabled):hover {
         color: var(--lazuli-primary);
     }
-</style>
+    button:not(:disabled):hover > div {
+        height: 40%;
+    }
+</style>

src/lib/components/navbar/playlistTab.svelte

@@ -10,12 +10,24 @@
     export let disabled = false
     export let playlist: PlaylistTab
 
-    import { createEventDispatcher } from "svelte";
-    import { goto } from "$app/navigation";
+    import { createEventDispatcher } from 'svelte'
+    import { goto } from '$app/navigation'
 
     const dispatch = createEventDispatcher()
 
     let button: HTMLButtonElement
+
+    type ButtonCenter = {
+        x: number
+        y: number
+    }
+
+    const calculateCenter = (button: HTMLButtonElement): ButtonCenter => {
+        const rect = button.getBoundingClientRect()
+        const x = (rect.left + rect.right) / 2
+        const y = (rect.top + rect.bottom) / 2
+        return { x, y }
+    }
 </script>
 
 <button
@@ -23,22 +35,17 @@
     bind:this={button}
     class="relative aspect-square w-full rounded-lg bg-cover bg-center transition-all"
     style="background-image: url({playlist.thumbnail});"
+    on:mouseenter={() => dispatch('mouseenter', { ...calculateCenter(button), content: playlist.name })}
+    on:mouseleave={() => dispatch('mouseleave')}
     on:click={() => {
         dispatch('click')
         goto(`/library?playlist=${playlist.id}`)
     }}
 >
-    <span class="absolute left-full top-1/2 overflow-clip text-ellipsis whitespace-nowrap rounded-md bg-gray-900 px-2 py-1 text-sm origin-left transition-transform duration-75">{playlist.name}</span>
 </button>
 
 <style>
     button:not(:disabled):not(:hover) {
         filter: brightness(50%);
     }
-    span {
-        transform: translateX(0.75rem) translateY(-50%) scale(0);
-    }
-    button:hover > span {
-        transform: translateX(0.75rem) translateY(-50%) scale(100%);
-    }
-</style>
+</style>