Database overhall with knex.js, some things untested

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

@@ -1,14 +1,32 @@
 <script lang="ts">
     import SearchBar from '$lib/components/util/searchBar.svelte'
     import type { LayoutData } from './$types'
-    import NavTab from '$lib/components/navbar/navTab.svelte'
+    import NavTab from '$lib/components/util/navTab.svelte'
+    import MixTab from '$lib/components/util/mixTab.svelte'
     import MediaPlayer from '$lib/components/media/mediaPlayer.svelte'
     import { goto } from '$app/navigation'
     import IconButton from '$lib/components/util/iconButton.svelte'
 
     export let data: LayoutData
 
+    let mixData = [
+        {
+            name: 'J-Core Mix',
+            color: 'red',
+            id: 'SomeId',
+        },
+        {
+            name: 'Best of: 葉月ゆら',
+            color: 'purple',
+            id: 'SomeId',
+        },
+    ]
+
     $: currentPathname = data.url.pathname
+
+    let newMixNameInputOpen = false
+
+    // I'm thinking I might want to make /albums, /artists, and /playlists all there own routes and just wrap them in a (library) layout
 </script>
 
 <main id="grid-wrapper" class="h-full">
@@ -24,10 +42,23 @@
             </IconButton>
         </div>
     </nav>
-    <section id="sidebar" class="pt-4 font-light">
-        <NavTab label={'Home'} icon={'fa-solid fa-wave-square'} redirect={'/'} disabled={currentPathname === '/'} />
-        <NavTab label={'Playlists'} icon={'fa-solid fa-bars-staggered'} redirect={'/playlists'} disabled={/^\/playlists.*$/.test(currentPathname)} />
-        <NavTab label={'Library'} icon={'fa-solid fa-book'} redirect={'/library'} disabled={/^\/library.*$/.test(currentPathname)} />
+    <section id="sidebar" class="relative pt-4 text-sm font-normal">
+        <div class="mb-10">
+            <NavTab label="Home" icon="fa-solid fa-wave-square" redirect="/" disabled={currentPathname === '/'} />
+            <NavTab label="Playlists" icon="fa-solid fa-bars-staggered" redirect="/playlists" disabled={/^\/playlists.*$/.test(currentPathname)} />
+            <NavTab label="Library" icon="fa-solid fa-book" redirect="/library" disabled={/^\/library.*$/.test(currentPathname)} />
+        </div>
+        <h1 class="mb-1 flex h-5 items-center justify-between pl-6 text-sm text-neutral-400">
+            Your Mixes
+            <IconButton halo={true} on:click={() => (mixData = [{ name: 'New Mix', color: 'grey', id: 'SomeId' }, ...mixData])}>
+                <i slot="icon" class="fa-solid fa-plus" />
+            </IconButton>
+        </h1>
+        <div>
+            {#each mixData as mix}
+                <MixTab {...mix} />
+            {/each}
+        </div>
     </section>
     <section id="content-wrapper" class="no-scrollbar overflow-x-clip overflow-y-scroll pr-8">
         <slot />
@@ -39,8 +70,8 @@
     #grid-wrapper,
     #navbar {
         display: grid;
-        column-gap: 1rem;
-        grid-template-columns: 14rem auto 14rem;
+        column-gap: 3rem;
+        grid-template-columns: 12rem auto 12rem;
     }
 
     #grid-wrapper {
@@ -54,7 +85,4 @@
     #sidebar {
         grid-area: 2 / 1 / 3 / 2;
     }
-    #content-wrapper {
-        grid-area: 2 / 2 / 3 / 4;
-    }
 </style>