Skip to content
Snippets Groups Projects
Commit 4a8e653e authored by Toufic Batache's avatar Toufic Batache Committed by Emmanuel Raviart
Browse files

Migrate headless ui to bits ui

parent e21eb868
Branches
Tags
1 merge request!273Passage à Svelte 5
Show whitespace changes
Inline Side-by-side
src/lib/components/NavBar.svelte
+ 176
− 142
View file @ 4a8e653e
<script lang="ts">
// import {
// Menu,
// MenuButton,
// MenuItem,
// MenuItems,
// } from "@rgossiaux/svelte-headlessui"
import { DropdownMenu } from "bits-ui"
import type { SearchResult } from "minisearch"
import { fade } from "svelte/transition"
......@@ -135,10 +129,10 @@
isSearchInProgress = true
searchWorker.postMessage(query)
}
let { data, url } = $derived($page)
let { data } = $derived($page)
let { authenticationEnabled, user } = $derived(data)
let loginUrl = $derived(`/auth/prepare?action=login`)
let logoutUrl = $derived(`/auth/prepare?action=logout`)
let loginUrl = "/auth/prepare?action=login"
let logoutUrl = "/auth/prepare?action=logout"
$effect(() => {
if (shared.searchActive) {
search(searchQuery)
......@@ -149,6 +143,8 @@
let isAccueilDropdownOpen = $state(false)
let isTutorielDropdownOpen = $state(false)
let isProfileLogoutDropdownOpen = $state(false)
let isMobileMenuDropdownOpen = $state(false)
</script>
<!--class:relative={shared.navbarConfig.position === "relative"}-->
......@@ -198,14 +194,14 @@
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="absolute z-50 mr-6 mt-2 w-64 -translate-x-1/2 rounded bg-white text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
class="mt-2 w-64 rounded bg-white text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 text-center text-sm uppercase tracking-wider hover:bg-gray-100"
href="/accueil"
{...props}
>
Accueil simulateur
</a>
......@@ -215,9 +211,9 @@
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100"
href={portalUrl}
{...props}
>
<iconify-icon
class="mr-1 align-[-0.2rem] text-lg"
......@@ -332,14 +328,14 @@
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="absolute z-50 mr-6 mt-2 w-64 -translate-x-1/2 rounded bg-white text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
class="mt-2 w-64 rounded bg-white text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
href="/accueil#impacts-budgetaires"
{...props}
>
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
......@@ -351,9 +347,9 @@
<DropdownMenu.Item>
{#snippet child({ props })}
<button
{...props}
class="group hidden w-full cursor-pointer border-b px-4 py-3 text-start hover:bg-gray-100 md:block"
onclick={help}
{...props}
>
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
......@@ -372,11 +368,11 @@
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
aria-label="Tutoriels vidéos sur le site Dailymotion"
href="https://www.dailymotion.com/leximpact.an.fr"
target="_blank"
{...props}
>
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
......@@ -393,9 +389,9 @@
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
href="/fonctionnement"
{...props}
>
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
......@@ -424,14 +420,14 @@
</li>
{:else}
<!-- User profile + se déconnecter -->
<!-- <Menu let:open>
<MenuButton>
<DropdownMenu.Root bind:open={isProfileLogoutDropdownOpen}>
<DropdownMenu.Trigger>
<div
class="rounded-lg px-1 text-sm capitalize text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none active:bg-gray-400 active:bg-opacity-40"
class:bg-gray-400={open}
class:bg-opacity-40={open}
class:hover:bg-opacity-50={open}
class:active:bg-opacity-70={open}
class:bg-gray-400={isProfileLogoutDropdownOpen}
class:bg-opacity-40={isProfileLogoutDropdownOpen}
class:hover:bg-opacity-50={isProfileLogoutDropdownOpen}
class:active:bg-opacity-70={isProfileLogoutDropdownOpen}
>
<iconify-icon
class="align-[-0.4rem] text-2xl"
......@@ -443,23 +439,28 @@
{user.preferred_username.split("@")[0]}
</span>
</div>
</MenuButton>
<MenuItems
class="absolute right-2 top-14 z-50 rounded bg-white text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="mr-2 mt-2 rounded bg-white text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<MenuItem
as="button"
<DropdownMenu.Item>
{#snippet child({ props })}
<button
{...props}
class="flex gap-1 rounded-sm border-b px-4 py-3 text-sm uppercase text-gray-600 hover:bg-gray-300 hover:bg-opacity-20 hover:text-black focus:outline-none"
on:click={() => goto(logoutUrl)}
>
<span class="hidden whitespace-nowrap pl-1 md:inline-block"
>Se déconnecter</span
onclick={() => goto(logoutUrl)}
>
<span class="whitespace-nowrap pl-1">Se déconnecter</span>
<iconify-icon class="text-lg" icon="ri-logout-box-r-line" />
</MenuItem>
</MenuItems>
</Menu> -->
<iconify-icon
class="text-lg"
icon="ri-logout-box-r-line"
/>
</button>
{/snippet}
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
{/if}
{/if}
</ul>
......@@ -502,29 +503,32 @@
<!-- Troisième section pour le bouton menu-->
<div class="flex flex-1 justify-end gap-3">
<!-- <Menu let:open>
<MenuButton
class="cursor-pointer overflow-hidden rounded-lg text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 focus:outline-none active:bg-gray-400 active:bg-opacity-40"
<DropdownMenu.Root bind:open={isMobileMenuDropdownOpen}>
<DropdownMenu.Trigger
class="mt-0 cursor-pointer overflow-hidden rounded-lg text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 focus:outline-none active:bg-gray-400 active:bg-opacity-40"
>
<div
class="py-2 pl-4 pr-3"
class:bg-gray-400={open}
class:bg-opacity-40={open}
class:bg-gray-400={isMobileMenuDropdownOpen}
class:bg-opacity-40={isMobileMenuDropdownOpen}
>
<iconify-icon
class="align-[-0.2rem] text-2xl"
icon="ri-menu-line"
/>
</div>
</MenuButton>
<MenuItems
class="absolute inset-x-0 top-10 z-50 mr-6 mt-14 w-full rounded bg-white text-center text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
>{#if authenticationEnabled}
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="mt-[3.25rem] w-screen rounded bg-white text-center text-black shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none"
>
{#if authenticationEnabled}
{#if user === undefined}
<MenuItem
as="a"
<DropdownMenu.Item>
{#snippet child({ props })}
<button
{...props}
class="group block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
on:click={() => goto(loginUrl)}
onclick={() => goto(loginUrl)}
>
<span>
<iconify-icon
......@@ -532,12 +536,16 @@
icon="ri-key-fill"
/>Se connecter</span
>
</MenuItem>
</button>
{/snippet}
</DropdownMenu.Item>
{:else}
<MenuItem
as="a"
class="group block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
on:click={() => goto(logoutUrl)}
<DropdownMenu.Item>
{#snippet child({ props })}
<button
{...props}
class="group block w-full cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
onclick={() => goto(logoutUrl)}
>
<span>
<iconify-icon
......@@ -547,11 +555,15 @@
"@",
)[0]})</span
>
</MenuItem>
</button>
{/snippet}
</DropdownMenu.Item>
{/if}
{/if}
<MenuItem
as="a"
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
href="/accueil#impacts-budgetaires"
>
......@@ -559,19 +571,27 @@
class="mr-1 align-[-0.25rem] text-xl"
icon="ri-list-check-3"
/> Présentation des fonctionnalités
</MenuItem>
<MenuItem
as="a"
class="group block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
on:click={help}
</a>
{/snippet}
</DropdownMenu.Item>
<DropdownMenu.Item>
{#snippet child({ props })}
<button
{...props}
class="group block w-full cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
onclick={help}
>
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri:drag-drop-line"
/>Tutoriel interactif
</MenuItem>
<MenuItem
as="a"
</button>
{/snippet}
</DropdownMenu.Item>
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
aria-label="Tutoriels vidéos sur le site Dailymotion"
href="https://www.dailymotion.com/leximpact.an.fr"
......@@ -586,9 +606,13 @@
class="ml-0.5 align-[-0.15rem] text-base"
icon="ri:external-link-line"
/>
</MenuItem>
<MenuItem
as="a"
</a>
{/snippet}
</DropdownMenu.Item>
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 text-center hover:bg-gray-100 md:hidden"
href="/fonctionnement"
>
......@@ -596,16 +620,24 @@
class="mr-1 align-[-0.25rem] text-xl"
icon="ri-database-line"
/> Méthode de calcul et traitement des données
</MenuItem>
<MenuItem
as="a"
</a>
{/snippet}
</DropdownMenu.Item>
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b-2 border-black px-4 py-3 text-sm uppercase tracking-wider hover:bg-gray-100"
href="/accueil"
>
Accueil simulateur
</MenuItem>
<MenuItem
as="a"
</a>
{/snippet}
</DropdownMenu.Item>
<DropdownMenu.Item>
{#snippet child({ props })}
<a
{...props}
class="block cursor-pointer border-b px-4 py-3 hover:bg-gray-100"
href={portalUrl}
>
......@@ -616,9 +648,11 @@
class="align-[-0.25rem] text-xl"
icon="ri:arrow-right-up-line"
/>
</MenuItem>
</MenuItems>
</Menu> -->
</a>
{/snippet}
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment