LukeParke/Sveltey
1
0
Fork 0
mirror of https://github.com/LukeHagar/Sveltey.git synced 2025-12-06 04:21:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

really happy with the mobile sizing all the way down to good old folds

Browse Source
This commit is contained in:
Luke Hagar
2025-06-02 21:35:44 -05:00
parent d3678aa41a
commit 6b7186a9b2
2 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/components/Header.svelte
View File

@@ -36,14 +36,14 @@
<!-- Main Navigation -->
<div class="hidden items-center gap-2 md:flex">
<a href="/" class={getNavClasses('/')} aria-label="Go to homepage">
<Home class="size-4" aria-hidden="true" />
<span>Home</span>
</a>
<Home class="size-4" aria-hidden="true" />
<span>Home</span>
</a>
<a href="/pricing" class={getNavClasses('/pricing')} aria-label="View pricing plans">
<DollarSign class="size-4" aria-hidden="true" />
<span>Pricing</span>
</a>
<DollarSign class="size-4" aria-hidden="true" />
<span>Pricing</span>
</a>
<a href="/blog" class={getNavClasses('/blog')} aria-label="Read our blog">
<BookOpen class="size-4" aria-hidden="true" />
@@ -51,7 +51,11 @@
</a>
{#if session}
<a href="/app/dashboard" class={getNavClasses('/app/dashboard')} aria-label="Go to dashboard">
<a
href="/app/dashboard"
class={getNavClasses('/app/dashboard')}
aria-label="Go to dashboard"
>
<LayoutDashboard class="size-4" aria-hidden="true" />
<span>Dashboard</span>
</a>
@@ -60,7 +64,7 @@
</div>
<!-- Right side - User actions and theme switcher -->
<div class="flex gap-1 sm:gap-3">
<div class="flex gap-1 md:gap-3">
<ThemeSwitch />
{#if session}
@@ -91,14 +95,47 @@
</div>
{:else}
<!-- Authentication Buttons -->
<div class="flex items-center gap-1 sm:gap-3">
<div class="hidden md:flex items-center gap-1 md:gap-3 ">
<a href="/auth" class={getNavClasses('/auth')} aria-label="Sign in or register">
<User class="size-4" aria-hidden="true" />
<span class="hidden sm:inline">Sign In / Register</span>
</a>
<User class="size-4" aria-hidden="true" />
<span class="">Sign In / Register</span>
</a>
</div>
{/if}
</div>
</div>
<div class="block pt-4 md:hidden">
<nav class="flex flex-wrap items-center justify-center gap-4">
<a href="/" class={getNavClasses('/')} aria-label="Go to homepage">
<Home class="size-4" aria-hidden="true" />
Home
</a>
<a href="/pricing" class={getNavClasses('/pricing')} aria-label="View pricing plans">
<DollarSign class="size-4" aria-hidden="true" />
Pricing
</a>
<a href="/blog" class={getNavClasses('/blog')} aria-label="Read our blog">
<BookOpen class="size-4" aria-hidden="true" />
Blog
</a>
<div class="flex justify-center gap-2">
{#if session}
<a
href="/app/dashboard"
class={getNavClasses('/app/dashboard')}
aria-label="Go to dashboard"
>
<LayoutDashboard class="size-4" aria-hidden="true" />
Dashboard
</a>
{:else}
<a href="/auth" class={getNavClasses('/auth')} aria-label="Sign in or register">
<User class="size-4" aria-hidden="true" />
Sign In / Register
</a>
{/if}
</div>
</nav>
</div>
</nav>
</header>

8
src/routes/+layout.svelte
View File

@@ -145,14 +145,14 @@
class="border-surface-300-600-token mt-8 flex flex-col items-center justify-between border-t pt-8 md:flex-row"
>
<p class="text-sm opacity-50">© 2025 Sveltey. All rights reserved.</p>
<div class="mt-4 flex items-center gap-4 md:mt-0">
<div class="mt-4 flex flex-wrap items-center justify-center gap-4 md:mt-0">
<span class="text-sm opacity-50">Built with</span>
<div class="flex items-center gap-2 text-sm opacity-75">
<span>SvelteKit</span>
<a class="anchor" href="https://kit.svelte.dev/" target="_blank">SvelteKit</a>
<span>•</span>
<span>Supabase</span>
<a class="anchor" href="https://supabase.com/" target="_blank">Supabase</a>
<span>•</span>
<span>Skeleton UI</span>
<a class="anchor" href="https://skeleton.dev/" target="_blank">Skeleton UI</a>
</div>
</div>
</div>