Fixed hydration mismatches

components/calendar/menu/Menu.vue

@@ -1,15 +1,7 @@
 <script lang="ts" setup>
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { useCalendar } from "~/stores/CalendarStore"
 
-import { PhMagnifyingGlass } from "@phosphor-icons/vue"
-
-const { revealAdvancedSearch, } = useCalendar()
 const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
-
-const breakpoints = useBreakpoints(
-  breakpointsTailwind
-)
 </script>
 
 <template>
@@ -29,17 +21,7 @@ const breakpoints = useBreakpoints(
 
       <menu class="flex items-center gap-2">
         <li>
-          <UiButton
-            :search-slash="breakpoints.lg.value"
-            :size="breakpoints.lg.value ? 'default' : 'icon'"
-            @click="revealAdvancedSearch()"
-          >
-            <PhMagnifyingGlass size="20" weight="light" />
-
-            <span class="max-lg:hidden">
-              {{ $t('entity.advancedSearch.title') }}
-            </span>
-          </UiButton>
+          <CalendarSearchCTA />
         </li>
         <li>
           <CalendarCategoriesCTA />