SERIOUS messing around with the navbar

src/routes/(app)/+layout.svelte

@@ -1,56 +1,100 @@
 <script lang="ts">
     import { fly } from 'svelte/transition'
-    import { goto } from '$app/navigation'
+    import { goto, beforeNavigate } from '$app/navigation'
     import { pageWidth } from '$lib/stores'
-    import NavbarSide, { type NavTab } from '$lib/components/util/navbarSide.svelte'
-    import NavbarFoot from '$lib/components/util/navbarFoot.svelte'
-    import { page } from '$app/stores'
+    import type { LayoutData } from './$types'
+    import type { Tab } from './+layout'
+    import { onMount } from 'svelte'
 
-    let currentPathname = $page.url.pathname
-
-    const contentTabs: NavTab[] = [
-        {
-            pathname: '/',
-            name: 'Home',
-            icon: 'fa-solid fa-house',
-        },
-        {
-            pathname: '/user',
-            name: 'User',
-            icon: 'fa-solid fa-user', // This would be a cool spot for a user-uploaded pfp
-        },
-        {
-            pathname: '/search',
-            name: 'Search',
-            icon: 'fa-solid fa-search',
-        },
-        {
-            pathname: '/library',
-            name: 'Libray',
-            icon: 'fa-solid fa-bars-staggered',
-        },
-    ]
+    export let data: LayoutData
 
     const pageTransitionTime: number = 200
 
+    let currentTabIndex = -1
+
     type PageTransitionDirection = 1 | -1
     let directionMultiplier: PageTransitionDirection = 1
+
+    let indicatorBar: HTMLDivElement, tabList: HTMLDivElement
+
+    const inPathnameHeirarchy = (pathname: string, rootPathname: string): boolean => {
+        return (pathname.startsWith(rootPathname) && rootPathname !== '/') || (pathname === '/' && rootPathname === '/')
+    }
+
+    const calculateDirection = (newTab: Tab): void => {
+        const newTabIndex = data.tabs.findIndex((tab) => tab === newTab)
+        directionMultiplier = newTabIndex > currentTabIndex ? -1 : 1
+        currentTabIndex = newTabIndex
+    }
+
+    const navigate = (newPathname: string): void => {
+        const newTabIndex = data.tabs.findIndex((tab) => inPathnameHeirarchy(newPathname, tab.pathname))
+
+        if (newTabIndex < 0) indicatorBar.style.opacity = '0'
+
+        const newTab = data.tabs[newTabIndex]
+        if (!newTab?.button) return
+
+        const tabRec = newTab.button.getBoundingClientRect(),
+            listRect = tabList.getBoundingClientRect()
+
+        const shiftTop = () => (indicatorBar.style.top = `${tabRec.top - listRect.top}px`),
+            shiftBottom = () => (indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`)
+
+        if (directionMultiplier > 0) {
+            shiftTop()
+            setTimeout(shiftBottom, pageTransitionTime)
+        } else {
+            shiftBottom()
+            setTimeout(shiftTop, pageTransitionTime)
+        }
+
+        setTimeout(() => (indicatorBar.style.opacity = '100%'), pageTransitionTime + 300)
+    }
+
+    onMount(() => setTimeout(() => navigate(data.url.pathname))) // More stupid fucking non-blocking event loop shit
+    beforeNavigate(({ to }) => {
+        if (to) navigate(to.url.pathname)
+    })
 </script>
 
 {#if $pageWidth >= 768}
     <div id="content-grid" class="grid h-full grid-rows-1 gap-8 overflow-hidden">
-        <NavbarSide
-            navTabs={contentTabs}
-            {currentPathname}
-            transitionTime={pageTransitionTime}
-            on:navigate={(event) => {
-                event.detail.direction === 'up' ? (directionMultiplier = 1) : (directionMultiplier = -1)
-                currentPathname = event.detail.pathname
-                goto(currentPathname)
-            }}
-        />
+        <div id="sidebar" class="relative grid h-full grid-cols-1 gap-6 overflow-clip p-3 pt-12" bind:this={tabList}>
+            {#each data.tabs.filter((tab) => tab.type === 'nav') as nav, index}
+                <button
+                    class="navTab grid aspect-square w-14 place-items-center transition-colors"
+                    bind:this={data.tabs[index].button}
+                    disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)}
+                    on:click={() => {
+                        calculateDirection(nav)
+                        goto(nav.pathname)
+                    }}
+                >
+                    <span class="pointer-events-none flex flex-col gap-2 text-xs">
+                        <i class="{nav.icon} text-xl" />
+                        {nav.name}
+                    </span>
+                </button>
+            {/each}
+            <section class="no-scrollbar flex flex-col gap-4 overflow-y-scroll px-1">
+                {#each data.tabs.filter((tab) => tab.type === 'playlist') as playlist}
+                    <button
+                        title={playlist.name}
+                        disabled={new URLSearchParams(data.url.search).get('playlist') === new URLSearchParams(playlist.pathname.split('?')[1]).get('playlist')}
+                        class="playlistTab aspect-square w-full rounded-lg border-white bg-cover bg-center transition-all"
+                        style="background-image: url({playlist.icon});"
+                        on:click={() => {
+                            calculateDirection(playlist)
+                            goto(playlist.pathname)
+                        }}
+                    ></button>
+                {/each}
+            </section>
+            <div bind:this={indicatorBar} class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
+        </div>
         <section class="no-scrollbar relative overflow-y-scroll">
-            {#key currentPathname}
+            {#key data.url}
                 <div
                     in:fly={{ y: -50 * directionMultiplier, duration: pageTransitionTime, delay: pageTransitionTime }}
                     out:fly={{ y: 50 * directionMultiplier, duration: pageTransitionTime }}
@@ -66,7 +110,7 @@
     </div>
 {:else}
     <div class="h-full overflow-hidden">
-        {#key currentPathname}
+        {#key data.url.pathname}
             <section
                 in:fly={{ x: 200 * directionMultiplier, duration: pageTransitionTime, delay: pageTransitionTime }}
                 out:fly={{ x: -200 * directionMultiplier, duration: pageTransitionTime }}
@@ -77,8 +121,7 @@
         {/key}
         <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
             <!-- <MiniPlayer displayMode={'vertical'} /> -->
-            <NavbarFoot
-                navTabs={contentTabs}
+            <!-- <NavbarFoot
                 {currentPathname}
                 transitionTime={pageTransitionTime}
                 on:navigate={(event) => {
@@ -86,7 +129,7 @@
                     currentPathname = event.detail.pathname
                     goto(currentPathname)
                 }}
-            />
+            /> -->
         </footer>
     </div>
 {/if}
@@ -95,4 +138,16 @@
     #content-grid {
         grid-template-columns: max-content auto;
     }
+    #sidebar {
+        grid-template-rows: repeat(4, min-content) auto;
+    }
+    .navTab:not(:disabled) {
+        color: rgb(163 163, 163);
+    }
+    .navTab:not(:disabled):hover {
+        color: var(--lazuli-primary);
+    }
+    .playlistTab:not(:disabled):not(:hover) {
+        filter: brightness(50%);
+    }
 </style>

src/routes/(app)/+layout.ts

@@ -0,0 +1,55 @@
+import type { LayoutLoad } from './$types'
+
+export interface Tab {
+    type: 'nav' | 'playlist'
+    pathname: string
+    name: string
+    icon: string
+    button?: HTMLButtonElement
+}
+
+export const load: LayoutLoad = ({ url }) => {
+    const navTabs: Tab[] = [
+        {
+            type: 'nav',
+            pathname: '/',
+            name: 'Home',
+            icon: 'fa-solid fa-house',
+        },
+        {
+            type: 'nav',
+            pathname: '/user',
+            name: 'User',
+            icon: 'fa-solid fa-user', // This would be a cool spot for a user-uploaded pfp
+        },
+        {
+            type: 'nav',
+            pathname: '/search',
+            name: 'Search',
+            icon: 'fa-solid fa-search',
+        },
+        {
+            type: 'nav',
+            pathname: '/library',
+            name: 'Libray',
+            icon: 'fa-solid fa-bars-staggered',
+        },
+    ]
+
+    const playlistTabs: Tab[] = [
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=AD:TRANCE 10',
+            name: 'AD:TRANCE 10',
+            icon: 'https://www.diverse.direct/wp/wp-content/uploads/470_artwork.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=Fionaredica',
+            name: 'Fionaredica',
+            icon: 'https://f4.bcbits.com/img/a2436961975_10.jpg',
+        },
+    ]
+
+    return { tabs: navTabs.concat(playlistTabs) }
+}

src/routes/(app)/details/+page.svelte

@@ -0,0 +1 @@
+<h1>Add subroutes for artist, automatically generated playlists, albums, and songs</h1>

src/routes/+layout.server.ts

@@ -1,5 +1,12 @@
 import type { LayoutServerLoad } from './$types'
 
-export const load: LayoutServerLoad = ({ locals }) => {
-    return { user: locals.user }
+export const load: LayoutServerLoad = ({ url, locals }) => {
+    const { pathname, search } = url
+    return {
+        url: {
+            pathname,
+            search,
+        },
+        user: locals.user,
+    }
 }