From 042177249a00eeb890edf38f6ba3d9e8712cceb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=80=89=E5=84=AA=E6=82=9F?=
 <jigenbakdaaan@gmail.com>
Date: Sun, 6 Sep 2020 12:10:25 +0900
Subject: [PATCH] feat: show nav contents in sidebar when mobile

---
 src/client/theme-default/components/NavBar.vue         |  8 +++++++-
 src/client/theme-default/components/NavBarLink.vue     |  2 +-
 src/client/theme-default/components/NavBarLinks.vue    |  3 ++-
 .../theme-default/components/NavDropdownLink.vue       |  2 +-
 src/client/theme-default/components/SideBar.ts         |  2 ++
 src/client/theme-default/components/SideBar.vue        | 10 ++++++++++
 6 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
index 99cd3f9a..b99bfafa 100644
--- a/src/client/theme-default/components/NavBar.vue
+++ b/src/client/theme-default/components/NavBar.vue
@@ -12,7 +12,7 @@
     />
     <span>{{ $site.title }}</span>
   </a>
-  <NavBarLinks />
+  <NavBarLinks class="hide-mobile"/>
 </template>
 
 <script src="./NavBar"></script>
@@ -29,4 +29,10 @@
   height: 1.3rem;
   vertical-align: bottom;
 }
+
+@media screen and (max-width: 719px) {
+  .hide-mobile {
+    display: none;
+  }
+}
 </style>
diff --git a/src/client/theme-default/components/NavBarLink.vue b/src/client/theme-default/components/NavBarLink.vue
index f6f5da6b..20da3b51 100644
--- a/src/client/theme-default/components/NavBarLink.vue
+++ b/src/client/theme-default/components/NavBarLink.vue
@@ -25,7 +25,7 @@
 }
 
 .nav-link {
-  display: inline-block;
+  display: block;
   margin-bottom: -2px;
   border-bottom: 2px solid transparent;
   font-size: 0.9rem;
diff --git a/src/client/theme-default/components/NavBarLinks.vue b/src/client/theme-default/components/NavBarLinks.vue
index 7bd1f228..e2ef6ccb 100644
--- a/src/client/theme-default/components/NavBarLinks.vue
+++ b/src/client/theme-default/components/NavBarLinks.vue
@@ -20,7 +20,8 @@
 
 @media screen and (max-width: 719px) {
   .nav-links {
-    display: none;
+    display: block;
+    height: auto;
   }
 }
 </style>
diff --git a/src/client/theme-default/components/NavDropdownLink.vue b/src/client/theme-default/components/NavDropdownLink.vue
index fb17a533..03f4a4bd 100644
--- a/src/client/theme-default/components/NavDropdownLink.vue
+++ b/src/client/theme-default/components/NavDropdownLink.vue
@@ -46,7 +46,7 @@
 .dropdown-wrapper {
   position: relative;
   cursor: pointer;
-  display: inline-block;
+  display: block;
   margin-left: 1.5rem;
 }
 .dropdown-wrapper .dropdown-title {
diff --git a/src/client/theme-default/components/SideBar.ts b/src/client/theme-default/components/SideBar.ts
index 89988165..260e97bb 100644
--- a/src/client/theme-default/components/SideBar.ts
+++ b/src/client/theme-default/components/SideBar.ts
@@ -9,6 +9,7 @@ import { Header } from '../../../../types/shared'
 import { isActive, joinUrl, getPathDirName } from '../utils'
 import { DefaultTheme } from '../config'
 import { useActiveSidebarLinks } from '../composables/activeSidebarLink'
+import NavBarLinks from './NavBarLinks.vue'
 
 const SideBarItem: FunctionalComponent<{
   item: ResolvedSidebarItem
@@ -33,6 +34,7 @@ const SideBarItem: FunctionalComponent<{
 
 export default {
   components: {
+    NavBarLinks,
     SideBarItem
   },
 
diff --git a/src/client/theme-default/components/SideBar.vue b/src/client/theme-default/components/SideBar.vue
index 8ce13fdd..deb214bf 100644
--- a/src/client/theme-default/components/SideBar.vue
+++ b/src/client/theme-default/components/SideBar.vue
@@ -1,4 +1,5 @@
 <template>
+  <NavBarLinks class="show-mobile"/>
   <ul class="sidebar">
     <SideBarItem v-for="item of items" :item="item" />
   </ul>
@@ -7,6 +8,15 @@
 <script src="./SideBar"></script>
 
 <style>
+.show-mobile {
+  display: none;
+}
+@media screen and (max-width: 719px) {
+  .show-mobile {
+    display: block;
+  }
+}
+
 .sidebar,
 .sidebar-items {
   list-style-type: none;