jcreek/SvelteKitSaasBoilerplate
1
0
Fork 0
mirror of https://github.com/jcreek/SvelteKitSaasBoilerplate.git synced 2026-07-15 12:03:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(#35): use dropdown component for user/signin

Browse Source
This commit is contained in:
OllyNicholass
2024-10-22 22:04:19 +01:00
parent d6baf11a7c
commit a16959d7ba
3 changed files with 29 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Dropdown.svelte
+3 -2
View File
@@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let indicator: boolean = false; export let indicator: boolean = false;
export let posRight: boolean = false;
let isOpen = false; let isOpen = false;
let dropdown: HTMLDivElement; let dropdown: HTMLDivElement;
@@ -27,7 +28,7 @@
}); });
</script> </script>
<div bind:this={dropdown}> <div bind:this={dropdown} class="relative">
<div class="dropdown-title"> <div class="dropdown-title">
<button class="flex" on:click={() => isOpen = !isOpen}> <button class="flex" on:click={() => isOpen = !isOpen}>
{#if indicator} {#if indicator}
@@ -36,7 +37,7 @@
<slot name="dropdown"></slot> <slot name="dropdown"></slot>
</button> </button>
</div> </div>
<ul class:flex={isOpen} class:hidden={!isOpen} class="absolute rounded-box w-52 shadow z-[1] menu p-2 bg-base-100 text-base-content"> <ul class:flex={isOpen} class:hidden={!isOpen} class:right-0={posRight} class="absolute rounded-box min-w-52 shadow z-[1] menu p-2 bg-base-100 text-base-content">
<slot /> <slot />
</ul> </ul>
</div> </div>
src/lib/components/Nav.svelte
+7 -13
View File
@@ -3,6 +3,7 @@
import MagicLink from "./MagicLink.svelte"; import MagicLink from "./MagicLink.svelte";
import NavLinks from "./NavLinks.svelte"; import NavLinks from "./NavLinks.svelte";
import SignOut from "./SignOut.svelte"; import SignOut from "./SignOut.svelte";
import Dropdown from "./Dropdown.svelte";
import { basket, type Basket } from '$lib/stores/basket.js'; import { basket, type Basket } from '$lib/stores/basket.js';
import { onDestroy } from "svelte"; import { onDestroy } from "svelte";
@@ -73,8 +74,9 @@
</a> </a>
<!-- User Account Dropdown --> <!-- User Account Dropdown -->
<details class="dropdown dropdown-end"> <Dropdown posRight>
<summary tabindex="0" role="button" class="btn btn-ghost btn-circle avatar"> <div slot="dropdown">
<div class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full"> <div class="w-10 rounded-full">
{#if session?.user} {#if session?.user}
<div class="user-circle text-primary-content border-primary-content"> <div class="user-circle text-primary-content border-primary-content">
@@ -90,25 +92,17 @@
</svg> </svg>
{/if} {/if}
</div> </div>
</summary> </div>
</div>
{#if session?.user} {#if session?.user}
<ul
tabindex="-1"
class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
>
<li><a href="/account">Account</a></li> <li><a href="/account">Account</a></li>
<li><a href="/settings">Settings</a></li> <li><a href="/settings">Settings</a></li>
<li><SignOut {supabase} /></li> <li><SignOut {supabase} /></li>
</ul>
{:else} {:else}
<div
class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 text-base-content rounded-box min-w-[13rem] w-auto"
>
<MagicLink {supabase} /> <MagicLink {supabase} />
</div>
{/if} {/if}
</details> </Dropdown>
</div> </div>
</div> </div>
</nav> </nav>
src/lib/components/NavLinks.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
<ul class="flex space-x-4"> <ul class="flex space-x-4">
{#each links as link} {#each links as link}
<li class="relative"> <li>
{#if link.isParent} {#if link.isParent}
<NavLinkParent text={link.text} children={link.children} /> <NavLinkParent text={link.text} children={link.children} />
{:else} {:else}