Added quick nav menu between content pages

Really happy that's a thing tbh

package-lock.json

@@ -8,7 +8,7 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
-        "@phosphor-icons/vue": "^2.1.6",
+        "@phosphor-icons/vue": "^2.2.1",
         "@vueuse/core": "^10.9.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
@@ -890,9 +890,9 @@
       }
     },
     "node_modules/@phosphor-icons/vue": {
-      "version": "2.1.6",
+      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.2.1.tgz",
-      "integrity": "sha512-j4iVvNT4JbDR2udIVfakKZHd14i3jCvO4b24OC0W/1rasftU8qVg1Tnb3QDwAT0teNU+UxvaM+kCWxfGHC2dUg==",
+      "integrity": "sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==",
       "engines": {
         "node": ">=14"
       },

package.json

@@ -17,7 +17,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@phosphor-icons/vue": "^2.1.6",
+    "@phosphor-icons/vue": "^2.2.1",
+    "lucide-vue-next": "^0.364.0",
     "@vueuse/core": "^10.9.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

src/components/calendar/CalendarMenu.vue

@@ -4,11 +4,12 @@ import { useCalendar } from '@/stores/CalendarStore'
 import { Button } from '@/components/ui/button'
 import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
+import CalendarMenuSubnav from './CalendarMenuSubnav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
 import CalendarCurrentDate from './CalendarCurrentDate.vue'
 
-const { currentDate, revealAdvancedSearch } = useCalendar()
+const { revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
@@ -38,10 +39,9 @@ const { currentDate, revealAdvancedSearch } = useCalendar()
         </li>
       </menu>
     </div>
-    <div class="ml-12 flex">
+
-      <div class="px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+    <div class="ml-6">
-        <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
+      <CalendarMenuSubnav />
-      </div>
     </div>
   </header>
 </template>

src/components/calendar/CalendarMenuNav.vue

@@ -9,7 +9,7 @@ import {
   PhCaretLeft,
   PhCaretRight
 } from '@phosphor-icons/vue'
-import Button from '../ui/button/Button.vue'
+import Button from '@/components/ui/button/Button.vue'
 
 interface DirectionLabels {
   pastFar: string

src/components/calendar/CalendarMenuSubnav.vue

@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { daysPerMonth, monthsPerYear, type LeimDate } from '@/models/Date'
+import { useCalendar } from '@/stores/CalendarStore'
+import { useCalendarEvents } from '@/stores/EventStore'
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const { currentDate, currentConfig, jumpToDate } = useCalendar()
+const { getRelativeEventFromDate } = useCalendarEvents()
+
+function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
+  let fromDate: LeimDate
+  const toDay = position === 'next' ? daysPerMonth : 1
+  const toMonth = position === 'next' ? monthsPerYear : 0
+
+  switch (currentConfig.viewType) {
+    case 'month':
+      fromDate = {
+        day: toDay,
+        month: currentDate.currentMonth,
+        year: currentDate.currentYear
+      }
+      break
+
+    case 'year':
+      fromDate = {
+        day: toDay,
+        month: toMonth,
+        year: currentDate.currentYear
+      }
+      break
+
+    case 'decade':
+      fromDate = {
+        day: toDay,
+        month: currentDate.currentMonth,
+        year: currentDate.currentYear
+      }
+      break
+
+    case 'century':
+    default:
+      fromDate = {
+        day: toDay,
+        month: currentDate.currentMonth,
+        year: currentDate.currentYear
+      }
+      break
+  }
+
+  try {
+    const { targetDate } = getRelativeEventFromDate(fromDate, position)
+
+    jumpToDate(targetDate)
+  } catch (err) {
+    console.log(err)
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <div class="w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+      <span class="text-sm">{{ currentDate.currentDateTitle }}</span>
+    </div>
+    <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+      <TooltipProvider :delayDuration="250">
+        <Tooltip>
+          <TooltipTrigger>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-t-sm rounded-b-none"
+              @click="handleGotoPreviousEventPage('prev')"
+            >
+              <PhArrowLineLeft size="22" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Précédente page à évènements</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+    <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+      <TooltipProvider :delayDuration="250">
+        <Tooltip>
+          <TooltipTrigger>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-t-sm rounded-b-none"
+              @click="handleGotoPreviousEventPage('next')"
+            >
+              <PhArrowLineRight size="22" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Prochaine page à évènements</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  </div>
+</template>