Init

apps/web/components/Header.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const links = [{
+  label: 'Documentation',
+  icon: 'i-heroicons-book-open',
+  to: 'https://ui.nuxt.com/getting-started',
+}, {
+  label: 'Pro',
+  icon: 'i-heroicons-square-3-stack-3d',
+  to: 'https://ui.nuxt.com/pro',
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch',
+  to: 'https://github.com/nuxt/ui/releases',
+  target: '_blank',
+}]
+</script>
+
+<template>
+  <UHeader :links="links">
+    <template #logo>
+      <Logo class="h-6 w-auto" />
+    </template>
+
+    <template #right>
+      <UColorModeButton />
+      <UserDropdown />
+    </template>
+
+    <template #panel>
+      <UNavigationTree :links="links" />
+    </template>
+  </UHeader>
+</template>

apps/web/components/Logo.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <span class="text-primary">Nuxt</span> Breeze
+  </div>
+</template>

apps/web/components/Navigation.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const links = [
+  {
+    label: 'Company',
+    icon: 'i-heroicons-building-office-2',
+    children: [
+      {
+        label: 'Overview',
+        to: '/login',
+        icon: 'i-heroicons-eye',
+      },
+      {
+        label: 'Add Company',
+        to: '/login',
+        icon: 'i-heroicons-plus-circle',
+      },
+    ],
+  },
+  {
+    label: 'People',
+    to: '/login',
+    icon: 'i-heroicons-user-group',
+  },
+]
+</script>
+
+<template>
+  <UContainer>
+    <UNavigationTree :links="links" />
+  </UContainer>
+</template>

apps/web/components/UserDropdown.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const links = [{
+  label: 'Logout',
+  to: '/logout',
+  icon: 'i-heroicons-arrow-left-on-rectangle',
+}]
+</script>
+
+<template>
+  <UPopover>
+    <UButton icon="i-heroicons-user-solid" color="gray" variant="ghost" />
+    <template #panel>
+      <div class="p-4">
+        <UNavigationLinks :links="links" />
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<style scoped>
+
+</style>