feat : addHome Page and fix NavBar

src/components/DropDown.vue

@@ -1,27 +1,25 @@
 <template>
   <!-- only one link -->
   <div v-if="linkList.length == 1" class="flex flex-col justify-center">
-    <a
-      class="block text-xl font-bold"
+    <RouterLink
+      class="block font-bold text-sm lg:text-xl md:text-base"
       :class="{
         'text-white': theme === 'light',
         'dark-content': theme === 'dark',
       }"
-      :href="linkList[0].link"
-      >{{ title }}</a
+      :to="linkList[0].link"
+      >{{ title }}</RouterLink
     >
   </div>
 
   <!-- multi links -->
-  <button
-    v-if="linkList.length > 1"
-    class="group"
-    type="button"
-    @click="toggleCollapse"
-  >
-    <div class="flex justify-center gap-x-2">
+  <button v-if="linkList.length > 1" class="group lg:hover:mt-4 md:hover:mt-[18px] hover:mt-[20px]" type="button">
+    <div
+      class="flex justify-center lg:gap-x-2 md:gap-x-1"
+      :class="{ 'lg:px-[9px] md:px-[6px] px-4': hasLongWord(linkList) }"
+    >
       <span
-        class="text-xl font-bold"
+        class="font-bold text-sm lg:text-xl md:text-base"
         :class="{
           'text-white': theme === 'light',
           'dark-content': theme === 'dark',
@@ -49,30 +47,28 @@
 
     <div
       v-if="linkList.length > 1"
-      class="fixed hidden group-hover:block group-hover:z-50"
+      class="hidden z-50 bg-primary-700 py-2 rounded-md group-hover:block"
     >
-      <a
+      <RouterLink
         v-for="link in linkList"
         :key="link.name"
-        :href="link.link"
-        class="block px-1 py-2 text-sm"
+        :to="link.link"
+        class="block px-1 py-2 lg:text-sm text-[11px] text-white hover:bg-primary-50 hover:rounded-sm hover:text-primary-900"
         :class="{
-          'text-white bg-transparent hover:rounded-md hover:bg-slate-500 hover:bg-opacity-35':
-            theme === 'light',
-          'text-black bg-primary-50 bg-opacity-20 hover:bg-opacity-35 hover:rounded-md':
-            theme === 'dark',
+          'bg-transparent hover:rounded-m': theme === 'light',
         }"
         @click="handleLinkClick(link)"
       >
         {{ link.name }}
-      </a>
+      </RouterLink>
     </div>
   </button>
 </template>
 
 <script setup>
 // reference: https://stackoverflow.com/questions/60917112/displaying-button-when-hovering-over-div-in-tailwindcss
-import { defineProps, toRefs, ref } from "vue";
+import { defineProps, toRefs } from "vue";
+import { RouterLink } from "vue-router";
 
 const props = defineProps({
   theme: {
@@ -81,7 +77,7 @@ const props = defineProps({
   },
   title: {
     type: String,
-    default: "單車節", // 參加活動 , 關於單車節 , 知識論壇 , 合作夥伴 , 紀念品預購 ...
+    default: "單車節", // 參加活動 , 關於單車節 , 知識論壇 , 合作夥伴 , 紀念品小舖 ...
   },
   linkList: {
     type: Array,
@@ -95,10 +91,14 @@ const props = defineProps({
 });
 
 const { theme, title, linkList } = toRefs(props);
+
+const hasLongWord = (linkList) => {
+  return linkList.some((link) => link.name.length > 5);
+};
 </script>
 
 <style scoped>
 .dark-content {
   color: #404040;
 }
-</style>
+</style>

src/components/NavBar.vue

@@ -1,41 +1,100 @@
 <template>
-  <div class="w-full fixed flex justify-center pt-2 pb-3"
+  <div
+    class="navbar w-full fixed flex justify-center pt-2 pb-3 h-20 z-[100]"
     :class="{
-        'bg-primary-50' : theme == 'dark',
+      'bg-primary-50 shadow-lg': theme == 'dark',
     }"
   >
-    <nav class="flex justify-center gap-28">
-      <img v-if="theme=='light'" class="w-44" src="/logo.svg" alt="logo" />
-      <img v-else class="w-44" src="/logo-dark.svg" alt="logo" />
+    <nav class="flex justify-center xl:gap-26 lg:gap-8 gap-3 max-w-[1200px]">
+      <RouterLink class="flex flex-col justify-center" to="/">
+        <img
+          :src="theme == 'light' ? '/BikeFestival17th-Frontend/logo.svg' : '/BikeFestival17th-Frontend/logo-dark.svg'"
+          alt="logo"
+          class="block xl:w-44 lg:w-36 md:w-28 w-24 cursor-pointer"
+          @click=""
+        />
+      </RouterLink>
 
-      <div class="flex gap-7">
+      <div class="flex xl:gap-7 lg:gap-3 gap-2">
         <template v-for="item in navBarList">
-          <DropDown :theme="theme" :title="item.title" :linkList="item.linkList" />
+          <DropDown
+            :theme="theme"
+            :title="item.title"
+            :linkList="item.linkList"
+          />
         </template>
       </div>
 
-      <a
-        href="/signup"
-        class="block h-14 w-36 text-bold text-xl text-center font-bold text-primary-50  bg-primary-900 rounded-full"
-      >
-        <div class="flex flex-col justify-center h-full">
-          <span>即刻報名</span>
-        </div>
-      </a>
+      <div class="flex flex-col justify-center">
+        <RouterLink
+          href="#"
+          class="block text-center font-bold bg-primary-900 rounded-full lg:h-14 lg:w-36 lg:text-xl md:h-10 md:w-24 h-8 w-20"
+        >
+          <div class="flex flex-col justify-center h-full">
+            <span
+              class="text-bold text-primary-50 text-sm lg:text-xl md:text-base"
+              >即刻報名</span
+            >
+          </div>
+        </RouterLink>
+      </div>
     </nav>
   </div>
 </template>
 
 <script setup>
 import navBarList from "../data/navBar.json";
 import DropDown from "./DropDown.vue";
-import { defineProps } from "vue";
+import { defineProps, onMounted, ref, computed, watch } from "vue";
+import { useRoute , RouterLink } from "vue-router";
 
+const theme = ref("dark");
 const props = defineProps({
-  theme : {
+  theme: {
     type: String,
     default: "dark", // dark
   },
 });
 
+const router = useRoute();
+const path = computed(() => {
+  return router.path;
+});
+
+// watch if path changed
+watch(path, (newVal, oldVal) => {
+  if (newVal === "/") {
+    theme.value = "light";
+  } else {
+    theme.value = "dark";
+  }
+});
+
+onMounted(() => {
+  if (path.value === "/") {
+    theme.value = "light";
+  }
+
+  window.addEventListener("scroll", (e) => {
+    // only for home page
+    if (path.value !== "/") return;
+
+    if (window.innerWidth >= 1024) {
+      // desktop
+      if (window.scrollY > 500) {
+        theme.value = "dark";
+      } else {
+        theme.value = "light";
+      }
+    } else {
+      // mobile
+    }
+  });
+});
 </script>
+
+<style scoped>
+.navbar {
+  transition: all 0.2s ease-in-out;
+}
+</style>