Merge pull request #27 from kotodu/dev

1.0.2
kotodu · Aug 16, 2020 · c610cf2 · c610cf2
2 parents 669bc7f + 0234ca7
commit c610cf2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 
 
+# [1.0.2]
+## 修正内容
+- モバイル時にハンバーガーボタンが息してない事態の修正
+    - 応急処置で、vue.jsのclick動作で対応
 
 # [1.0.1]
 ## 追加内容

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kotodu.io",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -3,7 +3,8 @@
     <nav
     class="navbar navbar-expand-lg navbar-dark bg-dark">
         <span class="navbar-brand px-5">kotodu.io</span>
-        <button
+        <!-- vueに実装した所、なぜか不具合…… -->
+        <!-- <button
         class="navbar-toggler" 
         type="button"
         data-toggle="collapse"
@@ -12,8 +13,23 @@
         aria-expanded="false"
         aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
+        </button> -->
+        <!-- 
+        <div
+        class="collapse navbar-collapse"
+        id="navbarNav"> -->
+
+        <!-- 仕方ないので、vue.jsのクリック動作で解決 -->
+        <button
+        class="navbar-toggler"
+        @click="show.mobileNav= !show.mobileNav"
+        >
+            <span class="navbar-toggler-icon"/>
         </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
+        <div
+        v-show="show.mobileNav"
+        class="navbar-collapse"
+        id="navbarNav">
             <ul class="navbar-nav">
             <li class="nav-item mx-2">
                 <router-link
@@ -81,8 +97,14 @@ export default defineComponent({
             link2:"About",
             link3:"Works"
         });
+        const show = reactive({
+            // モバイル時の表示フラグ
+            // 最初はfalse
+            mobileNav:false
+        });
         return {
-            linksText
+            linksText,
+            show
         }
     }
 })