Categories appear on more options

components/calendar/CategoriesCTA.vue

@@ -9,9 +9,11 @@ const { isReadOnly } = storeToRefs(useCalendar())
   <UiTooltipProvider :delay-duration="250">
     <UiTooltip>
       <UiTooltipTrigger as-child>
+        <ClientOnly>
           <UiButton v-if="!isReadOnly" variant="secondary" size="icon" @click="toggleCategoriesModal(true)">
             <PhTag size="20" weight="light" />
           </UiButton>
+        </ClientOnly>
       </UiTooltipTrigger>
       <UiTooltipContent>
         <p>

components/calendar/OptionsCTA.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { breakpointsTailwind } from "@vueuse/core"
 import { cn } from "~/lib/utils"
 import { useCalendar } from "~/stores/CalendarStore"
-import { PhCalendarBlank, PhCheckCircle, PhGear } from "@phosphor-icons/vue"
+import { PhCalendarBlank, PhCheckCircle, PhDotsThreeVertical, PhGear, PhTag } from "@phosphor-icons/vue"
-import { computed } from "vue"
 
-const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
+
+const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType, toggleCategoriesModal } = useCalendar()
 const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
 </script>
 
@@ -12,15 +16,29 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
   <UiDropdownMenu>
     <UiDropdownMenuTrigger as-child>
       <UiButton variant="secondary" size="icon">
-        <PhGear size="20" weight="fill" />
+        <ClientOnly>
+          <PhGear v-if="breakpoints.md.value" size="20" weight="fill" />
+          <PhDotsThreeVertical v-else size="26" weight="bold" />
+        </ClientOnly>
       </UiButton>
     </UiDropdownMenuTrigger>
 
-    <UiDropdownMenuContent :side="'bottom'" :align="'start'" :side-offset="10" :align-offset="25" :collision-padding="40" class="text-right">
+    <UiDropdownMenuContent :side="'bottom'" :align="'start'" :side-offset="10" :align-offset="25" :collision-padding="20" class="text-right">
       <UiDropdownMenuArrow />
       <UiDropdownMenuLabel>
         {{ $t('entity.calendar.seeOptions') }}
       </UiDropdownMenuLabel>
+
+      <UiDropdownMenuItem
+        v-if="!breakpoints.md.value"
+        class="flex gap-[1ch] justify-end items-center"
+        @click="toggleCategoriesModal(true)"
+      >
+        {{ $t('entity.calendar.seeCategories') }}
+
+        <PhTag size="18" />
+      </UiDropdownMenuItem>
+
       <UiDropdownMenuSub>
         <UiDropdownMenuSubTrigger arrow-direction="left" class="p-0 rounded-none">
           <UiDropdownMenuItem class="flex gap-[1ch] justify-end items-center pointer-events-none">

components/calendar/menu/Menu.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
 import { useCalendar } from "~/stores/CalendarStore"
+import { breakpointsTailwind } from "@vueuse/core"
+
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
 
 const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
 </script>
@@ -23,9 +28,11 @@ const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
         <li>
           <CalendarSearchCTA />
         </li>
-        <li>
+        <ClientOnly>
+          <li v-if="breakpoints.md.value">
             <CalendarCategoriesCTA />
           </li>
+        </ClientOnly>
         <li>
           <CalendarOptionsCTA />
         </li>

i18n/i18n.config.ts

@@ -168,7 +168,7 @@ export default defineI18nConfig(() => ({
           isLoading: "Calendar is loading…",
           hasXEvent: "{count} available event",
           hasXEvents: "{count} available events",
-          seeCategories: "Modify categories",
+          seeCategories: "Categories",
           seeOptions: "Calendar options",
           date: {
             start: "Start date",
@@ -492,7 +492,7 @@ export default defineI18nConfig(() => ({
           isLoading: "Chargement du calendrier…",
           hasXEvent: "{count} évènement disponible",
           hasXEvents: "{count} évènements disponibles",
-          seeCategories: "Gestion des catégories",
+          seeCategories: "Catégories",
           seeOptions: "Options du calendrier",
           date: {
             start: "Date de début",