feat: useMenuItems

wp-content/themes/headless/app/components/site/SiteHeader.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+const { data: menuItems } = await useMenuItems({ location: "MAIN" });
+</script>
+
 <template>
   <UHeader mode="slideover">
     <template #left>
@@ -5,5 +9,9 @@
         <SvgSiteLogo class="h-10 w-auto" />
       </NuxtLink>
     </template>
+    <UNavigationMenu :items="menuItems" content-orientation="vertical" />
+    <template #body>
+      <UNavigationMenu :items="menuItems" orientation="vertical" class="-mx-2.5" />
+    </template>
   </UHeader>
 </template>

wp-content/themes/headless/app/composables/useAuthConnexion.ts

@@ -1,4 +1,4 @@
-import { delay } from "es-toolkit/promise";
+import { delay } from "es-toolkit";
 
 import type { ButtonProps } from "@nuxt/ui";
 import type { FormSubmitEvent } from "@nuxt/ui";

wp-content/themes/headless/app/composables/useMenuItems.gql

@@ -0,0 +1,19 @@
+fragment MenuItem on MenuItem {
+  id
+  label @nullToUndefined
+  to: path @nullToUndefined
+  target
+}
+
+query MenuItems($location: MenuLocationEnum) {
+  menuItems(where: { location: $location, parentDatabaseId: 0 }) {
+    nodes {
+      ...MenuItem
+      childItems {
+        nodes {
+          ...MenuItem
+        }
+      }
+    }
+  }
+}

wp-content/themes/headless/app/composables/useMenuItems.ts

@@ -0,0 +1,10 @@
+import type { MenuItemsVariables } from "#graphql/types";
+
+export const useMenuItems = (variables: MenuItemsVariables) =>
+  useAsyncGraphQLQuery("MenuItems", variables, {
+    transform: ({ menuItems }) =>
+      extractNodes(menuItems).map(({ childItems, ...menuItem }) => ({
+        ...menuItem,
+        children: extractNodes(childItems),
+      })),
+  });