feat(entry): entry layouts

app.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="h-screen">
-    <Header />
-    <UContainer>
+    <NuxtLayout>
       <NuxtPage />
-    </UContainer>
+    </NuxtLayout>
     <UNotifications />
-    <Footer />
   </div>
 </template>
 

components/entry/Menu.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="w-full h-16 px-20 flex items-center justify-between border-b border-gray-200 dark:border-gray-800">
+    <NuxtLink to="/" class="flex items-end font-bold text-xl" aria-label="Nuxt UI">
+      <Logo />
+    </NuxtLink>
+
+    <ul class="flex justify-end flex-1">
+      <NuxtLink
+        v-for="(link, index) in links" :key="index" icon="i-heroicons-lock-closed" :to="link.to"
+        class="flex items-end gap-1.5 font-bold"
+      >
+        <li class="text-sm font-semibold mr-6">
+          {{ link.label }}
+        </li>
+      </NuxtLink>
+    </ul>
+
+    <ColorModeButton />
+
+    <UButton to="https://github.com/OsmanthusBeer/api-beer" icon="i-mdi-github" variant="ghost" aria-label="Github" />
+
+    <div class="flex ml-6 pl-6 border-l">
+      <!-- <NuxtLink v-if="user" to="/dashboard" class="flex items-center gap-2 cursor-pointer"> -->
+      <!-- TODO: Use `gavatar` -->
+      <UDropdown
+        v-if="user" :items="dropdownItems"
+        :ui="{ item: { disabled: 'cursor-text select-text' } }"
+        :popper="{ placement: 'bottom-start' }"
+      >
+        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+        <template #account="{ item }">
+          <div class="text-left">
+            <p>
+              Signed in as
+            </p>
+            <p class="truncate font-medium text-gray-900 dark:text-white">
+              {{ item.label }}
+            </p>
+          </div>
+        </template>
+      </UDropdown>
+      <!-- </NuxtLink> -->
+      <UButton v-else to="/login">
+        Login
+      </UButton>
+    </div>
+  </div>
+</template>

layouts/default.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <Header />
+    <UContainer>
+      <slot />
+    </UContainer>
+    <Footer />
+  </div>
+</template>

layouts/entrySidebar.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="flex">
+    <div class="relative w-[280px] h-screen px-4 py-8 border-r border-gray-200 dark:border-gray-800">
+      <!-- logo -->
+      <div class="flex items-center">
+        <img class="w-[42px] mr-2" src="/logo_148x148.png" alt="">
+        <span class="text-2xl font-extrabold">API Beer</span>
+      </div>
+      <!-- team list -->
+      <div class="mt-10">
+        <div class="text-xs font-semibold">
+          Your teams
+        </div>
+        <ul class="h-3/5 overflow-auto mt-2">
+          <li class="p-2 my-2 rounded text-gray-300 cursor-pointer hover:bg-gray-700 hover:text-white">
+            <UKbd>A</UKbd>
+            <span class="ml-4 font-semibold align-middle">Team A</span>
+          </li>
+          <li class="p-2 my-2 rounded text-gray-300 cursor-pointer hover:bg-gray-700 hover:text-white">
+            <UKbd>B</UKbd>
+            <span class="ml-4 font-semibold text-gray-300 align-middle">Team B</span>
+          </li>
+          <li class="p-2 my-2 rounded text-gray-300 cursor-pointer hover:bg-gray-700 hover:text-white">
+            <UKbd>C</UKbd>
+            <span class="ml-4 font-semibold align-middle">Team C</span>
+          </li>
+        </ul>
+      </div>
+      <!-- bottom menu -->
+      <div class="absolute p-2 pl-6 left-0 bottom-8 w-full h-[40px] flex items-center">
+        <UIcon name="i-mdi-cog" />
+        <span class="ml-4 font-bold">Settings</span>
+      </div>
+    </div>
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>

pages/dashboard.vue

@@ -1,6 +1,8 @@
 <script setup>
+definePageMeta({
+  layout: 'entry-sidebar',
+})
 const { $client } = useNuxtApp()
-
 const { pending, error, data: projects } = $client.protected.projectList.useQuery()
 </script>
 

pages/roadmap.vue

@@ -3,8 +3,10 @@ definePageMeta({
   title: 'Home',
   requiredAuth: false,
 })
+
+const colorMode = useColorMode()
 </script>
 
 <template>
-  <iframe class="w-full min-h-[100vh]" src="https://volta.net/embed/eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsInRvZG8iLCJpbl9wcm9ncmVzcyIsImluX3JldmlldyIsImRvbmUiLCJyZWxlYXNlZCIsImNhbmNlbGxlZCJdLCJib2FyZExpbmtlZFBycyI6dHJ1ZSwibGlzdEdyb3VwIjoic3RhdHVzIiwibGlzdE9yZGVyIjoiY3JlYXRlZF9hdCIsInRpbWVsaW5lWm9vbSI6Im1vbnRoIiwidGltZWxpbmVPcmRlciI6InN0YXRlIiwidGltZWxpbmVEaXNwbGF5IjoiYWxsX21pbGVzdG9uZXMiLCJmaWx0ZXJzIjp7fSwib3duZXIiOiJPc21hbnRodXNCZWVyIiwibmFtZSI6ImFwaS1iZWVyIn0=?theme=dark&gray=slate&primary=green" />
+  <iframe class="w-full min-h-[100vh]" :src="`https://volta.net/embed/eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsInRvZG8iLCJpbl9wcm9ncmVzcyIsImluX3JldmlldyIsImRvbmUiLCJyZWxlYXNlZCIsImNhbmNlbGxlZCJdLCJib2FyZExpbmtlZFBycyI6dHJ1ZSwibGlzdEdyb3VwIjoic3RhdHVzIiwibGlzdE9yZGVyIjoiY3JlYXRlZF9hdCIsInRpbWVsaW5lWm9vbSI6Im1vbnRoIiwidGltZWxpbmVPcmRlciI6InN0YXRlIiwidGltZWxpbmVEaXNwbGF5IjoiYWxsX21pbGVzdG9uZXMiLCJmaWx0ZXJzIjp7fSwib3duZXIiOiJPc21hbnRodXNCZWVyIiwibmFtZSI6ImFwaS1iZWVyIn0=?theme=${colorMode}&gray=slate&primary=green`" />
 </template>