feat: add base layout components

Signed-off-by: Ryan Wang <i@ryanc.cc>

index.html

@@ -44,7 +44,7 @@
         JavaScript enabled. Please enable it to continue.
       </strong>
     </noscript>
-    <div id="app">
+    <div id="app" class="h-screen">
       <div id="loader"></div>
     </div>
     <script type="module" src="/src/main.ts"></script>

src/App.vue

@@ -1,22 +1,9 @@
 <script lang="ts" setup>
 import { RouterView } from "vue-router";
-import { VRoutesMenu } from "@/components/base/menu";
-import { menus } from "@/router/menus.config";
-import logo from "@/assets/logo.svg";
 </script>
 
 <template>
-  <div class="flex">
-    <div class="navbar h-screen w-72 p-4" style="background: #fff">
-      <div class="logo flex justify-center pt-2 pb-6">
-        <img :src="logo" style="width: 80px" alt="Halo Logo" />
-      </div>
-      <VRoutesMenu :menus="menus" />
-    </div>
-    <div class="flex-1">
   <RouterView />
-    </div>
-  </div>
 </template>
 
 <style lang="scss">

src/components/base/menu/Menu.vue

@@ -13,7 +13,7 @@ provide<string[] | undefined>("openIds", props.openIds);
 </script>
 
 <template>
-  <div class="menu-container w-full h-full">
+  <div class="menu-container p-3 w-full">
     <ul>
       <slot />
     </ul>

src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`Menu > should render 1`] = `
-"<div class=\\"menu-container w-full h-full\\">
+"<div class=\\"menu-container p-3 w-full\\">
   <ul></ul>
 </div>"
 `;
@@ -19,7 +19,7 @@ exports[`Menu > should render 2`] = `
 `;
 
 exports[`Menu > should work with openIds prop 1`] = `
-"<div class=\\"menu-container w-full h-full\\">
+"<div class=\\"menu-container p-3 w-full\\">
   <ul>
     <li class=\\"menu-item\\">
       <div class=\\"menu-item-title\\">
@@ -62,7 +62,7 @@ exports[`Menu > should work with openIds prop 1`] = `
 `;
 
 exports[`Menu > should work with sub menus 1`] = `
-"<div class=\\"menu-container w-full h-full\\">
+"<div class=\\"menu-container p-3 w-full\\">
   <ul>
     <li class=\\"menu-item\\">
       <div class=\\"menu-item-title\\">

src/layouts/BlankLayout.vue

@@ -0,0 +1,7 @@
+<template>
+  <RouterView />
+</template>
+
+<script lang="ts" setup>
+import { RouterView } from "vue-router";
+</script>

src/layouts/FilledLayout.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex h-full">
+    <aside class="navbar h-full" style="background: #fff">
+      <div class="logo flex justify-center py-6">
+        <img :src="logo" style="width: 80px" alt="Halo Logo" />
+      </div>
+      <VRoutesMenu :menus="menus" />
+    </aside>
+    <main class="content w-full overflow-y-auto">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VRoutesMenu } from "@/components/base/menu";
+import { menus } from "@/router/menus.config";
+import logo from "@/assets/logo.svg";
+</script>
+
+<style lang="scss">
+.navbar {
+  flex: 0 0 270px;
+}
+</style>

src/layouts/index.ts

@@ -0,0 +1,2 @@
+export { default as BlankLayout } from "./BlankLayout.vue";
+export { default as FilledLayout } from "./FilledLayout.vue";

src/views/AboutView.vue

@@ -1,11 +1,15 @@
 <script lang="ts" setup>
+import { FilledLayout } from "@/layouts";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
 </script>
 
 <template>
-  <div class="about">
-    <pre>Route: {{ route }}</pre>
+  <FilledLayout>
+    <div>
+      <pre class="overflow-auto w-3/4">Route: {{ route }}</pre>
+      <pre class="overflow-auto w-3/4">Route: {{ route }}</pre>
     </div>
+  </FilledLayout>
 </template>

src/views/HomeView.vue

@@ -1,9 +1,12 @@
 <template>
+  <FilledLayout>
     <main class="text-red-600">Hello Halo!</main>
     <VInput v-model="value" />
     {{ value }}
+  </FilledLayout>
 </template>
 <script lang="ts" setup>
+import { FilledLayout } from "@/layouts";
 import { VInput } from "@/components/base/input";
 import { ref } from "vue";
 const value = ref();

src/views/__tests__/HomeView.spec.ts

@@ -1,11 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { mount } from "@vue/test-utils";
-import HomeView from "../HomeView.vue";
-
-describe("HomeView", () => {
-  it("renders properly", () => {
-    const wrapper = mount(HomeView);
-    expect(wrapper.text()).toContain("Hello Halo!");
-  });
-});