bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-26 17:11:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: resolve responsive navigation design

Browse source
This commit is contained in:
Bart van der Braak 2023-08-11 10:13:47 +02:00
parent a29ccf0dc2
commit 067faac0ae
2 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/lib/components/Header.svelte
View file

@ -5,8 +5,7 @@
import LinkedIn from './icons/LinkedIn.svelte';
import routes from '$lib/routes';
import { page } from '$app/stores';
$: classesActive = (href: string) =>
href === $page.url.pathname ? 'underline decoration-indigo-500' : '';
$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
export let progress: number;
function drawerOpen(): void {
@ -17,15 +16,20 @@
<AppBar background="">
<svelte:fragment slot="lead">
<a href="/" class="md:ml-4 ml-1">
<img src="./logo@3x.png" alt="hellob.art logo" class="h-8" />
<img src="./logo@3x.png" alt="hellob.art logo" class="max-h-8" />
</a>
</svelte:fragment>
<nav>
<nav class="hidden md:block">
<ul class="flex">
{#each routes as route}
<li class="mx-2">
<a class={classesActive(route.url)} href={route.url}>
<a
class={`${classesActive(
route.url
)} decoration-indigo-500 hover:underline hover:decoration-indigo-300`}
href={route.url}
>
<span class="flex-auto">{route.label}</span>
</a>
</li>{/each}
@ -37,7 +41,7 @@
href="https://linkedin.com/in/bartvdbraak"
target="_blank"
rel="external"
class="btn-icon btn-icon-md hover:variant-soft-primary"
class="btn-icon btn-icon-sm hover:variant-soft-primary"
>
<LinkedIn />
<span class="sr-only">LinkedIn Profile of Bart van der Braak</span>
@ -46,15 +50,15 @@
href="https://github.com/bartvdbraak"
target="_blank"
rel="external"
class="btn-icon btn-icon-md hover:variant-soft-primary"
class="btn-icon btn-icon-sm hover:variant-soft-primary"
>
<GitHub />
<span class="sr-only">GitHub Profile of Bart van der Braak</span>
</a>
<LightSwitch />
<LightSwitch bgLight="bg-white" fillLight="fill-white" width="w-8" height="h-4" />
<button
aria-label="Toggle navigation menu"
class="btn btn-sm mr-4 md:hidden"
class="btn-icon btn-icon-sm hover:variant-soft-primary md:hidden"
on:click={drawerOpen}
>
<Hamburger />

1
src/routes/+layout.svelte
View file

@ -39,6 +39,7 @@
<Drawer width="w-[280px] md:w-[200px]" position="right" bgDrawer="bg-gray-200 dark:bg-gray-800">
<div class="p-5 w-full mx-auto">
<h2 class="text-3xl font-bold mb-12 z-10 text-center">Pages</h2>
<Navigation {routes} />
</div>
</Drawer>