jcreek/SvelteKitSaasBoilerplate
1
0
Fork 0
mirror of https://github.com/jcreek/SvelteKitSaasBoilerplate.git synced 2026-07-13 02:53:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #16 from jcreek/2-replace-navbar-with-a-better-one

Browse Source 
feat(#2): Begin replacing navbar
This commit is contained in:
Josh Creek
2024-06-18 19:53:03 +01:00
committed by GitHub
parent 1e6158b5eb ca40b8403a
commit addaeeee84
2 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/NavLinks.svelte
+23
View File
@@ -0,0 +1,23 @@
<script lang="ts">
export let isMobile: boolean = false;
</script>
<li><a href="/products">Products</a></li>
<li class={isMobile ? '' : 'dropdown'}>
{#if isMobile}
<div tabindex="0" role="button" class="">Parent</div>
{:else}
<details>
<summary>Parent</summary>
</details>
{/if}
<ul
class="{isMobile
? ''
: 'dropdown-content rounded-box w-52 shadow'} z-[1] menu p-2 bg-base-100 text-base-content"
>
<li><a href="/">Submenu 1</a></li>
<li><a href="/">Submenu 2</a></li>
</ul>
</li>
<li><a href="/">Item 3</a></li>
src/routes/+layout.svelte
+5 -23
View File
@@ -8,6 +8,7 @@
import SignIn from '$lib/components/SignIn.svelte'; import SignIn from '$lib/components/SignIn.svelte';
import SignOut from '$lib/components/SignOut.svelte'; import SignOut from '$lib/components/SignOut.svelte';
import CookieConsent from '$lib/components/CookieConsent.svelte'; import CookieConsent from '$lib/components/CookieConsent.svelte';
import NavLinks from '$lib/components/NavLinks.svelte';
export let data; export let data;
let { supabase, session } = data; let { supabase, session } = data;
@@ -62,7 +63,7 @@
</svelte:head> </svelte:head>
<header> <header>
<div class="navbar bg-primary text-primary-content"> <nav class="navbar bg-primary text-primary-content">
<div class="navbar-start"> <div class="navbar-start">
<div class="dropdown"> <div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden"> <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@@ -83,33 +84,14 @@
<ul <ul
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 text-base-content rounded-box w-52" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 text-base-content rounded-box w-52"
> >
<li><a href="/products">Products</a></li> <NavLinks isMobile={true} />
<li>
<!-- svelte-ignore a11y-missing-attribute -->
<a>Parent</a>
<ul class="p-2">
<li><a href="/">Submenu 1</a></li>
<li><a href="/">Submenu 2</a></li>
</ul>
</li>
<li><a href="/">Item 3</a></li>
</ul> </ul>
</div> </div>
<a href="/" class="btn btn-ghost text-xl">SvelteKit SaaS Boilerplate</a> <a href="/" class="btn btn-ghost text-xl">SvelteKit SaaS Boilerplate</a>
</div> </div>
<div class="navbar-center hidden lg:flex"> <div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<li><a href="/products">Products</a></li> <NavLinks isMobile={false} />
<li>
<details>
<summary>Parent</summary>
<ul class="p-2 text-base-content">
<li><a href="/">Submenu 1</a></li>
<li><a href="/">Submenu 2</a></li>
</ul>
</details>
</li>
<li><a href="/">Item 3</a></li>
</ul> </ul>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
@@ -170,7 +152,7 @@
{/if} {/if}
</div> </div>
</div> </div>
</div> </nav>
</header> </header>
<main> <main>