84 lines
2.6 KiB
Svelte
84 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import Avatar from './Avatar.svelte';
|
|
import AlignLeft from './Icons/AlignLeft.svelte';
|
|
import X from './Icons/X.svelte';
|
|
|
|
export let isOpen: boolean;
|
|
|
|
$: user = $page.data.user;
|
|
$: segments = $page.url.pathname.slice(1).split('/');
|
|
$: breadcrumb = segments.map((segment, index) => {
|
|
return { name: segment, href: '/' + segments.slice(0, index + 1).join('/') };
|
|
}) as { name: string; href: string }[];
|
|
|
|
function handleToggle() {
|
|
isOpen = !isOpen;
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary px-8 py-4"
|
|
>
|
|
<div class="flex flex-row items-center space-x-2 sm:space-x-0">
|
|
<div class="flex items-center">
|
|
<button on:click={handleToggle} class="block sm:hidden">
|
|
{#if isOpen}
|
|
<X class="h-5 w-5 text-muted" />
|
|
{:else}
|
|
<AlignLeft class="h-5 w-5 text-muted" />
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
{#if !isOpen && segments.length}
|
|
<div class="flex items-center justify-center capitalize text-highlight-secondary">
|
|
{#each breadcrumb as segment}
|
|
{@const last = segment === breadcrumb[breadcrumb.length - 1]}
|
|
<a class="hover:underline hover:text-primary" href={segment.href}>
|
|
{segment.name}
|
|
</a>
|
|
{#if !last}
|
|
<span class="mx-1 text-highlight-secondary">/</span>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
<!-- {#if !isOpen && segment}
|
|
<div class="flex items-center justify-center capitalize text-highlight-secondary">
|
|
{segment}
|
|
</div>
|
|
{/if} -->
|
|
</div>
|
|
<div class="flex flex-row items-center gap-2">
|
|
<Avatar />
|
|
{user?.pseudo}
|
|
<!-- {!isLoading && me ? (
|
|
<Popover
|
|
open={isMenuOpen}
|
|
onOpenChange={setIsMenuOpen}
|
|
trigger={
|
|
<button class="mx-auto flex items-center gap-2">
|
|
<AvatarComponent name={me.pseudo} src={me.avatar} class="h-9 w-9" />
|
|
<span>{me?.pseudo}</span>
|
|
</button>
|
|
}
|
|
>
|
|
<nav class="flex w-32 flex-col gap-2">
|
|
<button
|
|
class="flex items-center gap-1 p-2 text-destructive hover:bg-destructive/10"
|
|
onClick={() => router.push('/logout')}
|
|
>
|
|
Se déconnecter
|
|
</button>
|
|
</nav>
|
|
</Popover>
|
|
) : (
|
|
<div class="animate-pulse">
|
|
<div class="flex items-center gap-2">
|
|
<div class="h-9 w-9 rounded-full bg-highlight-primary" />
|
|
<div class="h-4 w-14 rounded-full bg-highlight-primary" />
|
|
</div>
|
|
</div>
|
|
)} -->
|
|
</div>
|
|
</div>
|