From 4034104c9e690d1b41be11c92f782ed0173fe5e7 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 14 May 2024 11:21:08 +0200
Subject: [PATCH] Updated sidebar to be global

---
 components/{calendar => global}/Sidebar.vue | 33 +++++++++++++++++----
 components/global/SidebarProps.ts           | 10 +++++++
 pages/calendar.vue                          | 17 +++++++----
 3 files changed, 49 insertions(+), 11 deletions(-)
 rename components/{calendar => global}/Sidebar.vue (60%)
 create mode 100644 components/global/SidebarProps.ts

diff --git a/components/calendar/Sidebar.vue b/components/global/Sidebar.vue
similarity index 60%
rename from components/calendar/Sidebar.vue
rename to components/global/Sidebar.vue
index 5320e60..cbf174f 100644
--- a/components/calendar/Sidebar.vue
+++ b/components/global/Sidebar.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
+import { PhHouse, PhList } from '@phosphor-icons/vue'
+import type { SidebarProps } from './SidebarProps';
 
-import { PhList, PhHouse, PhMagnifyingGlass } from '@phosphor-icons/vue'
-
-const { revealAdvancedSearch } = useCalendar()
+defineProps<SidebarProps>()
 </script>
 
 <template>
@@ -14,6 +13,7 @@ const { revealAdvancedSearch } = useCalendar()
           <PhList size="27" />
         </UiButton>
       </li>
+
       <li>
         <UiTooltipProvider :delay-duration="100">
           <UiTooltip>
@@ -30,7 +30,28 @@ const { revealAdvancedSearch } = useCalendar()
           </UiTooltip>
         </UiTooltipProvider>
       </li>
-      <li>
+
+      <li v-for="(item, i) in menuItems" :key="i">
+        <UiTooltipProvider :delay-duration="100">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton v-if="item.to" variant="ghost" size="icon" class="rounded-full" as-child>
+                <RouterLink :to="item.to">
+                  <component :is="item.phIcon" size="24" weight="fill" />
+                </RouterLink>
+              </UiButton>
+              <UiButton v-if="item.clickHandler" variant="ghost" size="icon" class="rounded-full" @click="item.clickHandler">
+                <component :is="item.phIcon" size="24" weight="fill" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent :side="'right'">
+              <p>{{ item.tooltip }}</p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </li>
+
+      <!-- <li>
         <UiTooltipProvider :delay-duration="100">
           <UiTooltip>
             <UiTooltipTrigger as-child>
@@ -48,7 +69,7 @@ const { revealAdvancedSearch } = useCalendar()
             </UiTooltipContent>
           </UiTooltip>
         </UiTooltipProvider>
-      </li>
+      </li> -->
     </menu>
 
     <UserCTA />
diff --git a/components/global/SidebarProps.ts b/components/global/SidebarProps.ts
new file mode 100644
index 0000000..fa40d08
--- /dev/null
+++ b/components/global/SidebarProps.ts
@@ -0,0 +1,10 @@
+export interface MenuItem {
+  phIcon: Component
+  tooltip: string
+  clickHandler?: () => void
+  to?: string
+}
+
+export interface SidebarProps {
+  menuItems: MenuItem[]
+}
diff --git a/pages/calendar.vue b/pages/calendar.vue
index c745ed4..0737a76 100644
--- a/pages/calendar.vue
+++ b/pages/calendar.vue
@@ -1,21 +1,28 @@
 <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'
 
-import Calendar from '@/components/calendar/Calendar.vue'
-import Sidebar from '@/components/calendar/Sidebar.vue'
-import CalendarSearch from '@/components/calendar/search/CalendarSearch.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 />
+    <Sidebar :menu-items="sidebarMenu" />
     <Calendar />
 
     <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />