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),
+      })),
+  });

wp-content/themes/headless/server/utils/auth.ts

@@ -43,10 +43,10 @@ export async function handleLogout(event: H3Event) {
  * @param user The AuthUserFragment containing user data from the GraphQL response
  * @returns A User object with the expected structure for nuxt-auth-utils, including an array of role names
  */
-function getAuthUser(user: AuthUserFragment) {
+function getAuthUser({ roles, ...user }: AuthUserFragment) {
   return {
     ...user,
-    roles: user.roles.nodes.map(({ name }) => name) || [],
+    roles: extractNodes(roles).map(({ name }) => name),
   };
 }
 

wp-content/themes/headless/shared/utils/graphql.ts

@@ -0,0 +1,4 @@
+// Helper: Extracts nodes from a GraphQL connection object, returning an empty array if nodes are absent.
+export function extractNodes<T>(connection: { nodes?: T[] } | null | undefined): T[] {
+  return connection?.nodes ?? [];
+}