fixes #2 #1

rodber · Jan 30, 2021 · aa841f8 · aa841f8
1 parent 78685f5
commit aa841f8
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 137 deletions.
diff --git a/components/Header.vue b/components/Header.vue
@@ -5,24 +5,23 @@
         <nav class="navbar navbar-expand-md navbar-light bg-white fixed-top">
           <div class="container">
             <NavLink link="/" class="navbar-brand">
-              <img :src="($withBase)($themeConfig.logo)" />
+              <img :src="$withBase($themeConfig.logo)" />
               {{ $site.title }}
             </NavLink>
-            <button
-              class="navbar-toggler"
-              type="button"
-              data-toggle="collapse"
-              data-target="#navbarsExampleDefault"
-              aria-controls="navbarsExampleDefault"
-              aria-expanded="false"
-              aria-label="Toggle navigation"
-            >
-              <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+            <component
+              :is="isOpen ? 'XIcon' : 'MenuIcon'"
+              @click="$emit('toggle-sidebar')"
+            />
+            <div class="collapse navbar-collapse" :class="{ open: isOpen }">
               <ul v-if="$themeConfig.nav" class="navbar-nav ml-auto">
-                <li v-for="item in $themeConfig.nav" :key="item.text" class="nav-item">
-                  <NavLink :link="item.link" class="nav-link">{{ item.text }}</NavLink>
+                <li
+                  v-for="item in $themeConfig.nav"
+                  :key="item.text"
+                  class="nav-item"
+                >
+                  <NavLink :link="item.link" class="nav-link">{{
+                    item.text
+                  }}</NavLink>
                 </li>
                 <SearchBox />
                 <Feed />
@@ -36,21 +35,25 @@
 </template>
 
 <script>
+import { MenuIcon, XIcon } from 'vue-feather-icons'
 import SearchBox from '@SearchBox'
 import Feed from './Feed'
-
 export default {
-  components: { SearchBox, Feed },
+  components: { SearchBox, Feed, MenuIcon, XIcon },
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true,
+    },
+  },
 }
 </script>
 
 <style lang="stylus">
 @import '~@app/style/config';
 
-// border-bottom 5px solid lighten(#3eaf7c, 50%)
 .header-wrapper {
   .title {
-    /* flex 0 0 200px */
     font-size: 30px;
     margin: 0;
     letter-spacing: 2px;
@@ -117,11 +120,12 @@ export default {
   }
 }
 
-@media (max-width: $MQMobile) {
-  #header {
-    display: none;
-  }
+.collapse.navbar-collapse.open {
+  transition: 0.3s ease;
+  display: block;
+}
 
+@media (max-width: $grid-md) {
   .header-wrapper {
     flex-direction: column;
 
@@ -130,4 +134,37 @@ export default {
     }
   }
 }
+
+.search-box {
+  input {
+    border-color: darken($borderColor, 10%);
+  }
+}
+
+@media (max-width: $grid-md) {
+  .navbar.navbar-expand-md {
+    padding: 1.2rem;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.05);
+    transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    transition: 0.3s ease;
+  }
+}
+
+#header {
+  .feather-menu {
+    display: block;
+  }
+}
+
+@media (min-width: $grid-md) {
+  #header {
+    .feather-menu {
+      display: none;
+    }
+  }
+}
 </style>
diff --git a/components/MobileHeader.vue b/components/MobileHeader.vue
diff --git a/layouts/GlobalLayout.vue b/layouts/GlobalLayout.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="vuepress-theme-blog__global-layout">
-    <Header />
-    <MobileHeader
+    <Header
       :is-open="isMobileHeaderOpen"
       @toggle-sidebar="isMobileHeaderOpen = !isMobileHeaderOpen"
     />
@@ -15,14 +14,12 @@
 <script>
 import GlobalLayout from '@app/components/GlobalLayout.vue'
 import Header from '@theme/components/Header.vue'
-import MobileHeader from '@theme/components/MobileHeader.vue'
 import Footer from '@theme/components/Footer.vue'
 
 export default {
   components: {
     DefaultGlobalLayout: GlobalLayout,
     Header,
-    MobileHeader,
     Footer,
   },
 
@@ -41,17 +38,25 @@ export default {
 </script>
 
 <style lang="stylus">
-#vuepress-theme-blog__global-layout
-  word-wrap break-word
-
-.content-wrapper
-  padding 160px 15px 80px 15px
-  min-height calc(100vh - 80px - 60px - 160px)
-  max-width $contentWidth
-  margin 0 auto
-
-  @media (max-width: $MQMobile)
-    &
-      padding 100px 15px 20px 15px
-      min-height calc(100vh - 20px - 60px - 100px)
+body {
+  min-width: 320px;
+}
+
+#vuepress-theme-blog__global-layout {
+  word-wrap: break-word;
+}
+
+.content-wrapper {
+  padding: 160px 15px 80px 15px;
+  min-height: calc(100vh - 80px - 60px - 160px);
+  max-width: $contentWidth;
+  margin: 0 auto;
+
+  @media (max-width: $MQMobile) {
+    & {
+      padding: 100px 15px 20px 15px;
+      min-height: calc(100vh - 20px - 60px - 100px);
+    }
+  }
+}
 </style>
diff --git a/styles/mobile.styl b/styles/mobile.styl
@@ -1,8 +1,5 @@
 @require './config'
 
-// narrow desktop / iPad
-// @media (max-width: $MQNarrow)
-
 // wide mobile
 @media (max-width: $MQMobile)
   {$contentClass}:not(.custom) > h1:first-child