From 9c22d1c3f340104892ba087874149ff78b411857 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Mon, 12 Jun 2023 20:26:33 +0800
Subject: [PATCH 01/11] feat: switch dashboard page (WIP)

---
 .../MobileDashboard.vue}                      |  2 +-
 .../OverviewContent.vue                       |  2 +-
 .../{Overview => Dashboard}/RecentCard.vue    |  0
 src/components/NavigationBar.vue              | 29 +++++++++++------
 .../{Desktop => desktop}/AppBar.vue           |  0
 .../dashboard/DesktopDashboard.vue}           |  5 ++-
 .../dashboard}/OverviewContent.vue            |  2 +-
 .../dashboard}/RecentCard.vue                 |  0
 .../{PageOverview.vue => PageDashboard.vue}   | 10 +++---
 src/pages/PageHome.vue                        |  2 +-
 src/pages/dashboard/PageClass.vue             | 22 +++++++++++++
 src/pages/dashboard/PageExam.vue              | 20 ++++++++++++
 src/pages/dashboard/PageLesson.vue            | 20 ++++++++++++
 src/pages/dashboard/PageNote.vue              | 20 ++++++++++++
 src/pages/dashboard/PageOverview.vue          |  7 ++++
 src/router/index.ts                           | 32 +++++++++++++++++--
 test/components/Desktop/RecentCard.test.ts    |  2 +-
 test/components/Mobile/RecentCard.test.ts     |  2 +-
 18 files changed, 150 insertions(+), 27 deletions(-)
 rename src/components/Mobile/{Overview/MainView.vue => Dashboard/MobileDashboard.vue} (83%)
 rename src/components/Mobile/{Overview => Dashboard}/OverviewContent.vue (97%)
 rename src/components/Mobile/{Overview => Dashboard}/RecentCard.vue (100%)
 rename src/components/{Desktop => desktop}/AppBar.vue (100%)
 rename src/components/{Desktop/Overview/MainView.vue => desktop/dashboard/DesktopDashboard.vue} (64%)
 rename src/components/{Desktop/Overview => desktop/dashboard}/OverviewContent.vue (95%)
 rename src/components/{Desktop/Overview => desktop/dashboard}/RecentCard.vue (100%)
 rename src/pages/{PageOverview.vue => PageDashboard.vue} (69%)
 create mode 100644 src/pages/dashboard/PageClass.vue
 create mode 100644 src/pages/dashboard/PageExam.vue
 create mode 100644 src/pages/dashboard/PageLesson.vue
 create mode 100644 src/pages/dashboard/PageNote.vue
 create mode 100644 src/pages/dashboard/PageOverview.vue

diff --git a/src/components/Mobile/Overview/MainView.vue b/src/components/Mobile/Dashboard/MobileDashboard.vue
similarity index 83%
rename from src/components/Mobile/Overview/MainView.vue
rename to src/components/Mobile/Dashboard/MobileDashboard.vue
index 4a4c35d2..62da57cc 100644
--- a/src/components/Mobile/Overview/MainView.vue
+++ b/src/components/Mobile/Dashboard/MobileDashboard.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AppBar from '@/components/Mobile/AppBar.vue';
-import Content from '@/components/Mobile/Overview/OverviewContent.vue';
+import Content from '@/components/Mobile/Dashboard/OverviewContent.vue';
 import NavigationBar from '@/components/NavigationBar.vue';
 </script>
 
diff --git a/src/components/Mobile/Overview/OverviewContent.vue b/src/components/Mobile/Dashboard/OverviewContent.vue
similarity index 97%
rename from src/components/Mobile/Overview/OverviewContent.vue
rename to src/components/Mobile/Dashboard/OverviewContent.vue
index aac45d1c..d2cf7847 100644
--- a/src/components/Mobile/Overview/OverviewContent.vue
+++ b/src/components/Mobile/Dashboard/OverviewContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import RecentCard from '@/components/Mobile/Overview/RecentCard.vue';
+import RecentCard from '@/components/Mobile/Dashboard/RecentCard.vue';
 import { useUserStore } from '@/stores/models/user';
 
 const user = useUserStore().info;
diff --git a/src/components/Mobile/Overview/RecentCard.vue b/src/components/Mobile/Dashboard/RecentCard.vue
similarity index 100%
rename from src/components/Mobile/Overview/RecentCard.vue
rename to src/components/Mobile/Dashboard/RecentCard.vue
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 59a0c607..1e7c4849 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -1,11 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
-
-const activeIndex = ref(0);
-
-const handleChangeActive = (index: number) => {
-  activeIndex.value = index;
-};
+import { useRouter } from 'vue-router';
 
 const navbarItems = [
   {
@@ -17,7 +12,7 @@ const navbarItems = [
       </svg>
     `,
     name: '總覽',
-    link: '/overview',
+    link: 'overview',
   },
   {
     icon: `
@@ -27,7 +22,7 @@ const navbarItems = [
         />
     `,
     name: '我的班級',
-    link: '/classroom',
+    link: 'class',
   },
   {
     icon: `
@@ -37,7 +32,7 @@ const navbarItems = [
         />
     `,
     name: '我的課堂',
-    link: '/lesson',
+    link: 'lesson',
   },
   {
     icon: `
@@ -65,9 +60,23 @@ const navbarItems = [
       />
     `,
     name: '試題庫',
-    link: '/question',
+    link: 'exam',
   },
 ];
+
+const router = useRouter();
+
+const defaultIndex = navbarItems.findIndex(
+  (item) => item.link === router.currentRoute.value.path.split('/')[2]
+);
+const activeIndex = ref(defaultIndex);
+
+const handleChangeActive = (index: number) => {
+  activeIndex.value = index;
+  const item = navbarItems[index];
+  console.log(item.link);
+  router.push(`/dashboard/${item.link}`);
+};
 </script>
 
 <template>
diff --git a/src/components/Desktop/AppBar.vue b/src/components/desktop/AppBar.vue
similarity index 100%
rename from src/components/Desktop/AppBar.vue
rename to src/components/desktop/AppBar.vue
diff --git a/src/components/Desktop/Overview/MainView.vue b/src/components/desktop/dashboard/DesktopDashboard.vue
similarity index 64%
rename from src/components/Desktop/Overview/MainView.vue
rename to src/components/desktop/dashboard/DesktopDashboard.vue
index d80d54d3..9d585279 100644
--- a/src/components/Desktop/Overview/MainView.vue
+++ b/src/components/desktop/dashboard/DesktopDashboard.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import AppBar from '@/components/Desktop/AppBar.vue';
+import AppBar from '@/components/desktop/AppBar.vue';
 import NavigationBar from '@/components/NavigationBar.vue';
-import Content from '@/components/Desktop/Overview/OverviewContent.vue';
 </script>
 
 <template>
   <NavigationBar />
   <div class="flex flex-col">
     <AppBar />
-    <Content />
+    <router-view />
   </div>
 </template>
 
diff --git a/src/components/Desktop/Overview/OverviewContent.vue b/src/components/desktop/dashboard/OverviewContent.vue
similarity index 95%
rename from src/components/Desktop/Overview/OverviewContent.vue
rename to src/components/desktop/dashboard/OverviewContent.vue
index 11c064ea..2e00a702 100644
--- a/src/components/Desktop/Overview/OverviewContent.vue
+++ b/src/components/desktop/dashboard/OverviewContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import RecentCard from '@/components/Desktop/Overview/RecentCard.vue';
+import RecentCard from '@/components/desktop/dashboard/RecentCard.vue';
 
 const cardDemoData = [
   { name: 'math' },
diff --git a/src/components/Desktop/Overview/RecentCard.vue b/src/components/desktop/dashboard/RecentCard.vue
similarity index 100%
rename from src/components/Desktop/Overview/RecentCard.vue
rename to src/components/desktop/dashboard/RecentCard.vue
diff --git a/src/pages/PageOverview.vue b/src/pages/PageDashboard.vue
similarity index 69%
rename from src/pages/PageOverview.vue
rename to src/pages/PageDashboard.vue
index d58a84c4..306f043a 100644
--- a/src/pages/PageOverview.vue
+++ b/src/pages/PageDashboard.vue
@@ -2,8 +2,8 @@
 import { defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/models/user';
-import DesktopView from '@/components/Desktop/Overview/MainView.vue';
-import MobileView from '@/components/Mobile/Overview/MainView.vue';
+import DesktopDashboard from '@/components/desktop/dashboard/DesktopDashboard.vue';
+import MobileDashboard from '@/components/Mobile/Dashboard/MobileDashboard.vue';
 
 const MainView = defineAsyncComponent(
   () => import('@/components/MainView.vue')
@@ -18,12 +18,12 @@ if (!isLogin) {
 </script>
 
 <template>
-  <MainView id="overview" class="select-none">
+  <MainView id="dashboard" class="select-none">
     <div class="w-[100%] phone:hidden">
-      <DesktopView />
+      <DesktopDashboard />
     </div>
     <div class="w-[100%] max-phone:hidden">
-      <MobileView />
+      <MobileDashboard />
     </div>
   </MainView>
 </template>
diff --git a/src/pages/PageHome.vue b/src/pages/PageHome.vue
index 6bb7f432..c9ec1916 100644
--- a/src/pages/PageHome.vue
+++ b/src/pages/PageHome.vue
@@ -6,7 +6,7 @@ import { useUserStore } from '@/stores/models/user';
 const isLogin = useUserStore().isLoggedIn();
 const router = useRouter();
 if (isLogin) {
-  router.push('/overview');
+  router.push('/dashboard');
 } else {
   router.push('/account/login');
 }
diff --git a/src/pages/dashboard/PageClass.vue b/src/pages/dashboard/PageClass.vue
new file mode 100644
index 00000000..a1f2a025
--- /dev/null
+++ b/src/pages/dashboard/PageClass.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="flex">
+    <p>此功能正在製作中</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: black;
+  text-align: center;
+
+  .dark & {
+    color: white;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/PageExam.vue b/src/pages/dashboard/PageExam.vue
new file mode 100644
index 00000000..8dc13e56
--- /dev/null
+++ b/src/pages/dashboard/PageExam.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup></script>
+
+<template>
+  <p>此功能正在製作中</p>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: black;
+  text-align: center;
+
+  .dark & {
+    color: white;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/PageLesson.vue b/src/pages/dashboard/PageLesson.vue
new file mode 100644
index 00000000..8dc13e56
--- /dev/null
+++ b/src/pages/dashboard/PageLesson.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup></script>
+
+<template>
+  <p>此功能正在製作中</p>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: black;
+  text-align: center;
+
+  .dark & {
+    color: white;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/PageNote.vue b/src/pages/dashboard/PageNote.vue
new file mode 100644
index 00000000..8dc13e56
--- /dev/null
+++ b/src/pages/dashboard/PageNote.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup></script>
+
+<template>
+  <p>此功能正在製作中</p>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: black;
+  text-align: center;
+
+  .dark & {
+    color: white;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/PageOverview.vue b/src/pages/dashboard/PageOverview.vue
new file mode 100644
index 00000000..9b30d3b0
--- /dev/null
+++ b/src/pages/dashboard/PageOverview.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import Content from '@/components/desktop/dashboard/OverviewContent.vue';
+</script>
+
+<template>
+  <Content />
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 17d0576d..de958feb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,9 +12,35 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/PageHome.vue'),
   },
   {
-    path: '/overview',
-    name: 'Overview',
-    component: () => import('@/pages/PageOverview.vue'),
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: () => import('@/pages/PageDashboard.vue'),
+    children: [
+      {
+        path: '',
+        redirect: 'dashboard/overview',
+      },
+      {
+        path: 'overview',
+        component: () => import('@/pages/dashboard/PageOverview.vue'),
+      },
+      {
+        path: 'class',
+        component: () => import('@/pages/dashboard/PageClass.vue'),
+      },
+      {
+        path: 'lesson',
+        component: () => import('@/pages/dashboard/PageLesson.vue'),
+      },
+      {
+        path: 'note',
+        component: () => import('@/pages/dashboard/PageNote.vue'),
+      },
+      {
+        path: 'exam',
+        component: () => import('@/pages/dashboard/PageExam.vue'),
+      },
+    ],
   },
   {
     path: '/account',
diff --git a/test/components/Desktop/RecentCard.test.ts b/test/components/Desktop/RecentCard.test.ts
index 17e3dae5..80853ee3 100644
--- a/test/components/Desktop/RecentCard.test.ts
+++ b/test/components/Desktop/RecentCard.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import RecentCardVue from '@/components/Desktop/Overview/RecentCard.vue';
+import RecentCardVue from '@/components/Desktop/Dashboard/RecentCard.vue';
 
 describe('Recent card', () => {
   test('check the card name & math', () => {
diff --git a/test/components/Mobile/RecentCard.test.ts b/test/components/Mobile/RecentCard.test.ts
index de75772d..e929a65a 100644
--- a/test/components/Mobile/RecentCard.test.ts
+++ b/test/components/Mobile/RecentCard.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import RecentCardVue from '@/components/Mobile/Overview/RecentCard.vue';
+import RecentCardVue from '@/components/Mobile/Dashboard/RecentCard.vue';
 
 describe('Recent card', () => {
   test('check the card name & math', () => {

From 0642f3a8a34b33a78d6443c59af7fb54c1fe1dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Mon, 12 Jun 2023 21:36:00 +0800
Subject: [PATCH 02/11] fix: adjust content block position and size

Co-Authored-By: LAZPbanahaker <pn0818x@outlook.com>
---
 src/pages/dashboard/PageClass.vue  | 4 +++-
 src/pages/dashboard/PageExam.vue   | 6 +++++-
 src/pages/dashboard/PageLesson.vue | 6 +++++-
 src/pages/dashboard/PageNote.vue   | 6 +++++-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/pages/dashboard/PageClass.vue b/src/pages/dashboard/PageClass.vue
index a1f2a025..6a75bc74 100644
--- a/src/pages/dashboard/PageClass.vue
+++ b/src/pages/dashboard/PageClass.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="flex">
+  <div
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)]"
+  >
     <p>此功能正在製作中</p>
   </div>
 </template>
diff --git a/src/pages/dashboard/PageExam.vue b/src/pages/dashboard/PageExam.vue
index 8dc13e56..6a75bc74 100644
--- a/src/pages/dashboard/PageExam.vue
+++ b/src/pages/dashboard/PageExam.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup></script>
 
 <template>
-  <p>此功能正在製作中</p>
+  <div
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)]"
+  >
+    <p>此功能正在製作中</p>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/dashboard/PageLesson.vue b/src/pages/dashboard/PageLesson.vue
index 8dc13e56..6a75bc74 100644
--- a/src/pages/dashboard/PageLesson.vue
+++ b/src/pages/dashboard/PageLesson.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup></script>
 
 <template>
-  <p>此功能正在製作中</p>
+  <div
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)]"
+  >
+    <p>此功能正在製作中</p>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/dashboard/PageNote.vue b/src/pages/dashboard/PageNote.vue
index 8dc13e56..6a75bc74 100644
--- a/src/pages/dashboard/PageNote.vue
+++ b/src/pages/dashboard/PageNote.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup></script>
 
 <template>
-  <p>此功能正在製作中</p>
+  <div
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)]"
+  >
+    <p>此功能正在製作中</p>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From 12ae3f727792d76f1c7222bb3a07af0a97fbb945 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Mon, 12 Jun 2023 21:37:12 +0800
Subject: [PATCH 03/11] fix: the overflow for navigation bar and content block

Co-Authored-By: LAZPbanahaker <pn0818x@outlook.com>
---
 src/components/Mobile/Dashboard/MobileDashboard.vue | 13 +++++--------
 src/components/Mobile/Dashboard/OverviewContent.vue |  2 +-
 src/components/NavigationBar.vue                    |  4 ++--
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/Mobile/Dashboard/MobileDashboard.vue b/src/components/Mobile/Dashboard/MobileDashboard.vue
index 62da57cc..01cc143a 100644
--- a/src/components/Mobile/Dashboard/MobileDashboard.vue
+++ b/src/components/Mobile/Dashboard/MobileDashboard.vue
@@ -5,16 +5,13 @@ import NavigationBar from '@/components/NavigationBar.vue';
 </script>
 
 <template>
-  <AppBar />
-  <Content />
-  <NavigationBar />
-  <div class="navigation-overlay"></div>
+  <div class="overflow-y-hidden">
+    <AppBar />
+    <Content />
+    <NavigationBar />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 @import '@/scss/global.scss';
-
-.navigation-overlay {
-  min-height: 6rem;
-}
 </style>
diff --git a/src/components/Mobile/Dashboard/OverviewContent.vue b/src/components/Mobile/Dashboard/OverviewContent.vue
index d2cf7847..d357cf93 100644
--- a/src/components/Mobile/Dashboard/OverviewContent.vue
+++ b/src/components/Mobile/Dashboard/OverviewContent.vue
@@ -6,7 +6,7 @@ const user = useUserStore().info;
 </script>
 
 <template>
-  <div class="mx-[30px] text-center">
+  <div class="max-h-[calc(100svh-149px)] overflow-y-auto px-[6%] text-center">
     <div class="mt-[30px] text-[#3f4759] dark:text-[#c4c6d0]">
       <svg
         class="m-auto block"
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 1e7c4849..26646144 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -74,7 +74,6 @@ const activeIndex = ref(defaultIndex);
 const handleChangeActive = (index: number) => {
   activeIndex.value = index;
   const item = navbarItems[index];
-  console.log(item.link);
   router.push(`/dashboard/${item.link}`);
 };
 </script>
@@ -172,10 +171,11 @@ const handleChangeActive = (index: number) => {
   border-top: 1px solid #f1f3f9;
   box-sizing: border-box;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  position: fixed;
+  position: absolute;
   z-index: auto;
   transition: 300ms ease background;
   bottom: 0;
+  left: 0;
   height: 100%;
   width: 104px;
   border-top-right-radius: 50px;

From d8831f5d67a58cdc4a82e80cb3e8e3932cd60eb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Mon, 12 Jun 2023 22:17:22 +0800
Subject: [PATCH 04/11] refactor: mobile app bar structure

---
 src/components/Mobile/AppBar.vue              | 33 ++++++++-----------
 .../Mobile/Dashboard/MobileDashboard.vue      |  3 +-
 src/pages/dashboard/PageOverview.vue          | 10 ++++--
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/Mobile/AppBar.vue b/src/components/Mobile/AppBar.vue
index 97e82296..91b1bb2e 100644
--- a/src/components/Mobile/AppBar.vue
+++ b/src/components/Mobile/AppBar.vue
@@ -2,23 +2,20 @@
 
 <template>
   <div class="nav-overlay"></div>
-
-  <div class="nav flex h-[64px]">
-    <div class="ml-[20px] flex-1">
-      <div class="flex">
-        <button id="menu" class="absolute mt-[20px] block">
-          <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
-            <path
-              fill="currentColor"
-              d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
-            />
-          </svg>
-        </button>
-        <h1 class="ml-[50px] mt-[17px] block text-center text-xl">總覽</h1>
-      </div>
+  <div class="nav flex h-[64px] w-[100svw] flex-row justify-between px-4">
+    <div class="flex items-center gap-7">
+      <button id="menu" class="">
+        <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
+          />
+        </svg>
+      </button>
+      <h1 class="text-xl leading-6">總覽</h1>
     </div>
-    <div class="flex">
-      <button id="search" class="mr-8 block">
+    <div class="flex gap-6">
+      <button id="search">
         <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
           <path
             fill="currentColor"
@@ -26,7 +23,7 @@
           />
         </svg>
       </button>
-      <button id="account" class="mr-5 block">
+      <button id="account">
         <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
           <path
             fill="currentColor"
@@ -40,7 +37,6 @@
 
 <style lang="scss" scoped>
 @import '@/scss/global.scss';
-
 .nav-overlay {
   min-height: 4rem;
 }
@@ -50,7 +46,6 @@
   z-index: auto;
   top: 0;
 
-  width: 100%;
   color: #444b89;
   background: linear-gradient(
       0deg,
diff --git a/src/components/Mobile/Dashboard/MobileDashboard.vue b/src/components/Mobile/Dashboard/MobileDashboard.vue
index 01cc143a..11c83981 100644
--- a/src/components/Mobile/Dashboard/MobileDashboard.vue
+++ b/src/components/Mobile/Dashboard/MobileDashboard.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import AppBar from '@/components/Mobile/AppBar.vue';
-import Content from '@/components/Mobile/Dashboard/OverviewContent.vue';
 import NavigationBar from '@/components/NavigationBar.vue';
 </script>
 
 <template>
   <div class="overflow-y-hidden">
     <AppBar />
-    <Content />
+    <router-view />
     <NavigationBar />
   </div>
 </template>
diff --git a/src/pages/dashboard/PageOverview.vue b/src/pages/dashboard/PageOverview.vue
index 9b30d3b0..782e42b1 100644
--- a/src/pages/dashboard/PageOverview.vue
+++ b/src/pages/dashboard/PageOverview.vue
@@ -1,7 +1,13 @@
 <script lang="ts" setup>
-import Content from '@/components/desktop/dashboard/OverviewContent.vue';
+import DesktopContent from '@/components/desktop/dashboard/OverviewContent.vue';
+import MobileContent from '@/components/Mobile/Dashboard/OverviewContent.vue';
 </script>
 
 <template>
-  <Content />
+  <div class="w-[100%] phone:hidden">
+    <DesktopContent />
+  </div>
+  <div class="w-[100%] max-phone:hidden">
+    <MobileContent />
+  </div>
 </template>

From 7f614ec902c492c37a274b83a3d39bbec4ac0e30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Mon, 12 Jun 2023 23:38:44 +0800
Subject: [PATCH 05/11] feat: mobile switch dashboard pages

---
 src/api/user/type.ts                     |  2 +-
 src/components/Mobile/AppBar.vue         | 20 ++++++-
 src/components/NavigationBar.vue         | 75 +++---------------------
 src/components/data/NavigationBarData.ts | 71 ++++++++++++++++++++++
 src/pages/dashboard/PageClass.vue        |  5 +-
 src/pages/dashboard/PageExam.vue         |  5 +-
 src/pages/dashboard/PageLesson.vue       |  5 +-
 src/pages/dashboard/PageNote.vue         |  5 +-
 src/scss/global.scss                     |  6 +-
 tsconfig.json                            | 25 ++++++--
 10 files changed, 137 insertions(+), 82 deletions(-)
 create mode 100644 src/components/data/NavigationBarData.ts

diff --git a/src/api/user/type.ts b/src/api/user/type.ts
index 3d7445d6..daade35b 100644
--- a/src/api/user/type.ts
+++ b/src/api/user/type.ts
@@ -64,7 +64,7 @@ export const USER_LOCALES = ['en-US', 'zh-CN', 'zh-TW'] as const;
  * @see https://en.wikipedia.org/wiki/IETF_language_tag
  * @see USER_LOCALES
  */
-export type UserLocale = typeof USER_LOCALES[number];
+export type UserLocale = (typeof USER_LOCALES)[number];
 
 /**
  * Check if the user locale is valid.
diff --git a/src/components/Mobile/AppBar.vue b/src/components/Mobile/AppBar.vue
index 91b1bb2e..da70c8fd 100644
--- a/src/components/Mobile/AppBar.vue
+++ b/src/components/Mobile/AppBar.vue
@@ -1,4 +1,18 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
+import { Ref } from 'vue';
+import {
+  getNavBarIndex,
+  NAVBAR_ITEMS,
+  NavBarItem,
+} from '@/components/data/NavigationBarData';
+
+const router = useRouter();
+
+function getNavBarItem(route: Ref<RouteLocationNormalizedLoaded>): NavBarItem {
+  return NAVBAR_ITEMS[getNavBarIndex(route.value.path)];
+}
+</script>
 
 <template>
   <div class="nav-overlay"></div>
@@ -12,7 +26,9 @@
           />
         </svg>
       </button>
-      <h1 class="text-xl leading-6">總覽</h1>
+      <h1 class="text-xl leading-6">
+        {{ getNavBarItem(router.currentRoute).name }}
+      </h1>
     </div>
     <div class="flex gap-6">
       <button id="search">
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 26646144..8775080f 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -1,79 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-
-const navbarItems = [
-  {
-    icon: `
-      <svg width="100%" height="32" viewBox="0 0 56 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="block m-auto">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M28 22C31.3137 22 34 19.3137 34 16C34 12.6863 31.3137 10 28 10C24.6863 10 22 12.6863 22 16C22 19.3137 24.6863 22 28 22Z"
-          fill="currentColor" />
-      </svg>
-    `,
-    name: '總覽',
-    link: 'overview',
-  },
-  {
-    icon: `
-        <path
-          d="M32 7L21 13L25 15.18V21.18L32 25L39 21.18V15.18L41 14.09V21H43V13L32 7ZM38.82 13L32 16.72L25.18 13L32 9.28L38.82 13ZM37 19.99L32 22.72L27 19.99V16.27L32 19L37 16.27V19.99Z"
-          fill="currentColor"
-        />
-    `,
-    name: '我的班級',
-    link: 'class',
-  },
-  {
-    icon: `
-        <path
-          d="M40 6L24 6C22.9 6 22.01 6.9 22.01 8L22 26L26 22H40C41.1 22 42 21.1 42 20V8C42 6.9 41.1 6 40 6ZM40 20H25.17L24 21.17V8H40V20ZM34 14.6L37 17V11L34 13.4V11H27V17H34V14.6Z"
-          fill="currentColor"
-        />
-    `,
-    name: '我的課堂',
-    link: 'lesson',
-  },
-  {
-    icon: `
-      <path
-        d="M39 8H34.82C34.4 6.84 33.3 6 32 6C30.7 6 29.6 6.84 29.18 8H25C23.9 8 23 8.9 23 10V24C23 25.1 23.9 26 25 26H39C40.1 26 41 25.1 41 24V10C41 8.9 40.1 8 39 8ZM32 7.75C32.41 7.75 32.75 8.09 32.75 8.5C32.75 8.91 32.41 9.25 32 9.25C31.59 9.25 31.25 8.91 31.25 8.5C31.25 8.09 31.59 7.75 32 7.75ZM39 24H25V10H39V24Z"
-        fill="currentColor"
-      />
-      <path
-        d="M35.08 16.03L32.96 13.91L27 19.86V22H29.1L35.08 16.03Z"
-        fill="currentColor"
-      />
-      <path
-        d="M36.85 14.27C37.05 14.07 37.05 13.76 36.85 13.56L35.44 12.15C35.24 11.95 34.93 11.95 34.73 12.15L33.67 13.21L35.79 15.33L36.85 14.27Z"
-        fill="currentColor"
-      />
-    `,
-    name: '我的筆記',
-    link: 'note',
-  },
-  {
-    icon: `
-      <path
-        d="M24 10H22V24C22 25.1 22.9 26 24 26H38V24H24V10ZM40 6L28 6C26.9 6 26 6.9 26 8V20C26 21.1 26.9 22 28 22H40C41.1 22 42 21.1 42 20V8C42 6.9 41.1 6 40 6ZM40 20H28V8H40V20ZM33.51 14.16C33.92 13.43 34.69 13 35.14 12.36C35.62 11.68 35.35 10.42 34 10.42C33.12 10.42 32.68 11.09 32.5 11.65L31.13 11.08C31.51 9.96 32.52 9 33.99 9C35.22 9 36.07 9.56 36.5 10.26C36.87 10.86 37.08 11.99 36.51 12.83C35.88 13.76 35.28 14.04 34.95 14.64C34.82 14.88 34.77 15.04 34.77 15.82H33.25C33.26 15.41 33.19 14.74 33.51 14.16ZM32.95 17.95C32.95 17.36 33.42 16.91 34 16.91C34.59 16.91 35.04 17.36 35.04 17.95C35.04 18.53 34.6 19 34 19C33.42 19 32.95 18.53 32.95 17.95Z"
-        fill="currentColor"
-      />
-    `,
-    name: '試題庫',
-    link: 'exam',
-  },
-];
+import {
+  getNavBarIndex,
+  NAVBAR_ITEMS,
+} from '@/components/data/NavigationBarData';
 
 const router = useRouter();
 
-const defaultIndex = navbarItems.findIndex(
-  (item) => item.link === router.currentRoute.value.path.split('/')[2]
-);
-const activeIndex = ref(defaultIndex);
+const activeIndex = ref(getNavBarIndex(router.currentRoute.value.path));
 
 const handleChangeActive = (index: number) => {
   activeIndex.value = index;
-  const item = navbarItems[index];
+  const item = NAVBAR_ITEMS[index];
   router.push(`/dashboard/${item.link}`);
 };
 </script>
@@ -123,7 +62,7 @@ const handleChangeActive = (index: number) => {
     </div>
 
     <div
-      v-for="(item, index) in navbarItems"
+      v-for="(item, index) in NAVBAR_ITEMS"
       :key="index"
       :class="[
         'phone:flex-1',
diff --git a/src/components/data/NavigationBarData.ts b/src/components/data/NavigationBarData.ts
new file mode 100644
index 00000000..34b2671b
--- /dev/null
+++ b/src/components/data/NavigationBarData.ts
@@ -0,0 +1,71 @@
+export interface NavBarItem {
+  icon: string;
+  name: string;
+  link: string;
+}
+
+export const NAVBAR_ITEMS: NavBarItem[] = [
+  {
+    icon: `
+      <svg width="100%" height="32" viewBox="0 0 56 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="block m-auto">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M28 22C31.3137 22 34 19.3137 34 16C34 12.6863 31.3137 10 28 10C24.6863 10 22 12.6863 22 16C22 19.3137 24.6863 22 28 22Z"
+          fill="currentColor" />
+      </svg>
+    `,
+    name: '總覽',
+    link: 'overview',
+  },
+  {
+    icon: `
+        <path
+          d="M32 7L21 13L25 15.18V21.18L32 25L39 21.18V15.18L41 14.09V21H43V13L32 7ZM38.82 13L32 16.72L25.18 13L32 9.28L38.82 13ZM37 19.99L32 22.72L27 19.99V16.27L32 19L37 16.27V19.99Z"
+          fill="currentColor"
+        />
+    `,
+    name: '我的班級',
+    link: 'class',
+  },
+  {
+    icon: `
+        <path
+          d="M40 6L24 6C22.9 6 22.01 6.9 22.01 8L22 26L26 22H40C41.1 22 42 21.1 42 20V8C42 6.9 41.1 6 40 6ZM40 20H25.17L24 21.17V8H40V20ZM34 14.6L37 17V11L34 13.4V11H27V17H34V14.6Z"
+          fill="currentColor"
+        />
+    `,
+    name: '我的課堂',
+    link: 'lesson',
+  },
+  {
+    icon: `
+      <path
+        d="M39 8H34.82C34.4 6.84 33.3 6 32 6C30.7 6 29.6 6.84 29.18 8H25C23.9 8 23 8.9 23 10V24C23 25.1 23.9 26 25 26H39C40.1 26 41 25.1 41 24V10C41 8.9 40.1 8 39 8ZM32 7.75C32.41 7.75 32.75 8.09 32.75 8.5C32.75 8.91 32.41 9.25 32 9.25C31.59 9.25 31.25 8.91 31.25 8.5C31.25 8.09 31.59 7.75 32 7.75ZM39 24H25V10H39V24Z"
+        fill="currentColor"
+      />
+      <path
+        d="M35.08 16.03L32.96 13.91L27 19.86V22H29.1L35.08 16.03Z"
+        fill="currentColor"
+      />
+      <path
+        d="M36.85 14.27C37.05 14.07 37.05 13.76 36.85 13.56L35.44 12.15C35.24 11.95 34.93 11.95 34.73 12.15L33.67 13.21L35.79 15.33L36.85 14.27Z"
+        fill="currentColor"
+      />
+    `,
+    name: '我的筆記',
+    link: 'note',
+  },
+  {
+    icon: `
+      <path
+        d="M24 10H22V24C22 25.1 22.9 26 24 26H38V24H24V10ZM40 6L28 6C26.9 6 26 6.9 26 8V20C26 21.1 26.9 22 28 22H40C41.1 22 42 21.1 42 20V8C42 6.9 41.1 6 40 6ZM40 20H28V8H40V20ZM33.51 14.16C33.92 13.43 34.69 13 35.14 12.36C35.62 11.68 35.35 10.42 34 10.42C33.12 10.42 32.68 11.09 32.5 11.65L31.13 11.08C31.51 9.96 32.52 9 33.99 9C35.22 9 36.07 9.56 36.5 10.26C36.87 10.86 37.08 11.99 36.51 12.83C35.88 13.76 35.28 14.04 34.95 14.64C34.82 14.88 34.77 15.04 34.77 15.82H33.25C33.26 15.41 33.19 14.74 33.51 14.16ZM32.95 17.95C32.95 17.36 33.42 16.91 34 16.91C34.59 16.91 35.04 17.36 35.04 17.95C35.04 18.53 34.6 19 34 19C33.42 19 32.95 18.53 32.95 17.95Z"
+        fill="currentColor"
+      />
+    `,
+    name: '試題庫',
+    link: 'exam',
+  },
+];
+
+export function getNavBarIndex(path: string) {
+  return NAVBAR_ITEMS.findIndex((item) => item.link === path.split('/')[2]);
+}
diff --git a/src/pages/dashboard/PageClass.vue b/src/pages/dashboard/PageClass.vue
index 6a75bc74..98877b1c 100644
--- a/src/pages/dashboard/PageClass.vue
+++ b/src/pages/dashboard/PageClass.vue
@@ -2,10 +2,13 @@
 
 <template>
   <div
-    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)]"
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
   >
     <p>此功能正在製作中</p>
   </div>
+  <div class="max-phone:hidden">
+    <p>此功能正在製作中</p>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/dashboard/PageExam.vue b/src/pages/dashboard/PageExam.vue
index 6a75bc74..98877b1c 100644
--- a/src/pages/dashboard/PageExam.vue
+++ b/src/pages/dashboard/PageExam.vue
@@ -2,10 +2,13 @@
 
 <template>
   <div
-    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)]"
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
   >
     <p>此功能正在製作中</p>
   </div>
+  <div class="max-phone:hidden">
+    <p>此功能正在製作中</p>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/dashboard/PageLesson.vue b/src/pages/dashboard/PageLesson.vue
index 6a75bc74..98877b1c 100644
--- a/src/pages/dashboard/PageLesson.vue
+++ b/src/pages/dashboard/PageLesson.vue
@@ -2,10 +2,13 @@
 
 <template>
   <div
-    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)]"
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
   >
     <p>此功能正在製作中</p>
   </div>
+  <div class="max-phone:hidden">
+    <p>此功能正在製作中</p>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/dashboard/PageNote.vue b/src/pages/dashboard/PageNote.vue
index 6a75bc74..98877b1c 100644
--- a/src/pages/dashboard/PageNote.vue
+++ b/src/pages/dashboard/PageNote.vue
@@ -2,10 +2,13 @@
 
 <template>
   <div
-    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)]"
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
   >
     <p>此功能正在製作中</p>
   </div>
+  <div class="max-phone:hidden">
+    <p>此功能正在製作中</p>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 4dcb6c34..0b8a08be 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -5,7 +5,7 @@
 // Variables
 $Black: #353535;
 $LightBlack: #424242;
-$DarkBlack: #1f1f1f;
+$DarkBlack: #1b1b1f;
 $MainColor: #5efff2;
 $MainPurple: #7b6ff6;
 
@@ -20,6 +20,10 @@ html,
 #app {
   width: 100%;
   height: 100%;
+
+  .dark & {
+    background-color: $DarkBlack; // For Webkit browsers.
+  }
 }
 
 img {
diff --git a/tsconfig.json b/tsconfig.json
index 85fa1c40..cc2b5930 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,14 +10,21 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
     "skipLibCheck": true,
     "importHelpers": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     },
-    "types": ["vite-plugin-svg-icons/client"]
+    "types": [
+      "vite-plugin-svg-icons/client"
+    ]
   },
   "include": [
     "src/**/*.ts",
@@ -27,6 +34,12 @@
     "src/**/*.json",
     "test/**/*.ts"
   ],
-  "exclude": ["node_modules"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "exclude": [
+    "node_modules"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
\ No newline at end of file

From 6443f4d934448c24432a570e3fe2a02483327f41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Mon, 12 Jun 2023 23:46:22 +0800
Subject: [PATCH 06/11] refactor: mobile components folder name

Co-authored-by: LAZPbanahaker <banahaker@users.noreply.github.com>
Co-authored-by: HACO <HACO8888@users.noreply.github.com>
---
 src/components/{Mobile => mobile}/AppBar.vue                    | 0
 src/components/{Mobile => mobile}/Dashboard/MobileDashboard.vue | 2 +-
 src/components/{Mobile => mobile}/Dashboard/OverviewContent.vue | 2 +-
 src/components/{Mobile => mobile}/Dashboard/RecentCard.vue      | 0
 src/pages/PageDashboard.vue                                     | 2 +-
 src/pages/dashboard/PageOverview.vue                            | 2 +-
 test/components/Mobile/RecentCard.test.ts                       | 2 +-
 7 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/{Mobile => mobile}/AppBar.vue (100%)
 rename src/components/{Mobile => mobile}/Dashboard/MobileDashboard.vue (84%)
 rename src/components/{Mobile => mobile}/Dashboard/OverviewContent.vue (97%)
 rename src/components/{Mobile => mobile}/Dashboard/RecentCard.vue (100%)

diff --git a/src/components/Mobile/AppBar.vue b/src/components/mobile/AppBar.vue
similarity index 100%
rename from src/components/Mobile/AppBar.vue
rename to src/components/mobile/AppBar.vue
diff --git a/src/components/Mobile/Dashboard/MobileDashboard.vue b/src/components/mobile/Dashboard/MobileDashboard.vue
similarity index 84%
rename from src/components/Mobile/Dashboard/MobileDashboard.vue
rename to src/components/mobile/Dashboard/MobileDashboard.vue
index 11c83981..456c3134 100644
--- a/src/components/Mobile/Dashboard/MobileDashboard.vue
+++ b/src/components/mobile/Dashboard/MobileDashboard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import AppBar from '@/components/Mobile/AppBar.vue';
+import AppBar from '@/components/mobile/AppBar.vue';
 import NavigationBar from '@/components/NavigationBar.vue';
 </script>
 
diff --git a/src/components/Mobile/Dashboard/OverviewContent.vue b/src/components/mobile/Dashboard/OverviewContent.vue
similarity index 97%
rename from src/components/Mobile/Dashboard/OverviewContent.vue
rename to src/components/mobile/Dashboard/OverviewContent.vue
index d357cf93..0b93163a 100644
--- a/src/components/Mobile/Dashboard/OverviewContent.vue
+++ b/src/components/mobile/Dashboard/OverviewContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import RecentCard from '@/components/Mobile/Dashboard/RecentCard.vue';
+import RecentCard from '@/components/mobile/Dashboard/RecentCard.vue';
 import { useUserStore } from '@/stores/models/user';
 
 const user = useUserStore().info;
diff --git a/src/components/Mobile/Dashboard/RecentCard.vue b/src/components/mobile/Dashboard/RecentCard.vue
similarity index 100%
rename from src/components/Mobile/Dashboard/RecentCard.vue
rename to src/components/mobile/Dashboard/RecentCard.vue
diff --git a/src/pages/PageDashboard.vue b/src/pages/PageDashboard.vue
index 306f043a..c8455866 100644
--- a/src/pages/PageDashboard.vue
+++ b/src/pages/PageDashboard.vue
@@ -3,7 +3,7 @@ import { defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/models/user';
 import DesktopDashboard from '@/components/desktop/dashboard/DesktopDashboard.vue';
-import MobileDashboard from '@/components/Mobile/Dashboard/MobileDashboard.vue';
+import MobileDashboard from '@/components/mobile/Dashboard/MobileDashboard.vue';
 
 const MainView = defineAsyncComponent(
   () => import('@/components/MainView.vue')
diff --git a/src/pages/dashboard/PageOverview.vue b/src/pages/dashboard/PageOverview.vue
index 782e42b1..06029730 100644
--- a/src/pages/dashboard/PageOverview.vue
+++ b/src/pages/dashboard/PageOverview.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import DesktopContent from '@/components/desktop/dashboard/OverviewContent.vue';
-import MobileContent from '@/components/Mobile/Dashboard/OverviewContent.vue';
+import MobileContent from '@/components/mobile/Dashboard/OverviewContent.vue';
 </script>
 
 <template>
diff --git a/test/components/Mobile/RecentCard.test.ts b/test/components/Mobile/RecentCard.test.ts
index e929a65a..d99031e8 100644
--- a/test/components/Mobile/RecentCard.test.ts
+++ b/test/components/Mobile/RecentCard.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import RecentCardVue from '@/components/Mobile/Dashboard/RecentCard.vue';
+import RecentCardVue from '@/components/mobile/Dashboard/RecentCard.vue';
 
 describe('Recent card', () => {
   test('check the card name & math', () => {

From 72c515a7d6ce4a33595ab7dfbc9c946871f7e531 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Tue, 13 Jun 2023 22:08:58 +0800
Subject: [PATCH 07/11] refactor: `Dashboard` -> `dashboard`

---
 .../mobile/{Dashboard => dashboard}/MobileDashboard.vue         | 0
 .../mobile/{Dashboard => dashboard}/OverviewContent.vue         | 2 +-
 src/components/mobile/{Dashboard => dashboard}/RecentCard.vue   | 0
 src/pages/PageDashboard.vue                                     | 2 +-
 src/pages/dashboard/PageOverview.vue                            | 2 +-
 test/components/Desktop/RecentCard.test.ts                      | 2 +-
 test/components/Mobile/RecentCard.test.ts                       | 2 +-
 7 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/mobile/{Dashboard => dashboard}/MobileDashboard.vue (100%)
 rename src/components/mobile/{Dashboard => dashboard}/OverviewContent.vue (97%)
 rename src/components/mobile/{Dashboard => dashboard}/RecentCard.vue (100%)

diff --git a/src/components/mobile/Dashboard/MobileDashboard.vue b/src/components/mobile/dashboard/MobileDashboard.vue
similarity index 100%
rename from src/components/mobile/Dashboard/MobileDashboard.vue
rename to src/components/mobile/dashboard/MobileDashboard.vue
diff --git a/src/components/mobile/Dashboard/OverviewContent.vue b/src/components/mobile/dashboard/OverviewContent.vue
similarity index 97%
rename from src/components/mobile/Dashboard/OverviewContent.vue
rename to src/components/mobile/dashboard/OverviewContent.vue
index 0b93163a..08c37fdc 100644
--- a/src/components/mobile/Dashboard/OverviewContent.vue
+++ b/src/components/mobile/dashboard/OverviewContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import RecentCard from '@/components/mobile/Dashboard/RecentCard.vue';
+import RecentCard from '@/components/mobile/dashboard/RecentCard.vue';
 import { useUserStore } from '@/stores/models/user';
 
 const user = useUserStore().info;
diff --git a/src/components/mobile/Dashboard/RecentCard.vue b/src/components/mobile/dashboard/RecentCard.vue
similarity index 100%
rename from src/components/mobile/Dashboard/RecentCard.vue
rename to src/components/mobile/dashboard/RecentCard.vue
diff --git a/src/pages/PageDashboard.vue b/src/pages/PageDashboard.vue
index c8455866..beff40e3 100644
--- a/src/pages/PageDashboard.vue
+++ b/src/pages/PageDashboard.vue
@@ -3,7 +3,7 @@ import { defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/models/user';
 import DesktopDashboard from '@/components/desktop/dashboard/DesktopDashboard.vue';
-import MobileDashboard from '@/components/mobile/Dashboard/MobileDashboard.vue';
+import MobileDashboard from '@/components/mobile/dashboard/MobileDashboard.vue';
 
 const MainView = defineAsyncComponent(
   () => import('@/components/MainView.vue')
diff --git a/src/pages/dashboard/PageOverview.vue b/src/pages/dashboard/PageOverview.vue
index 06029730..91e23e7e 100644
--- a/src/pages/dashboard/PageOverview.vue
+++ b/src/pages/dashboard/PageOverview.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import DesktopContent from '@/components/desktop/dashboard/OverviewContent.vue';
-import MobileContent from '@/components/mobile/Dashboard/OverviewContent.vue';
+import MobileContent from '@/components/mobile/dashboard/OverviewContent.vue';
 </script>
 
 <template>
diff --git a/test/components/Desktop/RecentCard.test.ts b/test/components/Desktop/RecentCard.test.ts
index 80853ee3..e47f8931 100644
--- a/test/components/Desktop/RecentCard.test.ts
+++ b/test/components/Desktop/RecentCard.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import RecentCardVue from '@/components/Desktop/Dashboard/RecentCard.vue';
+import RecentCardVue from '@/components/Desktop/dashboard/RecentCard.vue';
 
 describe('Recent card', () => {
   test('check the card name & math', () => {
diff --git a/test/components/Mobile/RecentCard.test.ts b/test/components/Mobile/RecentCard.test.ts
index d99031e8..641e3e3f 100644
--- a/test/components/Mobile/RecentCard.test.ts
+++ b/test/components/Mobile/RecentCard.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import RecentCardVue from '@/components/mobile/Dashboard/RecentCard.vue';
+import RecentCardVue from '@/components/mobile/dashboard/RecentCard.vue';
 
 describe('Recent card', () => {
   test('check the card name & math', () => {

From 5a2a2b67f91dbc4e69494f331391481821c81b02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Tue, 27 Jun 2023 22:13:00 +0800
Subject: [PATCH 08/11] test: navigation bar and desktop dashboard

---
 src/components/NavigationBar.vue              |   6 +-
 test/components/NavigationBar.test.ts         | 146 ++++++++++++++++++
 .../desktop/DesktopDashboard.test.ts          |  75 +++++++++
 .../{Desktop => desktop}/RecentCard.test.ts   |   2 +-
 .../{Mobile => mobile}/RecentCard.test.ts     |   0
 yarn.lock                                     |   6 +-
 6 files changed, 230 insertions(+), 5 deletions(-)
 create mode 100644 test/components/NavigationBar.test.ts
 create mode 100644 test/components/desktop/DesktopDashboard.test.ts
 rename test/components/{Desktop => desktop}/RecentCard.test.ts (94%)
 rename test/components/{Mobile => mobile}/RecentCard.test.ts (100%)

diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 8775080f..5d687301 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -12,8 +12,12 @@ const activeIndex = ref(getNavBarIndex(router.currentRoute.value.path));
 
 const handleChangeActive = (index: number) => {
   activeIndex.value = index;
+
   const item = NAVBAR_ITEMS[index];
-  router.push(`/dashboard/${item.link}`);
+  const pathSplit = router.currentRoute.value.path.split('/');
+  const parentPath = pathSplit.slice(0, pathSplit.length - 1).join('/');
+
+  router.push(`${parentPath}/${item.link}`);
 };
 </script>
 
diff --git a/test/components/NavigationBar.test.ts b/test/components/NavigationBar.test.ts
new file mode 100644
index 00000000..50821bc5
--- /dev/null
+++ b/test/components/NavigationBar.test.ts
@@ -0,0 +1,146 @@
+import { beforeEach, describe, expect, it, vitest } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import { Router, createRouter, createWebHistory } from 'vue-router';
+import NavigationBarVue from '@/components/NavigationBar.vue';
+
+let router: Router;
+
+beforeEach(() => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: [],
+  });
+});
+
+describe('Navigation Bar', () => {
+  it('check the name of navigation buttons', () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    const navbarItems = wrapper.findAll('.navbar-item');
+    const titles = navbarItems.map((item) => item.text());
+
+    expect(titles).toEqual([
+      '總覽',
+      '我的班級',
+      '我的課堂',
+      '我的筆記',
+      '試題庫',
+    ]);
+  });
+
+  it('check the length of navigation buttons', () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    const navbarItems = wrapper.findAll('.navbar-item');
+
+    expect(navbarItems.length).toBe(5);
+  });
+
+  it('router should be pushed when click the navigation bar overview button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const overviewButton = wrapper.findAll('a')[0];
+    await overviewButton.trigger('click');
+    await flushPromises();
+
+    expect(overviewButton.text()).toContain('總覽');
+    expect(push).toHaveBeenCalledWith('/overview');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/overview');
+  });
+
+  it('router should be pushed when click the navigation bar class button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const classButton = wrapper.findAll('a')[1];
+    await classButton.trigger('click');
+    await flushPromises();
+
+    expect(classButton.text()).toBe('我的班級');
+    expect(push).toHaveBeenCalledWith('/class');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/class');
+  });
+
+  it('router should be pushed when click the navigation bar lesson button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const lessonButton = wrapper.findAll('a')[2];
+    await lessonButton.trigger('click');
+    await flushPromises();
+
+    expect(lessonButton.text()).toBe('我的課堂');
+    expect(push).toHaveBeenCalledWith('/lesson');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/lesson');
+  });
+
+  it('router should be pushed when click the navigation bar note button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const noteButton = wrapper.findAll('a')[3];
+    await noteButton.trigger('click');
+    await flushPromises();
+
+    expect(noteButton.text()).toBe('我的筆記');
+    expect(push).toHaveBeenCalledWith('/note');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/note');
+  });
+
+  it('router should be pushed when click the navigation bar exam button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const examButton = wrapper.findAll('a')[4];
+    await examButton.trigger('click');
+    await flushPromises();
+
+    expect(examButton.text()).toBe('試題庫');
+    expect(push).toHaveBeenCalledWith('/exam');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/exam');
+  });
+});
diff --git a/test/components/desktop/DesktopDashboard.test.ts b/test/components/desktop/DesktopDashboard.test.ts
new file mode 100644
index 00000000..3d09cc72
--- /dev/null
+++ b/test/components/desktop/DesktopDashboard.test.ts
@@ -0,0 +1,75 @@
+import { beforeAll, beforeEach, describe, expect, it, vitest } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { Router, createRouter, createWebHistory } from 'vue-router';
+import DesktopDashboardVue from '@/components/desktop/dashboard/DesktopDashboard.vue';
+import NavigationBarVue from '@/components/NavigationBar.vue';
+import AppBarVue from '@/components/desktop/AppBar.vue';
+
+let router: Router;
+
+beforeEach(() => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: [
+      {
+        path: '/',
+        name: 'Home',
+        redirect: '/overview',
+      },
+      {
+        path: '/overview',
+        component: {
+          template: 'This is overview page',
+        },
+      },
+      {
+        path: '/lesson',
+        component: {
+          template: 'This is lesson page',
+        },
+      },
+    ],
+  });
+});
+
+beforeAll(() => {
+  setActivePinia(createPinia());
+});
+
+describe('Desktop dashboard', () => {
+  it('should renders navigation bar, app bar and default router-view', async () => {
+    const wrapper = mount(DesktopDashboardVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+
+    expect(wrapper.findComponent(NavigationBarVue).exists()).toBeTruthy();
+    expect(wrapper.findComponent(AppBarVue).exists()).toBeTruthy();
+    expect(wrapper.text()).toContain('This is overview page');
+  });
+
+  it('should replace router-view when clicked on navigation bar', async () => {
+    const wrapper = mount(DesktopDashboardVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const lessonButton = wrapper.findAll('a')[2];
+    await lessonButton.trigger('click');
+    await flushPromises();
+
+    expect(lessonButton.text()).toBe('我的課堂');
+    expect(push).toHaveBeenCalledWith('/lesson');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(wrapper.text()).toContain('This is lesson page');
+    expect(router.currentRoute.value.path).toBe('/lesson');
+  });
+});
diff --git a/test/components/Desktop/RecentCard.test.ts b/test/components/desktop/RecentCard.test.ts
similarity index 94%
rename from test/components/Desktop/RecentCard.test.ts
rename to test/components/desktop/RecentCard.test.ts
index e47f8931..4abe9502 100644
--- a/test/components/Desktop/RecentCard.test.ts
+++ b/test/components/desktop/RecentCard.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import RecentCardVue from '@/components/Desktop/dashboard/RecentCard.vue';
+import RecentCardVue from '@/components/desktop/dashboard/RecentCard.vue';
 
 describe('Recent card', () => {
   test('check the card name & math', () => {
diff --git a/test/components/Mobile/RecentCard.test.ts b/test/components/mobile/RecentCard.test.ts
similarity index 100%
rename from test/components/Mobile/RecentCard.test.ts
rename to test/components/mobile/RecentCard.test.ts
diff --git a/yarn.lock b/yarn.lock
index 85b609cb..47831d9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2320,9 +2320,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001441"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz#987437b266260b640a23cd18fbddb509d7f69f3e"
-  integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==
+  version "1.0.30001503"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001503.tgz"
+  integrity sha512-Sf9NiF+wZxPfzv8Z3iS0rXM1Do+iOy2Lxvib38glFX+08TCYYYGR5fRJXk4d77C4AYwhUjgYgMsMudbh2TqCKw==
 
 chai@^4.3.7:
   version "4.3.7"

From 048dd340605444cb8982635aa0949d2b000695cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Tue, 27 Jun 2023 22:36:04 +0800
Subject: [PATCH 09/11] docs: dashboard pages technical debt

---
 src/components/mobile/dashboard/OverviewContent.vue | 1 +
 src/pages/dashboard/PageClass.vue                   | 1 +
 src/pages/dashboard/PageExam.vue                    | 1 +
 src/pages/dashboard/PageLesson.vue                  | 1 +
 src/pages/dashboard/PageNote.vue                    | 1 +
 5 files changed, 5 insertions(+)

diff --git a/src/components/mobile/dashboard/OverviewContent.vue b/src/components/mobile/dashboard/OverviewContent.vue
index 08c37fdc..e05c6527 100644
--- a/src/components/mobile/dashboard/OverviewContent.vue
+++ b/src/components/mobile/dashboard/OverviewContent.vue
@@ -6,6 +6,7 @@ const user = useUserStore().info;
 </script>
 
 <template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
   <div class="max-h-[calc(100svh-149px)] overflow-y-auto px-[6%] text-center">
     <div class="mt-[30px] text-[#3f4759] dark:text-[#c4c6d0]">
       <svg
diff --git a/src/pages/dashboard/PageClass.vue b/src/pages/dashboard/PageClass.vue
index 98877b1c..45a2adb2 100644
--- a/src/pages/dashboard/PageClass.vue
+++ b/src/pages/dashboard/PageClass.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
   <div
     class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
   >
diff --git a/src/pages/dashboard/PageExam.vue b/src/pages/dashboard/PageExam.vue
index 98877b1c..45a2adb2 100644
--- a/src/pages/dashboard/PageExam.vue
+++ b/src/pages/dashboard/PageExam.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
   <div
     class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
   >
diff --git a/src/pages/dashboard/PageLesson.vue b/src/pages/dashboard/PageLesson.vue
index 98877b1c..45a2adb2 100644
--- a/src/pages/dashboard/PageLesson.vue
+++ b/src/pages/dashboard/PageLesson.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
   <div
     class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
   >
diff --git a/src/pages/dashboard/PageNote.vue b/src/pages/dashboard/PageNote.vue
index 98877b1c..45a2adb2 100644
--- a/src/pages/dashboard/PageNote.vue
+++ b/src/pages/dashboard/PageNote.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
   <div
     class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
   >

From 9fa0bbb8e614d27698182eda17b054b1c3a961a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Tue, 27 Jun 2023 22:36:42 +0800
Subject: [PATCH 10/11] docs: Safari(Webkit) background color

---
 src/scss/global.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/global.scss b/src/scss/global.scss
index 0b8a08be..5bfc73e1 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -22,7 +22,7 @@ html,
   height: 100%;
 
   .dark & {
-    background-color: $DarkBlack; // For Webkit browsers.
+    background-color: $DarkBlack; // This is used to fix the animation that occurs when scrolling beyond the bounds in Safari(Webkit), where the color does not match the background color of the webpage itself.
   }
 }
 

From 18978dedbd35fed2a40316b4a6e4d007caf3608a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=98=E8=8F=98?= <rrt467778@gmail.com>
Date: Tue, 27 Jun 2023 22:40:36 +0800
Subject: [PATCH 11/11] fix: comment space

---
 src/scss/global.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/global.scss b/src/scss/global.scss
index 5bfc73e1..7725dd36 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -22,7 +22,7 @@ html,
   height: 100%;
 
   .dark & {
-    background-color: $DarkBlack; // This is used to fix the animation that occurs when scrolling beyond the bounds in Safari(Webkit), where the color does not match the background color of the webpage itself.
+    background-color: $DarkBlack; // This is used to fix the animation that occurs when scrolling beyond the bounds in Safari (Webkit), where the color does not match the background color of the webpage itself.
   }
 }