Merge pull request #18 from AlexisNP/bugfix/make-the-sidebar-a-global-component

Sidebar is now a global component

app.vue

@@ -5,6 +5,9 @@ useHead({
   titleTemplate: (titleChunk) => {
     return titleChunk ? `${titleChunk} — TTTools` : 'TTTools';
   },
+  htmlAttrs: {
+    lang: 'fr'
+  },
   meta: [
     { name: "charset", content: "UTF-8" },
     { name: "viewport", content: "width=device-width, initial-scale=1.0" },
@@ -35,7 +38,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/calendar/Calendar.vue

@@ -2,6 +2,7 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed, type Component, type ComputedRef } from 'vue'
 
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import MonthlyLayout from './state/monthly/Layout.vue'
 import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
@@ -85,8 +86,18 @@ const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   }
 })
 
+const { setCurrentMenu } = useUiStore()
+
 onMounted(() => {
   jumpToDate(selectedDate)
+
+  setCurrentMenu([
+    {
+      phIcon: PhMagnifyingGlass,
+      tooltip: 'Recherche avancée',
+      action: 'event-search'
+    }
+  ])
 })
 </script>
 
@@ -107,8 +118,8 @@ onMounted(() => {
       </div>
     </template>
 
-    <CalendarSearch />
+    <LazyCalendarSearch />
-    <CalendarFormUpdateEvent />
+    <LazyCalendarFormUpdateEvent />
-    <CalendarFormDeleteEvent />
+    <LazyCalendarFormDeleteEvent />
   </div>
 </template>

components/calendar/CalendarEvent.vue

@@ -59,13 +59,13 @@ function handleClosePopover() {
           })
         "
       >
-        <div class="line-clamp-2">
+        <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
           {{ eventTitle }}
         </div>
       </button>
     </UiPopoverTrigger>
 
-    <CalendarEventDetails
+    <LazyCalendarEventDetails
       :event
       :spans-multiple-days
       :is-start-event

components/global/SidebarProps.ts

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

components/global/sidebar/Sidebar.vue

@@ -1,8 +1,21 @@
 <script lang="ts" setup>
 import { PhHouse, PhList } from '@phosphor-icons/vue'
-import type { SidebarProps } from './SidebarProps';
+import type { SidebarMenuActionType } from './SidebarProps';
 
-defineProps<SidebarProps>()
+const route = useRoute()
+
+const isHome = computed<boolean>(() => {
+  return route.fullPath === '/'
+})
+
+const { revealAdvancedSearch } = useCalendar()
+const { currentMenu } = storeToRefs(useUiStore())
+
+function handleMenuItemAction(actionType: SidebarMenuActionType) {
+  if (actionType === 'event-search') {
+    revealAdvancedSearch()
+  }
+}
 </script>
 
 <template>
@@ -31,7 +44,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>
@@ -40,7 +53,7 @@ defineProps<SidebarProps>()
                   <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">
+              <UiButton v-if="item.action" variant="ghost" size="icon" class="rounded-full" @click="handleMenuItemAction(item.action!)">
                 <component :is="item.phIcon" size="24" weight="fill" />
               </UiButton>
             </UiTooltipTrigger>
@@ -50,26 +63,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

@@ -0,0 +1,13 @@
+export type SidebarMenuActionType = "event-search"
+
+export interface SidebarMenuItem {
+  phIcon: Component
+  tooltip: string
+  action?: SidebarMenuActionType
+  to?: string
+}
+
+export interface SidebarProps {
+  menuItems: SidebarMenuItem[],
+  isHome?: boolean
+}

components/global/user/CTA.vue

@@ -44,6 +44,8 @@ async function handleLogout() {
 
 function gotoProfilePage() {
   router.push({ path: '/profile' })
+
+  closeMenu()
 }
 </script>
 

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,7 +1,4 @@
 <script lang="ts" setup>
-import { PhMagnifyingGlass } from '@phosphor-icons/vue';
-import type { MenuItem } from '~/components/global/SidebarProps';
-
 useHead({
   title: 'Calendrier'
 })
@@ -16,22 +13,8 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
-
-const { revealAdvancedSearch } = useCalendar()
-
-const sidebarMenu: MenuItem[] = [
-  {
-    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]">
+  <main class="p-8">
-    <Sidebar :menu-items="sidebarMenu" is-home />
+    <Heading>TTTools</Heading>
   </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/CalendarStore.ts

@@ -31,9 +31,7 @@ export const useCalendar = defineStore('calendar', () => {
   })
   const viewTypeOptions: Set<CalendarViewType> = new Set<CalendarViewType>([
     'month',
-    'year',
+    'year'
-    'decade',
-    'century'
   ])
 
   const calendarId = ref<number>(0)

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
+  }
+})