video-maker/frontend/src/views/main/Main.vue

<script setup lang="ts">
import { appName } from "@/env";
import { reactive } from "vue";
import type { RouteLocationNormalized, NavigationGuardNext } from "vue-router";
import { onBeforeRouteUpdate } from "vue-router";
import { useMainStore } from "@/stores/main";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n";



    const { t, locale } = useI18n();
    const mainStore = useMainStore();
    const mainStoreRef = storeToRefs(mainStore);

    const hasAdminAccess = mainStoreRef.readhasAdminAccess;

    const miniDrawer = mainStoreRef.readDashboardMiniDrawer;
    const showDrawer = mainStoreRef.readDashboardShowDrawer;

    function switchMiniDrawer() {
      mainStore.setDashboardMiniDrawer(
        !mainStoreRef.readDashboardMiniDrawer.value
      );
    }

    function switchShowDrawer() {
      mainStore.setDashboardShowDrawer(
        !mainStoreRef.readDashboardShowDrawer.value
      );
    }

    function logout() {
      mainStore.logOut();
    }

    onBeforeRouteUpdate((to, from, next) => {
      routeGuardMain(to, from, next);
    });

    const lang = reactive([
  { title: "English", text: "en" },
  { title: "中文", text: "zh" },
]);

function setLang(lang: String) {
  locale.value = `${lang}`;
  localStorage.setItem("lang", `${lang}`);
}

    
  
  // beforeRouteEnter((to, from, next) =>{
  //   routeGuardMain(to, from, next);
  // })

const routeGuardMain = async (
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext
) => {
  if (to.path === "/main") {
    next("/main/dashboard");
  } else {
    next();
  }
};
</script>

<template>
  <div>
    <v-navigation-drawer persistent :rail="miniDrawer" v-model="showDrawer">
      <v-sheet class="d-flex flex-column fill-height">
        <v-sheet class="">
          <v-list>
            <!-- <v-list-subheader><span v-show="!miniDrawer">Main menu</span></v-list-subheader> -->
            <v-list-item to="/main/dashboard" prepend-icon="dashboard">
              <v-list-item-title>{{ t("dashboard") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/make-video" prepend-icon="video_call">
              <v-list-item-title>{{ t("makeVideo") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/progress" prepend-icon="list">
              <v-list-item-title>{{ t("progress") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/profile/view" prepend-icon="person">
              <v-list-item-title>{{ t("userProfile") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/profile/edit" prepend-icon="edit">
              <v-list-item-title>{{ t("editProfile") }}</v-list-item-title>
            </v-list-item>
            <v-list-item to="/main/profile/password" prepend-icon="key">
              <v-list-item-title>{{ t("changePassword") }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-sheet>
        <v-divider></v-divider>
        <v-sheet class="">
          <v-list subheader v-show="hasAdminAccess">
            <v-list-subheader
              ><span v-show="!miniDrawer">Admin</span></v-list-subheader
            >
            <v-list-item to="/main/admin/users/all" prepend-icon="people">
              <v-list-item-title>Manage Users</v-list-item-title>
            </v-list-item>
            <v-list-item
              to="/main/admin/users/create"
              prepend-icon="person_add"
            >
              <v-list-item-title>Create User</v-list-item-title>
            </v-list-item>
            <v-list-item
              to="/main/admin/test-celery"
              prepend-icon="engineering"
            >
              <v-list-item-title>Test Celery</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-sheet>
        <!-- <v-spacer></v-spacer> -->
        <v-sheet class="mt-auto">
          <v-list>
            <v-list-item @click="logout" prepend-icon="logout">
              <v-list-item-title>{{ t("logout") }}</v-list-item-title>
            </v-list-item>
            <v-divider></v-divider>
            <v-list-item
              @click="switchMiniDrawer"
              :prepend-icon="miniDrawer ? 'chevron_right' : 'chevron_left'"
            >
              <v-list-item-title>{{ t("collapse") }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-sheet>
      </v-sheet>
    </v-navigation-drawer>
    <v-main>
      <v-toolbar class="navbar">
        <v-app-bar-nav-icon @click.stop="switchShowDrawer"></v-app-bar-nav-icon>
        <v-toolbar-title v-text="appName"></v-toolbar-title>
        <v-spacer></v-spacer>
        <v-menu bottom left offset-y :close-on-content-click="false">
          <template v-slot:activator="{ props }">
            <v-btn icon="more_vert" v-bind="props" />
          </template>
          <v-list>
            <v-list-item to="/main/profile" append-icon="person">
              <v-list-item-title>{{ t("userProfile") }}</v-list-item-title>
            </v-list-item>
            <!-- <v-list-item to="/main/profile" append-icon="language">
              <v-list-item-title>{{ t("language") }}</v-list-item-title>
            </v-list-item> -->

            <v-list-group value="Admin">
              <template v-slot:activator="{ props }">
                <v-list-item v-bind="props">
                  <v-list-item-title>{{ t("language") }}</v-list-item-title>
                </v-list-item>
              </template>

              <v-list-item
            v-for="(item, index) in lang"
            :key="index"
            :value="item.text"
            @click="setLang(item.text)"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
            </v-list-group>

            <v-list-item @click="logout" append-icon="logout">
              <v-list-item-title>{{ t("logout") }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar>
      <router-view></router-view>
    </v-main>

    <v-footer class="pa-3" app>
      <v-spacer></v-spacer>
      <span>&copy; {{ appName }}</span>
    </v-footer>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  color: #fff;
  background-image: linear-gradient(
    -225deg,
    rgb(234, 84, 19) 35%,
    rgb(178, 69, 146) 100%
  );
}
</style>