Moved Sidebar to top of app

This prevents flicker and stops useless rerender of the component

pages/calendar-old.vue

@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { useCalendar } from '@/stores/CalendarStore'
-import type { MenuItem } from '~/components/global/SidebarProps';
-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
-
-const { revealAdvancedSearch } = useCalendar()
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
-
-useHead({
-  title: 'Calendar'
-})
-
-const sidebarMenu: MenuItem[] = [
-  {
-    phIcon: PhMagnifyingGlass,
-    tooltip: 'Recherche avancée',
-    clickHandler: revealAdvancedSearch
-  }
-]
-</script>
-
-<template>
-  <main class="h-full grid grid-cols-[auto_1fr]">
-    <Sidebar :menu-items="sidebarMenu" />
-    <Calendar />
-
-    <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
-  </main>
-</template>

pages/calendar/[id].vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { PhMagnifyingGlass } from '@phosphor-icons/vue';
-import type { MenuItem } from '~/components/global/SidebarProps';
 
 useHead({
   title: 'Calendrier'
@@ -17,21 +16,18 @@ watch(user, (n, _o) => {
   }
 })
 
+const { setCurrentMenu } = useUiStore()
 const { revealAdvancedSearch } = useCalendar()
 
-const sidebarMenu: MenuItem[] = [
+setCurrentMenu([
   {
     phIcon: PhMagnifyingGlass,
     tooltip: 'Recherche avancée',
     clickHandler: revealAdvancedSearch
   }
-]
+])
 </script>
 
 <template>
-  <div class="h-full grid grid-cols-[auto_1fr]">
-    <Sidebar :menu-items="sidebarMenu" />
-
-    <Calendar />
-  </div>
+  <Calendar />
 </template>

pages/index.vue

@@ -1,15 +1,14 @@
 <script lang="ts" setup>
-import type { MenuItem } from '~/components/global/SidebarProps';
-
 useHead({
   title: 'Dashboard'
 })
 
-const sidebarMenu: MenuItem[] = []
+const { setCurrentMenu } = useUiStore()
+setCurrentMenu([])
 </script>
 
 <template>
   <main class="h-full grid grid-cols-[auto_1fr]">
-    <Sidebar :menu-items="sidebarMenu" is-home />
+    Test
   </main>
 </template>

pages/profile.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { MenuItem } from '~/components/global/SidebarProps';
-
 const user = useSupabaseUser()
 
 useHead({
@@ -17,13 +15,11 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
-const sidebarMenu: MenuItem[] = []
+
+const { setCurrentMenu } = useUiStore()
+setCurrentMenu([])
 </script>
 
 <template>
-  <div class="h-full grid grid-cols-[auto_1fr]">
-    <Sidebar :menu-items="sidebarMenu" />
-
-    <ProfileDashboard />
-  </div>
+  <ProfileDashboard />
 </template>