fix: make category links nuxt-links

Author: rohrig

apps/nuxt/components/blocks/layout/TheTopNav.vue

@@ -49,10 +49,10 @@
                     <hr class="mb-3.5" />
                     <ul>
                       <li v-for="item in items" :key="item.title">
-                        <SfListItem tag="a" :href="item.link" size="sm" role="none"
+                        <ListItem :tag="NuxtLink" :href="item.link" size="sm" role="none"
                           class="typography-text-base md:typography-text-sm py-4 md:py-1.5">
                           {{ item.title }}
-                        </SfListItem>
+                        </ListItem>
                       </li>
                     </ul>
                   </div>
@@ -80,6 +80,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { NuxtLink } from '#components';
 import {
   SfButton,
   SfDrawer,
@@ -95,6 +96,7 @@ import {
 import { ref } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 import { sdk } from "~/sdk.config";
+import ListItem from "~/components/ui/ListItem.vue";
 
 const { isOpen, toggle, close } = useDisclosure();
 const menuRef = ref();

apps/nuxt/components/ui/ListItem.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+
+
+import {SfListItemSize} from "@storefront-ui/vue";
+export const sizeClasses = {
+  [SfListItemSize.sm]: 'text-sm px-4 py-1',
+  [SfListItemSize.base]: 'px-4 py-2',
+  [SfListItemSize.lg]: 'p-4',
+};
+</script>
+
+<script setup lang="ts">
+import { type PropType, type ConcreteComponent } from 'vue';
+import { SfListItemSize } from '@storefront-ui/vue';
+
+defineProps({
+  size: {
+    type: String as PropType<`${SfListItemSize}`>,
+    default: SfListItemSize.base,
+  },
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  tag: {
+    type: [String, Object] as PropType<string | ConcreteComponent>,
+    default: 'a',
+  },
+});
+</script>
+
+<template>
+  <component
+      :is="tag || 'li'"
+      :class="[
+      'inline-flex items-center gap-2 w-full hover:bg-neutral-100 active:bg-neutral-200 cursor-pointer focus-visible:outline focus-visible:outline-offset focus-visible:relative focus-visible:z-10',
+      sizeClasses[size],
+      { 'cursor-not-allowed pointer-events-none text-disabled-900': disabled, 'font-medium': selected },
+    ]"
+      :disabled="disabled"
+      data-testid="list-item"
+  >
+    <span v-if="$slots.prefix" :class="disabled ? 'text-disabled-500' : 'text-neutral-500'">
+      <slot name="prefix" />
+    </span>
+    <span class="flex flex-col w-full min-w-0">
+      <slot />
+    </span>
+    <span v-if="$slots.suffix" :class="disabled ? 'text-disabled-500' : 'text-neutral-500'">
+      <slot name="suffix" />
+    </span>
+  </component>
+</template>