bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-06-29 07:49:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: distinctive re-use of site header and navbar rename

Browse source
This commit is contained in:
Bart van der Braak 2024-01-19 02:57:19 +01:00
parent 3bb7737625
commit f9dfaa2fd2
13 changed files with 188 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/lib/components/site/index.ts
View file

@ -1,5 +1,6 @@
export { default as Metadata } from './metadata.svelte';
export { default as SiteFooter } from './site-footer.svelte';
export { default as SiteNavBar } from './site-navbar.svelte';
export { default as SiteHeader } from './site-header.svelte';
export { default as TailwindIndicator } from './tailwind-indicator.svelte';
export { default as ModeToggle } from './mode-toggle.svelte';

58
src/lib/components/site/site-header.svelte
View file

@ -1,52 +1,12 @@
<script lang="ts">
import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site';
import { siteConfig } from '$lib/config/site';
import { cn } from '$lib/utils';
import { buttonVariants } from '../ui/button';
import * as PageHeader from './page-header';
export let title: string, subTitle: string;
</script>
<header
class="sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
<div class="container flex h-14 items-center">
<a href="/" class="mr-6 flex items-center space-x-2">
<span class="sr-only">Logo (return home)</span>
<Icons.logo />
</a>
<MainNav />
<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
<nav class="flex">
<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
<div
class={cn(
buttonVariants({
size: 'sm',
variant: 'ghost'
}),
'h-9 w-9 px-0'
)}
>
<Icons.gitHub class="h-4 w-4" />
<span class="sr-only">GitHub</span>
</div>
</a>
<a href={siteConfig.links.linkedIn} target="_blank" rel="noreferrer">
<div
class={cn(
buttonVariants({
size: 'sm',
variant: 'ghost'
}),
'h-9 w-9 px-0'
)}
>
<Icons.linkedIn class="h-4 w-4" />
<span class="sr-only">LinkedIn</span>
</div>
</a>
<ModeToggle />
</nav>
</div>
<MobileNav />
</div>
</header>
<PageHeader.Root class="pb-8">
<PageHeader.Heading>{title}</PageHeader.Heading>
<PageHeader.Description>
{subTitle}
</PageHeader.Description>
<slot />
</PageHeader.Root>

52
src/lib/components/site/site-navbar.svelte Normal file
View file

@ -0,0 +1,52 @@
<script lang="ts">
import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site';
import { siteConfig } from '$lib/config/site';
import { cn } from '$lib/utils';
import { buttonVariants } from '../ui/button';
</script>
<header
class="sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
<div class="container flex h-14 items-center">
<a href="/" class="mr-6 flex items-center space-x-2">
<span class="sr-only">Logo (return home)</span>
<Icons.logo />
</a>
<MainNav />
<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
<nav class="flex">
<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
<div
class={cn(
buttonVariants({
size: 'sm',
variant: 'ghost'
}),
'h-9 w-9 px-0'
)}
>
<Icons.gitHub class="h-4 w-4" />
<span class="sr-only">GitHub</span>
</div>
</a>
<a href={siteConfig.links.linkedIn} target="_blank" rel="noreferrer">
<div
class={cn(
buttonVariants({
size: 'sm',
variant: 'ghost'
}),
'h-9 w-9 px-0'
)}
>
<Icons.linkedIn class="h-4 w-4" />
<span class="sr-only">LinkedIn</span>
</div>
</a>
<ModeToggle />
</nav>
</div>
<MobileNav />
</div>
</header>