Moved Sidebar to top of app

This prevents flicker and stops useless rerender of the component

app.vue

@@ -35,7 +35,11 @@ const useIdFunction = () => useId()
 
     <NuxtLayout>
       <ConfigProvider :use-id="useIdFunction">
-        <NuxtPage/>
+        <div class="h-full grid grid-cols-[auto_1fr]">
+          <Sidebar />
+
+          <NuxtPage/>
+        </div>
       </ConfigProvider>
     </NuxtLayout>
   </div>

components/global/sidebar/Sidebar.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { PhHouse, PhList } from '@phosphor-icons/vue'
-import type { SidebarProps } from './SidebarProps';
 
-defineProps<SidebarProps>()
+const { currentMenu } = storeToRefs(useUiStore())
 </script>
 
 <template>
@@ -14,7 +13,7 @@ defineProps<SidebarProps>()
         </UiButton>
       </li>
 
-      <li v-if="!isHome">
+      <li>
         <UiTooltipProvider :delay-duration="100">
           <UiTooltip>
             <UiTooltipTrigger as-child>
@@ -31,7 +30,7 @@ defineProps<SidebarProps>()
         </UiTooltipProvider>
       </li>
 
-      <li v-for="(item, i) in menuItems" :key="i">
+      <li v-for="(item, i) in currentMenu" :key="i">
         <UiTooltipProvider :delay-duration="100">
           <UiTooltip>
             <UiTooltipTrigger as-child>
@@ -50,26 +49,6 @@ defineProps<SidebarProps>()
           </UiTooltip>
         </UiTooltipProvider>
       </li>
-
-      <!-- <li>
-        <UiTooltipProvider :delay-duration="100">
-          <UiTooltip>
-            <UiTooltipTrigger as-child>
-              <UiButton
-                variant="ghost"
-                size="icon"
-                class="rounded-full"
-                @click="revealAdvancedSearch()"
-              >
-                <PhMagnifyingGlass size="24" weight="fill" />
-              </UiButton>
-            </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'">
-              <p>Recherche avancée</p>
-            </UiTooltipContent>
-          </UiTooltip>
-        </UiTooltipProvider>
-      </li> -->
     </menu>
 
     <UserCTA />

components/global/sidebar/SidebarProps.ts

@@ -1,4 +1,4 @@
-export interface MenuItem {
+export interface SidebarMenuItem {
   phIcon: Component
   tooltip: string
   clickHandler?: () => void
@@ -6,6 +6,6 @@ export interface MenuItem {
 }
 
 export interface SidebarProps {
-  menuItems: MenuItem[],
+  menuItems: SidebarMenuItem[],
   isHome?: boolean
 }

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]">
+  <Calendar />
-    <Sidebar :menu-items="sidebarMenu" />
-
-    <Calendar />
-  </div>
 </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]">
+  <ProfileDashboard />
-    <Sidebar :menu-items="sidebarMenu" />
-
-    <ProfileDashboard />
-  </div>
 </template>

stores/UiStore.ts

@@ -0,0 +1,14 @@
+import type { SidebarMenuItem } from "~/components/global/sidebar/SidebarProps"
+
+export const useUiStore = defineStore('ui', () => {
+  const currentMenu: Ref<SidebarMenuItem[]> = ref<SidebarMenuItem[]>([])
+
+  function setCurrentMenu(items: SidebarMenuItem[]) {
+    currentMenu.value = items
+  }
+
+  return {
+    currentMenu,
+    setCurrentMenu
+  }
+})