Redoing account section

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

@@ -1,6 +0,0 @@
-/** @type {import('./$types').LayoutLoad} */
-export const load = ({ url }) => {
-    return {
-        url: url.pathname,
-    }
-}

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

@@ -11,14 +11,18 @@
             header: 'Home',
             icon: 'fa-solid fa-house',
         },
-        '/library': {
-            header: 'Libray',
-            icon: 'fa-solid fa-bars-staggered',
+        '/account': {
+            header: data.username,
+            icon: 'fa-solid fa-user',
         },
         '/search': {
             header: 'Search',
             icon: 'fa-solid fa-search',
         },
+        '/library': {
+            header: 'Libray',
+            icon: 'fa-solid fa-bars-staggered',
+        },
     }
 
     const pageTransitionTime = 200
@@ -71,17 +75,21 @@
 
 {#if $pageWidth >= 768}
     <div id="content-grid" class="h-full overflow-hidden">
-        <section class="relative mr-4 flex h-full flex-col gap-6 rounded-lg px-3 py-6" bind:this={tabList}>
+        <section class="relative mr-10 flex h-full flex-col gap-6 rounded-lg px-3 py-12" bind:this={tabList}>
             {#each Object.entries(contentTabs) as [page, tabData]}
                 {#if data.url === page}
-                    <button bind:this={activeTab} class="pointer-events-none aspect-square w-14 text-white transition-colors" disabled="true">
-                        <i class="{tabData.icon} text-xl" />
-                        <span class="text-xs">{tabData.header}</span>
+                    <button bind:this={activeTab} class="pointer-events-none grid aspect-square w-14 place-items-center text-white transition-colors" disabled="true">
+                        <span class="text-xs">
+                            <i class="{tabData.icon} mb-2 text-xl" />
+                            {tabData.header}
+                        </span>
                     </button>
                 {:else}
-                    <button class="aspect-square w-14 text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
-                        <i class="{tabData.icon} text-xl" />
-                        <span class="text-xs">{tabData.header}</span>
+                    <button class="grid aspect-square w-14 place-items-center text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
+                        <span class="text-xs">
+                            <i class="{tabData.icon} mb-2 text-xl" />
+                            {tabData.header}
+                        </span>
                     </button>
                 {/if}
             {/each}

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

@@ -0,0 +1,30 @@
+<script>
+    import IconButton from '$lib/components/utility/iconButton.svelte'
+
+    export let data
+</script>
+
+<main class="flex flex-col gap-8">
+    <section class="flex items-center justify-between text-xl">
+        <div class="flex items-center gap-4">
+            <div class="grid aspect-square h-36 place-items-center rounded-full bg-neutral-800">
+                <i class="fa-solid fa-user text-6xl text-neutral-400" />
+            </div>
+            <div>
+                <div>{data.username}</div>
+                <div class="text-base text-neutral-400">Other info about the user</div>
+            </div>
+        </div>
+        <div class="flex h-12 gap-4">
+            <IconButton>
+                <i slot="icon" class="fa-solid fa-gear" />
+            </IconButton>
+            <IconButton>
+                <i slot="icon" class="fa-solid fa-right-from-bracket" />
+            </IconButton>
+        </div>
+    </section>
+    <section>
+        <div>This is where things like history would go</div>
+    </section>
+</main>