Lots of layout changes

src/lib/components/utility/alert.svelte

@@ -30,7 +30,7 @@
 {#if show}
     <div in:fly={{ duration: 300, x: 500 }} out:slide={{ duration: 300, axis: 'y' }} class="py-1">
         <div class="flex gap-1 overflow-hidden rounded-md">
-            <div class="flex min-h-[3.5rem] w-full items-center px-4 py-2 {bgColors[alertType]}">
+            <div class="flex w-full items-center p-4 {bgColors[alertType]}">
                 {alertMessage}
             </div>
             <button class="w-16 {bgColors[alertType]}" on:click={() => triggerClose()}>

src/lib/components/utility/alertBox.svelte

@@ -27,4 +27,4 @@
     }
 </script>
 
-<div bind:this={alertBox} class="fixed right-4 top-4 z-50 max-h-screen w-full max-w-sm overflow-hidden"></div>
+<div bind:this={alertBox} class="fixed right-0 top-0 z-50 max-h-screen w-full max-w-sm overflow-hidden p-4"></div>

src/lib/components/utility/iconButton.svelte

@@ -1,15 +1,22 @@
 <script>
+    export let disabled = false
+
     import { createEventDispatcher } from 'svelte'
 
     const dispatch = createEventDispatcher()
 </script>
 
-<button class="relative grid aspect-square h-full place-items-center transition-transform duration-75 active:scale-90" on:click|preventDefault={() => dispatch('click')}>
+<button
+    class:disabled
+    class="relative grid aspect-square h-full place-items-center transition-transform duration-75 active:scale-90 {disabled ? 'text-neutral-600' : ''}"
+    on:click|preventDefault={() => dispatch('click')}
+    {disabled}
+>
     <slot name="icon" />
 </button>
 
 <style>
-    button::before {
+    button:not(.disabled)::before {
         content: '';
         width: 0;
         height: 0;
@@ -19,14 +26,14 @@
         transition-duration: 200ms;
         position: absolute;
     }
-    button:hover::before {
+    button:not(.disabled):hover::before {
         width: 130%;
         height: 130%;
     }
     button :global(> :first-child) {
         transition: color 200ms;
     }
-    button:hover :global(> :first-child) {
+    button:not(.disabled):hover :global(> :first-child) {
         color: var(--lazuli-primary);
     }
 </style>

src/lib/components/utility/navbar.svelte

@@ -1,38 +1,48 @@
 <script>
     import IconButton from './iconButton.svelte'
-    import SearchBar from './searchBar.svelte'
-    import { goto, afterNavigate } from '$app/navigation'
+    import { goto } from '$app/navigation'
     import { page } from '$app/stores'
-    import { fade } from 'svelte/transition'
-
-    let previousPage = null
-    afterNavigate(({ from }) => {
-        if (from) previousPage = from.url
-    })
 
     let windowY = 0
 </script>
 
 <svelte:window bind:scrollY={windowY} />
-<nav id="navbar" class="sticky left-0 top-0 isolate z-10 h-16">
-    <div class="flex h-full items-center justify-between gap-6 px-6">
-        <div class="w-full max-w-2xl">
-            <SearchBar />
-        </div>
-        <div class="flex h-full gap-4 py-4">
-            {#if previousPage && $page.url.pathname !== '/'}
-                <IconButton on:click={() => history.back()}>
-                    <i slot="icon" class="fa-solid fa-arrow-left text-xl" />
-                </IconButton>
-            {/if}
-            {#if $page.url.pathname !== '/'}
-                <IconButton on:click={() => goto('/')}>
-                    <i slot="icon" class="fa-solid fa-house text-xl" />
-                </IconButton>
-            {/if}
-        </div>
-    </div>
-    {#if windowY > 0}
-        <div transition:fade={{ duration: 150 }} id="navbar-background" class="absolute left-0 top-0 -z-10 h-full w-full bg-neutral-925" />
-    {/if}
+<nav class="sticky top-0 z-10 flex items-center justify-between px-8 duration-300" class:background-active={windowY > 0}>
+    <section class="flex h-full">
+        <IconButton>
+            <i slot="icon" class="fa-solid fa-gear" />
+        </IconButton>
+        {#if $page.url.pathname !== '/'}
+            <IconButton on:click={() => goto('/')}>
+                <i slot="icon" class="fa-solid fa-house" />
+            </IconButton>
+            <IconButton on:click={() => history.back()}>
+                <i slot="icon" class="fa-solid fa-arrow-left" />
+            </IconButton>
+        {/if}
+    </section>
+    <section class="flex h-full">
+        <IconButton>
+            <i slot="icon" class="fa-solid fa-magnifying-glass" />
+        </IconButton>
+        <IconButton>
+            <i slot="icon" class="fa-solid fa-user" />
+        </IconButton>
+    </section>
 </nav>
+
+<style>
+    nav {
+        height: 64px;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        font-size: 20px;
+        line-height: 28px;
+    }
+    nav.background-active {
+        background-color: rgb(10, 10, 10);
+    }
+    section {
+        gap: 24px;
+    }
+</style>

src/lib/components/utility/sidebar.svelte

@@ -0,0 +1,27 @@
+<script>
+    export let open = false
+
+    import IconButton from './iconButton.svelte'
+    import { slide } from 'svelte/transition'
+
+    export const toggleOpen = () => (open = !open)
+
+    let sidebar
+</script>
+
+<svelte:document
+    on:mouseup={(event) => {
+        if (sidebar && open) {
+            if (!sidebar.contains(event.target)) open = false
+        }
+    }}
+/>
+{#if open}
+    <section bind:this={sidebar} transition:slide={{ axis: 'x' }} class="fixed left-0 top-0 z-20 h-full w-full max-w-sm bg-slate-600 p-2" style="width: calc(100% - 4rem);">
+        <div class="float-right h-8">
+            <IconButton on:click={toggleOpen}>
+                <i slot="icon" class="fa-solid fa-x" />
+            </IconButton>
+        </div>
+    </section>
+{/if}