From 4a4433dcddd38a2b5326e28e681789651495264c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 7 Jun 2024 19:35:49 +0200
Subject: [PATCH] Moved Sidebar to top of app

This prevents flicker and stops useless rerender of the component
---
 app.vue                                       |  6 +++-
 components/global/{ => sidebar}/Sidebar.vue   | 27 ++---------------
 .../global/{ => sidebar}/SidebarProps.ts      |  4 +--
 pages/calendar-old.vue                        | 30 -------------------
 pages/calendar/[id].vue                       | 12 +++-----
 pages/index.vue                               |  7 ++---
 pages/profile.vue                             | 12 +++-----
 stores/UiStore.ts                             | 14 +++++++++
 8 files changed, 35 insertions(+), 77 deletions(-)
 rename components/global/{ => sidebar}/Sidebar.vue (70%)
 rename components/global/{ => sidebar}/SidebarProps.ts (66%)
 delete mode 100644 pages/calendar-old.vue
 create mode 100644 stores/UiStore.ts

diff --git a/app.vue b/app.vue
index ffcefe3..32cc913 100644
--- a/app.vue
+++ b/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>
diff --git a/components/global/Sidebar.vue b/components/global/sidebar/Sidebar.vue
similarity index 70%
rename from components/global/Sidebar.vue
rename to components/global/sidebar/Sidebar.vue
index 56142fb..5676f49 100644
--- a/components/global/Sidebar.vue
+++ b/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 />
diff --git a/components/global/SidebarProps.ts b/components/global/sidebar/SidebarProps.ts
similarity index 66%
rename from components/global/SidebarProps.ts
rename to components/global/sidebar/SidebarProps.ts
index adcfce0..0e8b992 100644
--- a/components/global/SidebarProps.ts
+++ b/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
 }
diff --git a/pages/calendar-old.vue b/pages/calendar-old.vue
deleted file mode 100644
index 0737a76..0000000
--- a/pages/calendar-old.vue
+++ /dev/null
@@ -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>
diff --git a/pages/calendar/[id].vue b/pages/calendar/[id].vue
index 0187568..31c08b3 100644
--- a/pages/calendar/[id].vue
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index 10c9254..c0edf24 100644
--- a/pages/index.vue
+++ b/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>
diff --git a/pages/profile.vue b/pages/profile.vue
index 4247710..7b62bc0 100644
--- a/pages/profile.vue
+++ b/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>
diff --git a/stores/UiStore.ts b/stores/UiStore.ts
new file mode 100644
index 0000000..3b005fe
--- /dev/null
+++ b/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
+  }
+})