feat: switch dashboard pages

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.

src/components/NavigationBar.vue

@@ -1,73 +1,24 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import {
+  getNavBarIndex,
+  NAVBAR_ITEMS,
+} from '@/components/data/NavigationBarData';
 
-const activeIndex = ref(0);
+const router = useRouter();
+
+const activeIndex = ref(getNavBarIndex(router.currentRoute.value.path));
 
 const handleChangeActive = (index: number) => {
   activeIndex.value = index;
-};
 
-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: '/classroom',
-  },
-  {
-    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: '/question',
-  },
-];
+  const item = NAVBAR_ITEMS[index];
+  const pathSplit = router.currentRoute.value.path.split('/');
+  const parentPath = pathSplit.slice(0, pathSplit.length - 1).join('/');
+
+  router.push(`${parentPath}/${item.link}`);
+};
 </script>
 
 <template>
@@ -115,7 +66,7 @@ const navbarItems = [
     </div>
 
     <div
-      v-for="(item, index) in navbarItems"
+      v-for="(item, index) in NAVBAR_ITEMS"
       :key="index"
       :class="[
         'phone:flex-1',
@@ -163,10 +114,11 @@ const navbarItems = [
   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;

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]);
+}

src/components/Desktop/Overview/MainView.vue → 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>
 

src/components/Desktop/Overview/OverviewContent.vue → 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' },

src/components/Mobile/AppBar.vue → src/components/mobile/AppBar.vue

@@ -1,32 +1,45 @@
-<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>
-
-  <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">
+        {{ getNavBarItem(router.currentRoute).name }}
+      </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"
             d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
           />
         </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 +53,6 @@
 
 <style lang="scss" scoped>
 @import '@/scss/global.scss';
-
 .nav-overlay {
   min-height: 4rem;
 }
@@ -50,7 +62,6 @@
   z-index: auto;
   top: 0;
 
-  width: 100%;
   color: #444b89;
   background: linear-gradient(
       0deg,

src/components/mobile/dashboard/MobileDashboard.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import AppBar from '@/components/mobile/AppBar.vue';
+import NavigationBar from '@/components/NavigationBar.vue';
+</script>
+
+<template>
+  <div class="overflow-y-hidden">
+    <AppBar />
+    <router-view />
+    <NavigationBar />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+</style>

src/components/Mobile/Overview/OverviewContent.vue → src/components/mobile/dashboard/OverviewContent.vue

@@ -1,12 +1,12 @@
 <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;
 </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"

src/pages/PageOverview.vue → 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>

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');
 }