Build Nuxt 4 client cabinet with Apollo and GraphQL flows

app/components/ui/AppHeader.stories.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import AppHeader from './AppHeader.vue';
+
+const meta: Meta<typeof AppHeader> = {
+  title: 'UI/AppHeader',
+  component: AppHeader,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppHeader>;
+
+export const Default: Story = {};

app/components/ui/AppHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <header class="navbar bg-base-100 border-b border-base-300 sticky top-0 z-10">
+    <div class="navbar-start">
+      <NuxtLink to="/" class="btn btn-ghost text-xl">Fregat</NuxtLink>
+    </div>
+    <div class="navbar-center hidden md:flex">
+      <ul class="menu menu-horizontal px-1">
+        <li><NuxtLink to="/products">Товары</NuxtLink></li>
+        <li><NuxtLink to="/cart">Корзина</NuxtLink></li>
+        <li><NuxtLink to="/orders">Заказы</NuxtLink></li>
+        <li><NuxtLink to="/profile">Профиль</NuxtLink></li>
+      </ul>
+    </div>
+  </header>
+</template>