Update

src/components/VContentSwitcher/VMobileMenuModal.vue

@@ -9,6 +9,7 @@
       <VSearchTypeButton
         :a11y-props="a11yProps"
         :visible="visible"
+        :active-item="activeItem"
         aria-controls="content-switcher-modal"
       />
     </template>

src/components/VContentSwitcher/VSearchTypeButton.vue

@@ -1,69 +1,108 @@
 <template>
   <VButton
-    class="flex h-12 w-12 flex-row xl:w-auto xl:px-2 xl:ps-3"
-    variant="action-menu"
+    class="flex flex-row py-2 text-sr font-semibold md:text-base"
+    :class="[
+      sizeClasses,
+      isHeaderScrolled ? 'max-w-[10rem] sm:max-w-[20rem] md:max-w-[16rem]' : '',
+    ]"
+    :variant="buttonVariant"
     size="disabled"
     :aria-label="buttonLabel"
     v-bind="a11yProps"
     @click="$emit('click')"
   >
     <VIcon :icon-path="icon" />
     <span
-      class="label-regular hidden truncate xl:block xl:ms-2 xl:text-start"
+      class="md:block md:truncate md:ms-2 md:text-start"
+      :class="isHeaderScrolled ? 'hidden' : 'block truncate ms-2 text-start'"
       >{{ buttonLabel }}</span
     >
-    <VIcon class="hidden xl:block xl:ms-2" :icon-path="caretDownIcon" />
+    <VIcon
+      class="hidden text-dark-charcoal-40 md:block md:ms-2"
+      :icon-path="caretDownIcon"
+    />
   </VButton>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  inject,
+  PropType,
+  ref,
+} from '@nuxtjs/composition-api'
 
-import { ALL_MEDIA, AUDIO, IMAGE, MODEL_3D, VIDEO } from '~/constants/media'
+import { ALL_MEDIA, SearchType } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
 import { useI18n } from '~/composables/use-i18n'
+import { isMinScreen } from '~/composables/use-media-query'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
 
 import caretDownIcon from '~/assets/icons/caret-down.svg'
 
-const labels = {
-  [ALL_MEDIA]: 'search-type.all',
-  [IMAGE]: 'search-type.image',
-  [AUDIO]: 'search-type.audio',
-  [VIDEO]: 'search-type.video',
-  [MODEL_3D]: 'search-type.model-3d',
-}
-
-/**
- * This is the search type button that appears in the header, not on the homepage.
- */
 export default defineComponent({
   name: 'VSearchTypeButton',
   components: { VButton, VIcon },
   props: {
     a11yProps: {
       type: Object,
-      default: () => ({
-        'aria-expanded': false,
-        'aria-haspopup': 'dialog',
-      }),
+      required: true,
+    },
+    activeItem: {
+      type: String as PropType<SearchType>,
+      default: ALL_MEDIA,
+    },
+    type: {
+      type: String as PropType<'header' | 'searchbar'>,
+      default: 'header',
     },
   },
-  setup() {
+  setup(props) {
     const i18n = useI18n()
-    const { icons, activeType } = useSearchType()
-
-    const activeItem = computed(() => activeType.value)
+    const isHeaderScrolled = inject('isHeaderScrolled', ref(null))
+    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
 
-    const buttonLabel = computed(() => i18n.t(labels[activeItem.value]))
+    const { icons, activeType: activeItem } = useSearchType()
+    const isIconButton = computed(
+      () => isHeaderScrolled?.value && !isMinScreenMd.value
+    )
+    const sizeClasses = computed(() => {
+      if (props.type === 'searchbar') {
+        return 'h-12 px-2'
+      } else if (isIconButton.value) {
+        return 'w-10 h-10'
+      } else {
+        /**
+          When there is a caret down icon (on 'md' screens), paddings are balanced,
+          without it, paddings need to be adjusted.
+          */
+        return 'ps-2 pe-3 md:px-2'
+      }
+    })
 
-    const icon = computed(() => icons[activeItem.value])
+    const buttonVariant = computed(() => {
+      if (props.type === 'searchbar') {
+        return 'action-menu'
+      } else {
+        return isMinScreenMd.value && !isHeaderScrolled?.value
+          ? 'tertiary'
+          : 'action-menu'
+      }
+    })
+    const buttonLabel = computed(() => {
+      return i18n.t(`search-type.${props.activeItem}`)
+    })
 
     return {
+      buttonVariant,
+      sizeClasses,
       buttonLabel,
       caretDownIcon,
-      icon,
+      isHeaderScrolled,
+      isMinScreenMd,
+      icon: computed(() => icons[activeItem.value]),
     }
   },
 })

src/composables/use-search-type.ts

@@ -26,7 +26,7 @@ const icons = {
   [IMAGE]: imageIcon,
   [VIDEO]: videoIcon,
   [MODEL_3D]: model3dIcon,
-} as const
+}
 
 export default function useSearchType() {
   const activeType = computed(() => useSearchStore().searchType)
@@ -54,5 +54,3 @@ export default function useSearchType() {
     additionalTypes,
   }
 }
-
-export type UseSearchTypeReturn = ReturnType<typeof useSearchType>