Starting to rework the NavBar

app.vue

@@ -1,14 +1,14 @@
 <template>
 	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
     <NuxtRouteAnnouncer/>
-    <NuxtLayout>
       <TooltipProvider>
         <ToastProvider>
+          <NuxtLayout>
             <div class="px-12 flex flex-1 justify-center">
               <NuxtPage></NuxtPage>
             </div>
+          </NuxtLayout>
         </ToastProvider>
       </TooltipProvider>
-    </NuxtLayout>
   </div>
 </template>

components/NavBar.vue

@@ -0,0 +1,36 @@
+<template>
+	<div ref="container" aria-expanded="false" class="group flex h-screen overflow-hidden">
+        <div class="z-50 sm:hidden inline-block w-full h-auto border-b border-light-35 dark:border-dark-35">
+            <div class="p-2 border-e border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25">
+                <Icon icon="radix-icons:hamburger-menu" />
+            </div>
+        </div>
+        <div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-0 top-0 z-40 xl:w-96 sm:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-sm:absolute max-sm:-top-0 max-sm:-bottom-0 sm:left-0 max-sm:-left-full max-sm:group-aria-expanded:left-0 max-sm:transition-[left] py-8 max-sm:z-40">
+            <div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
+                <div class="flex justify-between items-center">
+                    <NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"></NuxtLink>
+                    <div class="flex gap-4 items-center">
+                        <Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
+                        <Tooltip message="Se connecter" side="right">
+                            <NuxtLink class="" :to="{ path: '/user/profile', force: true }">
+                                <div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
+                                    <Icon icon="radix-icons:person" class="w-7 h-7 p-1" />
+                                </div>
+                            </NuxtLink>
+                        </Tooltip>
+                    </div>
+                </div>
+                <div class="flex"></div>
+                <slot></slot>
+            </div>
+            <div class="xl:px-12 px-6 text-start text-xs text-light-60 dark:text-dark-60 relative top-6">
+                <NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
+                <p>Copyright Peaceultime - 2024</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+</script>

components/base/Toast.vue

@@ -1,9 +1,9 @@
 <template>
     <ToastRoot :default-open="open" :duration="duration" class="ToastRoot bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30" v-model:open="model">
-        <div class="grid grid-cols-8 p-3">
+        <div class="grid grid-cols-8 px-3 pt-1 pb-2">
           <ToastTitle v-if="title" class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ title }}</h4></ToastTitle>
-          <ToastClose v-if="closeable" aria-label="Close" class="text-2xl -translate-y-1/2 translate-x-1/2 cursor-pointer"><span aria-hidden>×</span></ToastClose>
-          <ToastDescription v-if="content" class="text-md col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
+          <ToastClose v-if="closeable" aria-label="Close" class="text-xl -translate-y-2 translate-x-4 cursor-pointer"><span aria-hidden>×</span></ToastClose>
+          <ToastDescription v-if="content" class="text-sm col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
         </div>
         <TimerProgress v-if="timer" shape="thin" :delay="duration" class="mb-0 mt-0 w-full"  />
     </ToastRoot>

components/base/Tooltip.vue

@@ -4,7 +4,7 @@
             <span tabindex="0"><slot></slot></span>
         </TooltipTrigger>
         <TooltipPortal>
-            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70" :side="side" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
+            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50" :side="side" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
                 {{ message }}
                 <TooltipArrow class="fill-light-30 dark:fill-dark-30"></TooltipArrow>
             </TooltipContent>

components/base/Tree.vue

@@ -0,0 +1,3 @@
+<template>
+    
+</template>

layouts/default.vue

@@ -1,3 +1,4 @@
 <template>
+	<NavBar />
 	<slot></slot>
 </template>