project-s: 開発用にタブ分割する

src/components/SingerTab.vue

@@ -0,0 +1,46 @@
+<template>
+  <nav role="tab">
+    <ul class="singer-tab">
+      <li class="singer-tab-item">
+        <router-link to="/home">ボイス</router-link>
+      </li>
+      <li class="singer-tab-item">
+        <router-link to="/singer-home">シング</router-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+//import { useStore } from "@/store";
+//import { useRoute, useRouter } from "vue-router";
+export default defineComponent({
+  setup() {
+    //const store = useStore();
+    onMounted(async () => {
+      return null;
+    });
+    return null;
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.singer-tab {
+  border-bottom: 1px solid #ccc;
+  display: flex;
+  list-style: none;
+  padding-left: 0;
+}
+.singer-tab a {
+  display: block;
+  color: #333;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+  padding: 8px;
+}
+.singer-tab-item a.router-link-exact-active {
+  border-bottom-color: #000;
+}
+</style>

src/router/index.ts

@@ -5,12 +5,17 @@ import {
   RouteRecordRaw,
 } from "vue-router";
 import Home from "../views/Home.vue";
+import SingerHome from "../views/SingerHome.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/home",
     component: Home,
   },
+  {
+    path: "/singer-home",
+    component: SingerHome,
+  },
 ];
 
 const router = createRouter({

src/views/Home.vue

@@ -1,4 +1,5 @@
 <template>
+  <singer-tab />
   <menu-bar />
 
   <q-layout reveal elevated container class="layout-container">
@@ -174,6 +175,7 @@ import CharacterOrderDialog from "@/components/CharacterOrderDialog.vue";
 import AcceptRetrieveTelemetryDialog from "@/components/AcceptRetrieveTelemetryDialog.vue";
 import AcceptTermsDialog from "@/components/AcceptTermsDialog.vue";
 import DictionaryManageDialog from "@/components/DictionaryManageDialog.vue";
+import SingerTab from "@/components/SingerTab.vue";
 import { AudioItem, EngineState } from "@/store/type";
 import { QResizeObserver, useQuasar } from "quasar";
 import path from "path";
@@ -204,6 +206,7 @@ export default defineComponent({
     AcceptRetrieveTelemetryDialog,
     AcceptTermsDialog,
     DictionaryManageDialog,
+    SingerTab,
   },
 
   setup() {

src/views/SingerHome.vue

@@ -0,0 +1,40 @@
+<template>
+  <singer-tab />
+  <p>Singer Home</p>
+</template>
+
+<script lang="ts">
+import {
+  //computed,
+  defineComponent,
+  //onBeforeUpdate,
+  //onMounted,
+  //ref,
+  //watch,
+} from "vue";
+// import { useStore } from "@/store";
+// import { QResizeObserver, useQuasar } from "quasar";
+// import path from "path";
+
+import SingerTab from "@/components/SingerTab.vue";
+
+export default defineComponent({
+  name: "SingerHome",
+  components: { SingerTab },
+
+  setup() {
+    //const store = useStore();
+    //const $q = useQuasar();
+    return null;
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+.layout-container {
+  min-height: calc(100vh - #{vars.$menubar-height});
+}
+</style>