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

feat(#2): Begin replacing navbar

Browse Source
This commit is contained in:
Josh Creek
2024-06-04 20:10:32 +01:00
parent 79715504e7
commit e4438d552b
2 changed files with 22 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/NavLinks.svelte
+17
View File
@@ -0,0 +1,17 @@
<script lang="ts">
export let isMobile: boolean = false;
</script>
<li><a href="/products">Products</a></li>
<li class={isMobile ? '' : 'dropdown'}>
<div tabindex="0" role="button" class="">Parent</div>
<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 SignOut from '$lib/components/SignOut.svelte';
import CookieConsent from '$lib/components/CookieConsent.svelte';
import NavLinks from '$lib/components/NavLinks.svelte';
export let data;
let { supabase, session } = data;
@@ -62,7 +63,7 @@
</svelte:head>
<header>
<div class="navbar bg-primary text-primary-content">
<nav class="navbar bg-primary text-primary-content">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@@ -83,33 +84,14 @@
<ul
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>
<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>
<NavLinks isMobile={true} />
</ul>
</div>
<a href="/" class="btn btn-ghost text-xl">SvelteKit SaaS Boilerplate</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="/products">Products</a></li>
<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>
<NavLinks isMobile={false} />
</ul>
</div>
<div class="navbar-end">
@@ -170,7 +152,7 @@
{/if}
</div>
</div>
</div>
</nav>
</header>
<main>