From 05cc5857974f5500be900f2628468f79cb5ce481 Mon Sep 17 00:00:00 2001
From: barrystone <barrystone3183@gmail.com>
Date: Sun, 28 Mar 2021 11:07:03 +0800
Subject: [PATCH] [Update] add active style on header in home

---
 src/App.vue                      |  2 +-
 src/assets/scss/home/header.scss | 10 ++++-
 src/components/Header.vue        | 66 ++++++++++++++++++++++++++++----
 3 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3744696..c94cd21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <Header v-if="headerVisible()" />
+    <Header v-if="headerVisible()" v-bind:route="$route" />
     <router-view />
     <Footer />
   </div>
diff --git a/src/assets/scss/home/header.scss b/src/assets/scss/home/header.scss
index e12bc99..530108f 100644
--- a/src/assets/scss/home/header.scss
+++ b/src/assets/scss/home/header.scss
@@ -34,7 +34,7 @@
     width: 80%;
   }
 
-  &-link {
+  &-links {
     float: right;
     width: 600px;
     margin-right: 92px;
@@ -56,6 +56,9 @@
         height: 100%;
         display: block;
         text-align: left;
+        // &:active {
+        //   border-bottom: $indigo-blue solid 5px;
+        // }
 
         a {
           font-size: 12pt;
@@ -66,6 +69,11 @@
     }
   }
 
+  &-link--active {
+    // padding-bottom: 10px;
+    border-bottom: $indigo-blue solid 3.5px;
+  }
+
   &-apply {
     width: 92px;
     height: 38px;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 95141bd..d9b1b82 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -13,13 +13,49 @@
       </div>
     </div>
     <div class="header__right">
-      <div class="header-link">
+      <div class="header-links">
         <ul>
-          <li><a href="/2021/agenda">議程與活動</a></li>
-          <li><a href="/2021/traffic">交通方式</a></li>
-          <li><a href="/2021/venue">會場地圖</a></li>
-          <li><a href="/2021/sponsor">贊助資訊</a></li>
-          <li><a href="/2021/team">籌備團隊</a></li>
+          <li>
+            <input
+              type="radio"
+              id="1"
+              class="header-link__input"
+              name="checlbox"
+            />
+            <a
+              href="/2021/agenda"
+              v-bind:class="onRoute('Agenda') ? 'header-link--active' : ''"
+              >議程與活動</a
+            >
+          </li>
+          <li>
+            <a
+              href="/2021/traffic"
+              v-bind:class="onRoute('Traffic') ? 'header-link--active' : ''"
+              >交通方式</a
+            >
+          </li>
+          <li>
+            <a
+              href="/2021/venue"
+              v-bind:class="onRoute('Venue') ? 'header-link--active' : ''"
+              >會場地圖</a
+            >
+          </li>
+          <li>
+            <a
+              href="/2021/sponsor"
+              v-bind:class="onRoute('Sponsor') ? 'header-link--active' : ''"
+              >贊助資訊</a
+            >
+          </li>
+          <li>
+            <a
+              href="/2021/team"
+              v-bind:class="onRoute('Team') ? 'header-link--active' : ''"
+              >籌備團隊</a
+            >
+          </li>
         </ul>
       </div>
       <div class="header-apply">
@@ -34,8 +70,24 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 
-@Component
+@Component({
+  props: ["route"],
+})
 export default class Header extends Vue {
+  mounted() {
+    console.log(this.$props.route.name);
+  }
+  public onRoute(routeName: String) {
+    return this.$props.route.name === routeName ? true : false;
+  }
+
+  // computed(){
+  //   pagePosition:function(){
+
+  //   }
+
+  // }
+
   //   header = document.getElementById("topHeader");
   //   sticky = this.header.offsetTop;
   //   header = null;