Added option menu for calendar

components/calendar/CalendarMenu.vue

@@ -2,6 +2,7 @@
 import { useCalendar } from "@/stores/CalendarStore"
 
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
+import CalendarOptions from "./CalendarOptions.vue"
 
 const { revealAdvancedSearch } = useCalendar()
 const { isReadOnly } = storeToRefs(useCalendar())
@@ -26,13 +27,13 @@ const { isReadOnly } = storeToRefs(useCalendar())
         <li>
           <UiButton search-slash @click="revealAdvancedSearch()">
             <PhMagnifyingGlass size="20" weight="light" />
-            {{ $t('entity.advancedSearch.title') }}
+            <span>
+              {{ $t('entity.advancedSearch.title') }}
+            </span>
           </UiButton>
         </li>
         <li>
-          <ClientOnly>
-            <CalendarSwitch />
-          </ClientOnly>
+          <CalendarOptions />
         </li>
       </menu>
     </div>

components/calendar/CalendarOptions.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils"
+import { useCalendar } from "@/stores/CalendarStore"
+import { PhCalendarBlank, PhCheckCircle, PhGear, PhTag } from "@phosphor-icons/vue"
+import { computed } from "vue"
+
+const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
+
+const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
+</script>
+
+<template>
+  <UiDropdownMenu>
+    <UiDropdownMenuTrigger as-child>
+      <UiButton variant="secondary" size="icon">
+        <PhGear size="20" weight="fill" />
+      </UiButton>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent :side="'bottom'" :align="'start'" :side-offset="10" :align-offset="25" :collision-padding="40" class="text-right">
+      <UiDropdownMenuLabel>
+        {{ $t('entity.calendar.seeOptions') }}
+      </UiDropdownMenuLabel>
+      <UiDropdownMenuSub>
+        <UiDropdownMenuSubTrigger arrow-direction="left" class="p-0 rounded-none">
+          <UiDropdownMenuItem class="flex gap-[1ch] justify-end items-center pointer-events-none">
+            {{ $t('ui.displayMode') }}
+
+            <PhCalendarBlank size="18" weight="fill" />
+          </UiDropdownMenuItem>
+        </UiDropdownMenuSubTrigger>
+        <UiDropdownMenuPortal>
+          <UiDropdownMenuSubContent>
+            <UiDropdownMenuItem
+              v-for="option in viewTypeOptions"
+              :key="option"
+              class="flex gap-[.5ch] items-center rounded-none transition-colors"
+              :class="cn({ 'text-emerald-600': viewTypeTitle === getViewTypeTitle(option) })"
+              @click="setViewType(option)"
+            >
+              <PhCheckCircle v-if="viewTypeTitle === getViewTypeTitle(option)" size="20" weight="fill" />
+
+              {{ getViewTypeTitle(option) }}
+            </UiDropdownMenuItem>
+          </UiDropdownMenuSubContent>
+        </UiDropdownMenuPortal>
+      </UiDropdownMenuSub>
+
+      <UiDropdownMenuSeparator />
+
+      <UiDropdownMenuItem class="flex gap-[1ch] justify-end items-center">
+        {{ $t('entity.category.namePlural') }}
+
+        <PhTag size="18" weight="fill" />
+      </UiDropdownMenuItem>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+</template>

components/calendar/CalendarSwitch.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { useCalendar } from "@/stores/CalendarStore"
-import { PhCalendarBlank } from "@phosphor-icons/vue"
-import { computed } from "vue"
-
-const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
-
-const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
-</script>
-
-<template>
-  <UiDropdownMenu>
-    <UiDropdownMenuTrigger as-child>
-      <UiButton size="sm" variant="secondary">
-        <PhCalendarBlank size="18" weight="fill" />
-
-        {{ viewTypeTitle }}
-      </UiButton>
-    </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent :side="'bottom'" :collision-padding="30">
-      <UiDropdownMenuLabel>
-        {{ $t('ui.displayMode') }}
-      </UiDropdownMenuLabel>
-      <UiDropdownMenuSeparator />
-      <UiDropdownMenuItem
-        v-for="option in viewTypeOptions"
-        :key="option"
-        @click="setViewType(option)"
-      >
-        {{ getViewTypeTitle(option) }}
-      </UiDropdownMenuItem>
-    </UiDropdownMenuContent>
-  </UiDropdownMenu>
-</template>

components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -5,10 +5,10 @@ import {
   type DropdownMenuSubTriggerProps,
   useForwardProps
 } from "radix-vue"
-import { ChevronRight } from "lucide-vue-next"
 import { cn } from "@/lib/utils"
+import { PhCaretLeft, PhCaretRight } from "@phosphor-icons/vue";
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], arrowDirection?: "left" | "right" }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -29,7 +29,17 @@ const forwardedProps = useForwardProps(delegatedProps)
       )
     "
   >
-    <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
+    <template v-if="props.arrowDirection === 'left'">
+      <PhCaretLeft class="mr-auto h-4 w-4" />
+
+      <span class="inline-block">
+        <slot />
+      </span>
+    </template>
+    <template v-else>
+      <slot />
+
+      <PhCaretRight class="ml-auto h-4 w-4" />
+    </template>
   </DropdownMenuSubTrigger>
 </template>