Add: [Client][Settings/General] 設定画面の雛形の大枠を作成

ひとまず Vuetify のコンポーネントをいろいろ使って仮組み

client/src/router/index.ts

@@ -2,9 +2,10 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import TVHome from '../views/TV/Home.vue';
-import TVWatch from '../views/TV/Watch.vue';
-import NotFound from '../views/NotFound.vue';
+import TVHome from '@/views/TV/Home.vue';
+import TVWatch from '@/views/TV/Watch.vue';
+import SettingsGeneral from '@/views/Settings/General.vue';
+import NotFound from '@/views/NotFound.vue';
 
 Vue.use(VueRouter);
 
@@ -23,6 +24,15 @@ const routes = [
     name: 'TV Watch',
     component: TVWatch,
   },
+  {
+    path: '/settings/',
+    redirect: '/settings/general',
+  },
+  {
+    path: '/settings/general',
+    name: 'Settings General',
+    component: SettingsGeneral,
+  },
   {
     path: '*',
     name: 'NotFound',

client/src/views/Settings/General.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="route-container">
+        <Header/>
+        <main class="settings-container">
+            <Navigation/>
+            <v-card class="d-flex px-5 mx-auto background" width="100%" max-width="1000">
+                <v-navigation-drawer permanent class="flex-shrink-0 pt-4 pb-4 background" width="200" height="100%">
+                    <v-list-item class="px-4">
+                        <v-list-item-content>
+                            <h1>設定</h1>
+                        </v-list-item-content>
+                    </v-list-item>
+                    <v-list nav class="mt-2 px-0">
+                        <v-list-item link color="primary" class="px-4" to="/settings/general">
+                            <v-list-item-icon class="mr-5">
+                                <Icon icon="fluent:settings-20-filled" width="27px" />
+                            </v-list-item-icon>
+                            <v-list-item-content>
+                                <v-list-item-title>全般</v-list-item-title>
+                            </v-list-item-content>
+                        </v-list-item>
+                        <v-list-item link color="primary" class="px-4" to="/settings/account">
+                            <v-list-item-icon class="mr-5">
+                                <Icon icon="fluent:person-20-filled" width="27px" />
+                            </v-list-item-icon>
+                            <v-list-item-content>
+                                <v-list-item-title>アカウント</v-list-item-title>
+                            </v-list-item-content>
+                        </v-list-item>
+                        <v-list-item link color="primary" class="px-4" to="/settings/jikkyo">
+                            <v-list-item-icon class="mr-5">
+                                <Icon icon="bi:chat-left-text-fill" width="27px" />
+                            </v-list-item-icon>
+                            <v-list-item-content>
+                                <v-list-item-title>ニコニコ実況</v-list-item-title>
+                            </v-list-item-content>
+                        </v-list-item>
+                        <v-list-item link color="primary" class="px-4" to="/settings/twitter">
+                            <v-list-item-icon class="mr-5">
+                                <Icon icon="fa-brands:twitter" width="27px" />
+                            </v-list-item-icon>
+                            <v-list-item-content>
+                                <v-list-item-title>Twitter</v-list-item-title>
+                            </v-list-item-content>
+                        </v-list-item>
+                    </v-list>
+                </v-navigation-drawer>
+                <v-card class="mt-4 mb-4 ml-5 background lighten-1" width="100%">
+                </v-card>
+            </v-card>
+        </main>
+    </div>
+</template>
+<script lang="ts">
+
+import Vue from 'vue';
+
+import Header from '@/components/Header.vue';
+import Navigation from '@/components/Navigation.vue';
+
+export default Vue.extend({
+    name: 'Home',
+    components: {
+        Header,
+        Navigation,
+    },
+});
+
+</script>
+<style lang="scss" scoped>
+
+
+
+</style>