[ADD] add nav

src/assets/scss/news/agenda.scss

@@ -360,6 +360,7 @@ $max-width-small-3: 360px;
 
 //cfp-sub-information <subInformation>
 .info {
+  position: relative;
   width: 100%;
   font-family: $fontFamily;
   float: left;

src/assets/scss/news/header.scss

@@ -1,5 +1,7 @@
 @import '../hyperpoint';
 @import '../color';
+$fontFamily: Noto Sans TC, monospace;
+
 
 // desktop mode
 #news-header {
@@ -353,3 +355,65 @@
     }
   }
 }
+
+.news-nav {
+  position: fixed;
+  text-align: end;
+  top: 25px;
+  right: 50px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 15px;
+  padding: 10px;
+  box-shadow: 3px 3px 15px $mid-blue;
+  background: white;
+  z-index: 5;
+  &-item {
+    margin: 5px 8px;
+    color: $mid-blue;
+    font-family: $fontFamily;
+    cursor: point;
+  }
+  &-button {
+    color: $mid-blue;
+    border: none;
+    background: transparent;
+    font-size: 20px;
+    cursor: point;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.nav-control-button {
+  color: $mid-blue;
+  position: fixed;
+  z-index: 5;
+  top: 25px;
+  right: 50px;
+  border-radius: 5px;
+  border: none;
+  font-size: 24px;
+  position: flex;
+  flex-direction: column;
+  width: 55px;
+  background-color: white;
+  box-shadow: -2px 0 15px $mid-blue;
+  padding: 0 15px;
+  cursor: pointer;
+  p {
+    text-align: end;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .nav-control-button {
+    top: 250px;
+    right: 0;
+    width: 35px;
+    font-size: 16px;
+    text-align: left;
+    padding: 0 10px;
+  }
+}

src/assets/scss/news/schedule.scss

@@ -7,6 +7,7 @@
 $fontFamily: 'Noto Sans CJK TC', monospace;
 
 #news-schedule {
+  position: relative;
   max-width: 80vw;
   margin: 0 auto;
 

src/assets/scss/news/topic.scss

@@ -3,7 +3,7 @@
 
 .topic {
   padding: 30px 0;
-
+  position: relative;
   display: grid;
   grid-template-columns: 256px min-content 1fr;
 

src/components/news/Agenda.vue

@@ -2,7 +2,7 @@
     <div class="info">
         <div class="info-container">
             <!--    議程種類方塊     -->
-            <section class="info-section">
+            <section class="info-section" id="info-section">
                 <h1>議程種類</h1>
                 <article class="info-section__content">
                     <div class="info-kind">
@@ -35,7 +35,7 @@
             </section>
             <!--    議程種類方塊     -->
             <!--    流程             -->
-            <section class="info-section">
+            <section class="info-section" id="process">
                 <h1>流程</h1>
                 <article class="info-section__content">
                     <p>
@@ -47,7 +47,7 @@
             </section>
             <!--    流程             -->
             <!--    投稿方式         -->
-            <section class="info-section">
+            <section class="info-section" id="methods">
                 <h1>投稿方式</h1>
                 <article class="info-section__content">
                     <p>
@@ -100,7 +100,7 @@
             </section>
             <!--    投稿方式         -->
             <!--    審稿方式         -->
-            <section class="info-section">
+            <section class="info-section" id="review">
                 <h1>審稿方式</h1>
                 <article class="info-section__content">
                     <p>
@@ -115,7 +115,7 @@
                 <!--    審稿方式         -->
                 <!--    投稿注意事項     -->
             </section>
-            <section class="info-section">
+            <section class="info-section" id="precautions">
                 <h1>投稿注意事項</h1>
                 <article class="info-section__content">
                     <p>

src/components/news/Header.vue

@@ -46,6 +46,24 @@
         </div>
       </div>
     </div>
+    <nav v-if="navVisible">
+        <div class="news-nav">
+          <a class="news-nav-item" href="#schedule">重要時程</a>
+          <a class="news-nav-item" href="#example">投稿主題範例</a>
+          <a class="news-nav-item" href="#code-of-conduct">Code of Conduct</a>
+          <a class="news-nav-item" href="#info-section">議程種類</a>
+          <a class="news-nav-item" href="#process">流程</a>
+          <a class="news-nav-item" href="#methods">投稿方式</a>
+          <a class="news-nav-item" href="#review">審稿方式</a>
+          <a class="news-nav-item" href="#precautions">投稿注意事項</a>
+          <a class="news-nav-item" href="https://forms.gle/XoXJSD2P8dL8X8s2A">我要投稿</a>
+          <button class="news-nav-button" @click="(e)=>navVisible=!navVisible">&#9650;</button>
+        </div>
+    </nav>
+    <button v-if="!navVisible" class="nav-control-button" @click="(e)=>navVisible=!navVisible">
+      <p>&#9650;</p>
+      <p>&#9660;</p>
+    </button>
   </header>
 </template>
 
@@ -66,6 +84,7 @@ interface Countdown {
 @Component
 export default class CfpHeader extends Vue {
   private timerId!: number;
+  private navVisible = false;
   private countdown: Countdown = {
     s: 0,
     m: 0,
@@ -112,6 +131,7 @@ export default class CfpHeader extends Vue {
   private unregisterTimer () {
     clearInterval(this.timerId);
   }
+
 }
 </script>