ntcri/src/components/Navbar.vue

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
// import Login from "@/views/Login.vue";

const router = useRouter();
const store = useMainStore();
const { t, locale } = useI18n();
let menuShow = ref(false);
let collegeMenuShow = ref(false);
let otherMenuShow = ref(false);
let loginMenuShow = ref(false);
let coursesMenuShow = ref(false);

function toggleMenu() {
  collegeMenuShow.value = false;
  menuShow.value = !menuShow.value;
}

function handleClose() {
  store.loginDialog = false;
}

function handleMouseEvents(name, event) {
  const screenWidth = window.innerWidth;
  if (screenWidth >= 1280) {
    if (name === "college") {
      collegeMenuShow.value = event;
    } else if (name === "courses") {
      coursesMenuShow.value = event;
    } else if (name === "other") {
      otherMenuShow.value = event;
    } else {
      loginMenuShow.value = event;
    }
  } else {
    return;
  }
}

function handleClick(url) {
  menuShow.value = false;
  collegeMenuShow.value = false;
  otherMenuShow.value = false;
  router.push(url);
}

const collegeList = reactive([
  // {
  //   title: "college_group_1",
  //   url: "/college-group/future",
  // },
  {
    title: "college_group_2",
    url: "/college-group/craft",
  },
  {
    title: "college_group_3",
    url: "/college-group/cross",
  },
  // {
  //   title: "college_group_4",
  //   url: "/college-group/online",
  // },
  // {
  //   title: "college_group_5",
  //   url: "/college-group/craft-for-all",
  // },
  // {
  //   title: "college_group_6",
  //   url: "/college-group/life",
  // },
  {
    title: "成果展現",
    url: "/achievement",
  },
  // {
  //   title: "修護工藝",
  //   url: "/college-group/repair",
  // },
  // {
  //   title: "世代工藝",
  //   url: "/college-group/generation",
  // },
  // {
  //   title: "青年工藝",
  //   url: "/college-group/teenager",
  // },
]);

const otherList = reactive([
  // {
  //   title: "我要開課",
  //   url: "/setup-courses",
  // },
  // {
  //   title: "網站架構",
  //   url: "/",
  // },
]);

onMounted(() => {
  console.log("onMounted");
  localStorage.setItem("lang", "zh");
});

function changeLang() {
  let lang = localStorage.getItem("lang");
  console.log("lang", lang);
  if (lang === "zh") {
    locale.value = "en";
    localStorage.setItem("lang", "en");
  } else if (lang === "en") {
    locale.value = "zh";
    localStorage.setItem("lang", "zh");
  }
}

function handleLogout() {
  sessionStorage.removeItem("token");
  sessionStorage.removeItem("AuthToken");
  window.location.href =
    "https://member.moc.gov.tw/MOCMC/M0003/ottLogout?SYS_ID=CRAFT_NTCRI&urlRedirectTo=https://craftsplatform.ntcri.gov.tw/";
  // window.location.reload();
}
</script>

<template>
  <div class="d-flex justify-space-between align-center navbar">
    <router-link :to="'/'">
      <img src="@/assets/img/logo.png" alt="臺灣工藝學習平台" />
    </router-link>
    <ul class="menu align-center" :class="{ slider: menuShow }">
      <li>
        <router-link :to="'/crafts'">{{ t("navbar.crafts") }}</router-link>
      </li>

      <li class="position-relative">
        <a
          href="javascript:;"
          @mouseover="collegeMenuShow = true"
          @mouseleave="collegeMenuShow = false"
          class="d-none d-lg-block"
          title="前往工藝學群頁面"
        >
          <span class="d-flex align-center">
            {{ t("navbar.craft_groups") }}
            <v-icon icon="mdi-chevron-down"></v-icon>
          </span>
        </a>
        <a
          href="javascript:;"
          @click="collegeMenuShow = !collegeMenuShow"
          class="d-block d-lg-none"
          title="前往工藝學群頁面"
          >{{ t("navbar.craft_groups") }}
          <v-icon
            icon="mdi-chevron-down"
            class="toggle-icon"
            :class="{ slider: collegeMenuShow }"
          ></v-icon
        ></a>
        <div
          class="college-slider"
          :class="{ slider: collegeMenuShow }"
          @mouseover="handleMouseEvents('college', true)"
          @mouseleave="handleMouseEvents('college', false)"
        >
          <ul>
            <li v-for="(item, index) in collegeList" :key="index">
              <a
                href="javascript:;"
                @click="handleClick(item.url)"
                :title="`前往${item.title}頁面`"
                >{{ t(`${item.title}`) }}</a
              >

              <!-- <router-link :to="item.url">{{ item.title }}</router-link> -->
            </li>
          </ul>
        </div>
      </li>

      <li>
        <router-link :to="'/news'">{{ t("news") }}</router-link>
      </li>

      <li>
        <router-link :to="'/course-list'">{{
          t("navbar.craft_course")
        }}</router-link>
      </li>

      <!-- <li>
        <router-link :to="'/article'">知識文章</router-link>
      </li> -->

      <!-- <li>
        <router-link :to="'/setup-courses'">我要開課</router-link>
      </li> -->

      <li class="position-relative">
        <router-link
          :to="'/setup-courses'"
          @mouseover="coursesMenuShow = true"
          @mouseleave="coursesMenuShow = false"
          class="d-none d-lg-flex align-center"
          title="前往我要開課頁面"
          >{{ t("navbar.create_course")
          }}<v-icon icon="mdi-chevron-down"></v-icon
        ></router-link>

        <a
          href="javascript:;"
          @click="coursesMenuShow = !coursesMenuShow"
          class="d-block d-lg-none"
          title="前往我要開課頁面"
          >{{ t("navbar.create_course") }}
          <v-icon
            icon="mdi-chevron-down"
            class="toggle-icon"
            :class="{ slider: coursesMenuShow }"
          ></v-icon
        ></a>
        <div
          class="college-slider"
          :class="{ slider: coursesMenuShow }"
          @mouseover="handleMouseEvents('courses', true)"
          @mouseleave="handleMouseEvents('courses', false)"
        >
          <ul>
            <li>
              <router-link :to="'/setup-courses/tutorial'">{{
                t("tutorial.title")
              }}</router-link>
            </li>
            <li>
              <router-link :to="'/setup-courses'">{{
                t("navbar.create_course")
              }}</router-link>
            </li>
          </ul>
        </div>
      </li>

      <li class="position-relative">
        <!-- <v-dialog
          v-model="store.loginDialog"
          max-width="450"
          v-if="!store.loginState"
        >
          <template v-slot:activator="{ props }">
            <a href="javascript:;" v-bind="props" title="點擊以開啟會員登入介面"
              >會員登入</a
            >
          </template>
          <Login @close="handleClose" />
        </v-dialog> -->

        <a
          v-if="!store.loginState"
          href="https://member.moc.gov.tw/MOCMC/A0001/list?SYS_ID=CRAFT_NTCRI"
          >{{ t("navbar.login") }}</a
        >

        <div v-else>
          <router-link
            :to="'/user/profile'"
            @mouseover="loginMenuShow = true"
            @mouseleave="loginMenuShow = false"
            class="d-none d-lg-block"
          >
            <span class="d-flex align-center">
              {{ t("navbar.member") }} <v-icon icon="mdi-chevron-down"></v-icon>
            </span>
          </router-link>

          <router-link :to="'/user/profile'" class="d-block d-lg-none">{{
            t("navbar.member")
          }}</router-link>
        </div>

        <div
          v-if="store.loginState"
          class="college-slider"
          :class="{ slider: loginMenuShow }"
          @mouseover="handleMouseEvents('login', true)"
          @mouseleave="handleMouseEvents('login', false)"
        >
          <ul>
            <li>
              <router-link :to="'/user/profile'">
                {{ t("navbar.profile") }}
              </router-link>
            </li>
            <li>
              <router-link :to="'/user/passport'">
                {{ t("navbar.passport") }}
              </router-link>
            </li>
            <li>
              <router-link :to="'/user/courses'">
                {{ t("navbar.courses") }}
              </router-link>
            </li>
            <li>
              <router-link :to="'/user/favorite-class'">
                {{ t("navbar.collections") }}
              </router-link>
            </li>
            <li>
              <a
                href="javascript:;"
                @click="
                  store.logout();
                  store.mocLogout();
                "
                title="點擊以登出"
              >
                {{ t("navbar.logout") }}
              </a>
            </li>
          </ul>
        </div>

        <!-- <router-link :to="'/user/profile'" v-else>會員專區</router-link> -->
      </li>

      <li>
        <a href="javascript:;" @click="changeLang()" title="點擊切換語言"
          >中／EN</a
        >
      </li>

      <!-- <li class="d-none d-lg-block">
        <v-icon icon="mdi-magnify"></v-icon>
      </li> -->

      <!-- <li class="d-none d-lg-block position-relative">
        <a
          href="javascript:;"
          @mouseover="otherMenuShow = true"
          @mouseleave="otherMenuShow = false"
          class="d-none d-lg-block"
          title="查看選單"
        >
          <span class="d-none">查看選單</span>
          <v-icon icon="mdi-menu"></v-icon
        ></a>
        <div
          class="college-slider"
          :class="{ slider: otherMenuShow }"
          @mouseover="handleMouseEvents('other', true)"
          @mouseleave="handleMouseEvents('other', false)"
        >
          <ul>
            <li v-for="(item, index) in otherList" :key="index">
              <a
                href="javascript:;"
                @click="handleClick(item.url)"
                :title="`前往${item.title}頁面`"
                >{{ item.title }}</a
              >
            </li>
          </ul>
        </div>
      </li> -->

      <li
        v-for="(item, index) in otherList"
        :key="index"
        class="d-block d-lg-none"
      >
        <a
          href="javascript:;"
          @click="handleClick(item.url)"
          :title="`前往${item.title}頁面`"
          >{{ item.title }}</a
        >
        <!-- <router-link :to="item.url">{{ item.title }}</router-link> -->
      </li>
    </ul>

    <a href="javascript:;" class="icon" @click="toggleMenu()" title="查看選單">
      <span class="d-none">查看選單</span>
      <v-icon icon="mdi-menu" class="mx-2"></v-icon>
    </a>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  max-width: 90em;
  margin: 40px auto 0;
  padding: 0 2.1875em 0 0.9375em;
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #fff;
  border: 0.0625em solid;

  @media (max-width: 1280px) {
    margin: 40px 40px 0;
    padding: 0.625em 1.25em 0.625em 0.625em;
  }

  @media (max-width: 600px) {
    margin: 20px 20px 0;
    padding: 0.625em 1.25em 0.625em 0.625em;
  }

  img {
    width: 100%;
    max-width: 300px;
    margin-top: 0.3125em;

    @media (max-width: 600px) {
      max-width: 230px;
    }
  }

  .menu {
    display: flex;
    align-items: center;
    list-style: none;

    @media (max-width: 1280px) {
      position: absolute;
      top: 6.2em;
      left: 0;
      right: 0;
      z-index: 100;
      overflow: hidden;
      flex-direction: column;
      max-height: 0;
      transition: max-height 0.3s ease-in-out;
      box-shadow: 0.0625em 0.0625em 0.9375em #c8c8c8;
    }

    @media (max-width: 600px) {
      top: 103%;
    }

    &.slider {
      max-height: 43.75em;
      overflow: initial;
      // border: 0.0625em solid;
      // border-top: none;
    }

    & > li {
      margin-left: 1.6875em;
      font-weight: 400;

      @media (max-width: 1280px) {
        width: 100%;
        margin-left: 0;
        background: #fff;
        border-bottom: 0.0625em solid #f0f0f0;
        font-weight: 500;
        text-align: center;
      }

      a {
        width: 100%;
        display: block;
        padding: 2.5em 0;
        color: #000;
        text-decoration: none;
        line-height: 1.3;
        transition: all 0.3s;

        &:hover {
          opacity: 0.8;
        }

        @media (max-width: 1280px) {
          padding: 1.25em 0;
        }
      }
    }

    .college-slider {
      display: none;
      position: absolute;
      top: 5em;
      left: -1.875em;
      width: 8.125em;
      background: #fff;
      text-align: center;
      border-radius: 5px;
      box-shadow: 0.0625em 0.0625em 0.9375em #c8c8c8;
      transition: all 0.3s;

      @media (max-width: 1280px) {
        position: initial;
        width: auto;
        max-height: 0;
        box-shadow: none;
        transition: none;
        overflow: hidden;
      }

      // @media (max-width: 1280px) {
      //   top: 1.875em;
      //   left: 50vw;
      // }

      // @media (max-width: 600px) {
      //   left: 58vw;
      //   width: 6.25em;
      // }

      &.slider {
        display: block;
        @media (max-width: 1280px) {
          max-height: 100%;
        }
      }

      ul {
        @media (max-width: 1280px) {
          padding-bottom: 0.9375em;
        }
        li {
          transition: all 0.3s;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background-color: #eee;
            @media (max-width: 1280px) {
              opacity: 0.8;
              background-color: #fff;
            }
          }

          a {
            display: block;
            width: 100%;
            padding: 0.9375em 0.625em;
            @media (max-width: 1280px) {
              padding: 0.9375em 0.625em 0.9375em 2.5em;
            }
          }
        }
      }
    }
  }

  .toggle-icon {
    margin-left: 0.3125em;
    position: absolute;
    top: 0.7em;
    transition: all 0.3s;
    &.slider {
      transform: rotate(180deg);
    }
  }

  .icon {
    display: none;
    transition: all 0.3s;

    @media (max-width: 1280px) {
      display: block;
    }

    &:hover {
      opacity: 0.8;
    }

    .v-icon {
      font-size: 2rem;
    }
  }

  &::before {
    content: "";
    position: absolute;
    top: 0.375em;
    left: 0.375em;
    width: 99%;
    height: 88%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: -1;

    @media (max-width: 960px) {
      top: 0.4375em;
      left: 1.3vw;
      width: 97%;
      height: 83%;
    }
  }
}
</style>