refactor: sticky side menu

greymass · Jan 21, 2025 · d6a6efa · d6a6efa
1 parent f62e774
commit d6a6efa
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 58 deletions.
diff --git a/src/lib/components/navigation/mobilenavigation.svelte b/src/lib/components/navigation/mobilenavigation.svelte
@@ -5,8 +5,8 @@
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import SideMenuContent from '$lib/components/navigation/sidemenu.svelte';
 	import Menu from 'lucide-svelte/icons/menu';
-	import UnicoveLogo from '$lib/assets/unicovelogo.svelte';
 	import type { NetworkState } from '$lib/state/network.svelte';
+	import Unicovelogo from '$lib/assets/unicovelogo.svelte';
 
 	const context = getContext<UnicoveContext>('state');
 
@@ -69,7 +69,7 @@
 	id="menu-open"
 	data-session={!!context.wharf.session}
 >
-	<UnicoveLogo small class="size-8 w-min place-self-center" />
+	<Unicovelogo small />
 	<Menu class="size-8 text-inherit" />
 </button>
 
@@ -80,27 +80,19 @@
 			class="fixed inset-0 z-50 bg-black/50 md:bg-transparent"
 			transition:fade={{ duration: 150 }}
 		></div>
-		<div
+		<nav
 			use:melt={$content}
-			class="
-			fixed
-			left-0
-			top-0
-			z-50
-			h-svh
-			bg-shark-950
-			shadow-lg
-			focus:outline-none
-			md:bg-transparent
-			md:shadow-none
-			"
+			class="fixed left-0 top-0 z-50 grid h-svh grid-rows-[auto_1fr] gap-8 bg-shark-950 px-8 pt-4 shadow-lg focus:outline-none md:bg-transparent md:shadow-none"
 			transition:fly={{
 				x: -350,
 				duration: 300,
 				opacity: 1
 			}}
 		>
+			<a href="/{network}" onclick={closeMenu} aria-label="Unicove Home">
+				<Unicovelogo wordmark />
+			</a>
 			<SideMenuContent callbackFn={closeMenu} {network} />
-		</div>
+		</nav>
 	</div>
 {/if}
diff --git a/src/lib/components/navigation/sidemenu.svelte b/src/lib/components/navigation/sidemenu.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import { page } from '$app/stores';
-
-	import UnicoveLogo from '$lib/assets/unicovelogo.svelte';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import type { NetworkState } from '$lib/state/network.svelte';
-
 	import * as m from '$lib/paraglide/messages';
 
 	const context = getContext<UnicoveContext>('state');
@@ -16,7 +13,7 @@
 		class?: string;
 	}
 
-	let { callbackFn, network, class: className }: Props = $props();
+	let { callbackFn, network }: Props = $props();
 
 	// Example: ['', 'en', 'eos', 'staking', 'withdraw']
 	let pathname = $derived($page.url.pathname.split('/'));
@@ -77,29 +74,23 @@
 	});
 </script>
 
-<menu class="grid h-svh grid-rows-[auto_1fr] justify-start gap-8 px-8 md:px-0 {className}">
-	<a href="/{network}" onclick={callbackFn} class="flex pt-4 md:hidden">
-		<UnicoveLogo wordmark class="fill-shark-100" />
-	</a>
-
-	<nav class="flex flex-col gap-2 text-nowrap text-base font-medium text-white">
-		{#each destinations as option}
-			<a
-				href={option.href}
-				class="flex h-12 select-none items-center rounded-lg leading-snug transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-solar-500"
-				class:opacity-50={!option.active}
-				class:opacity-100={option.active}
-				aria-current={!!option.active}
-				onclick={callbackFn}
+<menu class="flex flex-col gap-2 text-nowrap text-base font-medium text-white">
+	{#each destinations as option}
+		<a
+			href={option.href}
+			class="flex h-12 select-none items-center rounded-lg leading-snug transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-solar-500"
+			class:opacity-50={!option.active}
+			class:opacity-100={option.active}
+			aria-current={!!option.active}
+			onclick={callbackFn}
+		>
+			<span
+				class="border-b-2 pb-1"
+				class:border-transparent={!option.active}
+				class:border-skyBlue-500={option.active}
 			>
-				<span
-					class="border-b-2 pb-1"
-					class:border-transparent={!option.active}
-					class:border-skyBlue-500={option.active}
-				>
-					{option.text}
-				</span>
-			</a>
-		{/each}
-	</nav>
+				{option.text}
+			</span>
+		</a>
+	{/each}
 </menu>
diff --git a/src/routes/[network]/+layout.svelte b/src/routes/[network]/+layout.svelte
@@ -17,6 +17,7 @@
 	import UnicoveLogo from '$lib/assets/unicovelogo.svelte';
 	import Search from '$lib/components/search/input.svelte';
 	import { SettingsState } from '$lib/state/settings.svelte.js';
+	import Unicovelogo from '$lib/assets/unicovelogo.svelte';
 
 	let { children, data } = $props();
 
@@ -183,19 +184,22 @@
 	md:h-auto
 	md:min-h-svh
 	md:grid-cols-12
-	md:grid-rows-[min-content_minmax(0,1fr)]
+	md:grid-rows-[min-content_auto_minmax(0,1fr)]
 	md:gap-x-4
 	"
 >
-	<header class="col-span-full flex h-12 items-center justify-between">
-		<!-- Larger breakpoints only	 -->
-		<a
-			href="/{data.network}"
-			class="hidden w-min place-self-center rounded-sm focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-solar-500 md:block"
-		>
-			<UnicoveLogo small />
-		</a>
+	<aside
+		class="relative col-start-1 col-end-3 row-span-full row-start-1 hidden h-full grid-rows-subgrid md:grid"
+	>
+		<nav class="sticky top-4 row-span-2 grid max-h-svh grid-rows-subgrid content-start">
+			<a href="/{data.network}" class="grid h-12 items-center" aria-label="home">
+				<Unicovelogo small class="items-start" />
+			</a>
+			<SideMenuContent network={data.network} />
+		</nav>
+	</aside>
 
+	<header class="col-span-full row-start-1 flex h-12 items-center justify-between">
 		<MobileNavigation network={data.network} />
 
 		<div
@@ -207,12 +211,8 @@
 		</div>
 	</header>
 
-	<aside class="relative row-start-2 hidden h-full md:block">
-		<SideMenuContent class="" network={data.network} />
-	</aside>
-
 	<main
-		class="col-span-full col-start-1 row-start-2 grid grid-cols-subgrid content-start gap-x-4 *:col-span-full md:col-start-3 md:col-end-13 md:px-0 lg:col-end-12"
+		class="col-span-full col-start-1 row-span-full row-start-2 grid grid-cols-subgrid content-start gap-x-4 *:col-span-full md:col-start-3 md:col-end-13 md:px-0 lg:col-end-12"
 	>
 		{@render children()}
 	</main>