Add TOGGLE_FILTER_SIDEBAR analytics event

.eslintignore

@@ -7,3 +7,5 @@ frontend/storybook-static
 !frontend/.storybook
 
 !.pnpmfile.cjs
+
+frontend/src/locales

frontend/src/components/VHeader/VHeaderDesktop.vue

@@ -65,6 +65,8 @@ import VLogoButton from "~/components/VHeader/VLogoButton.vue"
 import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButton.vue"
 import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover.vue"
 
+import type { Ref } from "vue"
+
 /**
  * The desktop search header.
  */
@@ -85,8 +87,8 @@ export default defineComponent({
     const searchStore = useSearchStore()
     const uiStore = useUiStore()
 
-    const isHeaderScrolled = inject(IsHeaderScrolledKey)
-    const isSidebarVisible = inject(IsSidebarVisibleKey)
+    const isHeaderScrolled = inject<Ref<boolean>>(IsHeaderScrolledKey)
+    const isSidebarVisible = inject<Ref<boolean>>(IsSidebarVisibleKey)
 
     const isFetching = computed(() => mediaStore.fetchState.isFetching)
 
@@ -106,11 +108,19 @@ export default defineComponent({
       document.activeElement?.blur()
       updateSearchState()
     }
+
     const areFiltersDisabled = computed(
       () => !searchStore.searchTypeIsSupported
     )
 
-    const toggleSidebar = () => uiStore.toggleFilters()
+    const toggleSidebar = () => {
+      const state = isSidebarVisible?.value ? "closed" : "opened"
+      sendCustomEvent("TOGGLE_FILTER_SIDEBAR", {
+        mediaType: searchStore.searchType,
+        state,
+      })
+      uiStore.toggleFilters()
+    }
 
     const isXl = computed(() => uiStore.isBreakpoint("xl"))
 

frontend/src/types/analytics.ts

@@ -139,6 +139,17 @@ export type Events = {
     /** The name of the Vue component used to switch content types. */
     component: string
   }
+  /**
+   * Description: The visibility of the filter sidebar on desktop is toggled
+   * Questions:
+   *   - Do a majority users prefer the sidebar visible or hidden?
+   */
+  TOGGLE_FILTER_SIDEBAR: {
+    /** The media type being searched */
+    mediaType: SearchType
+    /** The state of the filter sidebar after the user interaction. */
+    toState: "open" | "closed"
+  }
   /**
    * Description: The user clicks to a link outside of Openverse.
    * Questions: