router update

src/components/Detail/NavDetail.vue

@@ -0,0 +1,9 @@
+<template>
+    666
+</template>
+<script setup>
+
+</script>
+<style scoped>
+
+</style>

src/components/Home/HomePage.vue

@@ -1,53 +1,31 @@
 <template>
-  <body  translate="no">
-    <div class="video-bg">
-      <video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
-        <source src="../../assets/video/background.mp4" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>
+  <div class="wrapper">
+    <LeftSide></LeftSide>
+    <MainContainer></MainContainer>
   </div>
-    <div class="dark-light">
-      <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
-           stroke-linejoin="round">
-        <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
-      </svg>
-    </div>
-    <div class="app">
-      <HomeHeader></HomeHeader>
-      <contentWrapper></contentWrapper>
-      <div class="overlay-app"></div>
-    </div>
-  </body>
 </template>
 <script>
-// import $ from 'jquery'
-import HomeHeader from "@/components/Home/HomeHeader.vue";
-import contentWrapper from "@/components/Home/ContentWrapper.vue";
+import MainContainer from "@/components/Home/MainContainer.vue";
+import LeftSide from "@/components/Home/LeftSide.vue";
 
 export default {
   name: "HomePage",
   components: {
-    HomeHeader,
-    contentWrapper
+    LeftSide, MainContainer
+
   },
   data() {
     return {}
   },
   mounted() {
-    this.toggleDarkLight();
+
   },
   created() {
 
   },
   computed: {},
   methods: {
-    toggleDarkLight() {
-      const toggleButton = document.querySelector('.dark-light');
 
-      toggleButton.addEventListener('click', () => {
-        document.body.classList.toggle('light-mode');
-      });
-    }
   }
 
 }

src/router/index.js

@@ -1,11 +1,24 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import Index from '../views/HomeView.vue'
+import index from '../views/Index.vue'
+import home from "@/components/Home/HomePage.vue";
+
 
 const routes = [
   {
     path: '/',
+    redirect: '/index'
+  },
+  {
+    path: '/index',
+    redirect: '/home',
     name: 'index',
-    component: Index
+    component: index,
+    children: [
+      {
+        path: '/home',
+        name: 'home',
+        component: home
+      }],
   },
 
 ]

src/views/HomeView.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="home">
-    <HomePage></HomePage>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HomePage from '@/components/Home/HomePage.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HomePage
-  }
-}
-</script>

src/views/Index.vue

@@ -0,0 +1,57 @@
+<template>
+<!--  <div class="home">-->
+<!--    <HomePage></HomePage>-->
+<!--  </div>-->
+  <body  translate="no">
+  <div class="video-bg">
+    <video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
+      <source src="../assets/video/background.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+  </div>
+  <div class="dark-light">
+    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
+         stroke-linejoin="round">
+      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+    </svg>
+  </div>
+  <div class="app">
+    <HomeHeader></HomeHeader>
+    <router-view></router-view>
+    <div class="overlay-app"></div>
+  </div>
+  </body>
+</template>
+
+<script>
+// @ is an alias to /src
+// import HomePage from '@/components/Home/HomePage.vue'
+// import contentWrapper from "@/components/Home/ContentWrapper.vue";
+import HomeHeader from "@/components/Home/HomeHeader.vue";
+
+export default {
+  name: 'HomeView',
+  components: {
+    HomeHeader,
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    this.toggleDarkLight();
+  },
+  created() {
+
+  },
+  computed: {},
+  methods:{
+    toggleDarkLight() {
+      const toggleButton = document.querySelector('.dark-light');
+
+      toggleButton.addEventListener('click', () => {
+        document.body.classList.toggle('light-mode');
+      });
+    }
+  }
+}
+</script>