From 2856185a3c5a4c7984e13ef8c6cef9b4d6fec4ce Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 28 Mar 2025 15:34:30 +0100
Subject: [PATCH] Display category menu cta only if not read only

---
 components/calendar/CalendarOptions.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/components/calendar/CalendarOptions.vue b/components/calendar/CalendarOptions.vue
index aba7ad3..8628365 100644
--- a/components/calendar/CalendarOptions.vue
+++ b/components/calendar/CalendarOptions.vue
@@ -4,13 +4,23 @@ import { useCalendar } from "@/stores/CalendarStore"
 import { PhCalendarBlank, PhCheckCircle, PhGear, PhTag } from "@phosphor-icons/vue"
 import { computed } from "vue"
 
+const optionsOpened = ref<boolean>(false)
+
+const user = useSupabaseUser()
+
+function closeMenu() {
+  optionsOpened.value = false
+}
+watch(user, closeMenu)
+
 const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
+const { isReadOnly } = storeToRefs(useCalendar())
 
 const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
 </script>
 
 <template>
-  <UiDropdownMenu>
+  <UiDropdownMenu v-model:open="optionsOpened">
     <UiDropdownMenuTrigger as-child>
       <UiButton variant="secondary" size="icon">
         <PhGear size="20" weight="fill" />
@@ -45,13 +55,15 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
         </UiDropdownMenuPortal>
       </UiDropdownMenuSub>
 
-      <UiDropdownMenuSeparator />
+      <template v-if="!isReadOnly">
+        <UiDropdownMenuSeparator />
 
-      <UiDropdownMenuItem class="flex gap-[1ch] justify-end items-center">
-        {{ $t('entity.category.namePlural') }}
+        <UiDropdownMenuItem class="flex gap-[1ch] justify-end items-center">
+          {{ $t('entity.category.namePlural') }}
 
-        <PhTag size="18" weight="fill" />
-      </UiDropdownMenuItem>
+          <PhTag size="18" weight="fill" />
+        </UiDropdownMenuItem>
+      </template>
     </UiDropdownMenuContent>
   </UiDropdownMenu>
 </template>