From a1aa7e037935f15a9d5501c4975e125897f70398 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Tue, 7 Aug 2018 23:15:55 +0800
Subject: [PATCH 1/3] chore: wip commit

---
 docs/.vuepress/config.js        | 10 +++++-
 docs/guide/README.md            |  2 +-
 lib/default-theme/NavLinks.vue  |  2 ++
 lib/default-theme/Navbar.vue    | 55 ++++++++++++++++++++++++++++++---
 lib/default-theme/SearchBox.vue |  6 ++--
 5 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 39a63234fb..64012aef91 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -3,7 +3,7 @@ module.exports = {
   locales: {
     '/': {
       lang: 'en-US',
-      title: 'VuePress',
+      title: 'VuePress123123',
       description: 'Vue-powered Static Site Generator'
     },
     '/zh/': {
@@ -54,6 +54,14 @@ module.exports = {
             text: 'Default Theme Config',
             link: '/default-theme-config/'
           },
+          {
+            text: 'Default Theme Config',
+            link: '/default-theme-config/'
+          },
+          {
+            text: 'Default Theme Config',
+            link: '/default-theme-config/'
+          },
           {
             text: 'Changelog',
             link: 'https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md'
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 2ab95d5003..5ad2af4fc0 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -1,4 +1,4 @@
-# Introduction
+# Introduction <Badge text="beta" type="warn"/>
 
 <Bit/>
 
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index 839bd4d886..4037f2889d 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -130,6 +130,8 @@ export default {
     display inline-block
     margin-left 1.5rem
     line-height 2rem
+    &:first-child
+      margin-left 0
   .repo-link
     margin-left 1.5rem
 
diff --git a/lib/default-theme/Navbar.vue b/lib/default-theme/Navbar.vue
index 64e631c418..94ccfc75c7 100644
--- a/lib/default-theme/Navbar.vue
+++ b/lib/default-theme/Navbar.vue
@@ -13,13 +13,19 @@
         :alt="$siteTitle"
       >
       <span
+        ref="siteName"
         class="site-name"
         v-if="$siteTitle"
         :class="{ 'can-hide': $site.themeConfig.logo }"
       >{{ $siteTitle }}</span>
     </router-link>
 
-    <div class="links">
+    <div
+      class="links"
+      :style="{
+          'max-width': linksWrapMaxWidth + 'px'
+        }"
+    >
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
         :options="algolia"
@@ -39,6 +45,24 @@ import NavLinks from './NavLinks.vue'
 export default {
   components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
 
+  data () {
+    return {
+      linksWrapMaxWidth: null
+    }
+  },
+
+  mounted () {
+    const handleLinksWrapWidth = () => {
+      this.linksWrapMaxWidth =
+        this.$el.offsetWidth -
+        parseInt(css(this.$el, 'paddingLeft')) -
+        parseInt(css(this.$el, 'paddingRight')) -
+        this.$refs.siteName.offsetWidth
+    }
+    handleLinksWrapWidth()
+    window.addEventListener('resize', handleLinksWrapWidth, false)
+  },
+
   computed: {
     algolia () {
       return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
@@ -49,13 +73,23 @@ export default {
     }
   }
 }
+
+function css (el, property) {
+  // NOTE: Known bug, will return 'auto' if style value is 'auto'
+  const win = el.ownerDocument.defaultView
+  // null means not to return pseudo styles
+  return win.getComputedStyle(el, null)[property]
+}
 </script>
 
 <style lang="stylus">
 @import './styles/config.styl'
 
+$navbar-vertical-padding = 0.7rem
+$navbar-horizontal-padding = 1.5rem
+
 .navbar
-  padding 0.7rem 1.5rem
+  padding $navbar-vertical-padding $navbar-horizontal-padding
   line-height $navbarHeight - 1.4rem
   position relative
   a, span, img
@@ -71,14 +105,27 @@ export default {
     color $textColor
     position relative
   .links
+    padding-left 1.5rem
+    box-sizing border-box
+    background-color white
+    max-width "calc(100% - %s)" % ($navbar-horizontal-padding)
+    white-space nowrap
     font-size 0.9rem
     position absolute
-    right 1.5rem
-    top 0.7rem
+    right $navbar-horizontal-padding
+    top $navbar-vertical-padding
+    display flex
+    .search-box
+      flex: 0 0 auto
+      vertical-align top
+    .nav-links
+      flex 1
 
 @media (max-width: $MQMobile)
   .navbar
     padding-left 4rem
     .can-hide
       display none
+    .links
+      padding-left 1.5rem
 </style>
diff --git a/lib/default-theme/SearchBox.vue b/lib/default-theme/SearchBox.vue
index 8a104cfcd6..7008b22a08 100644
--- a/lib/default-theme/SearchBox.vue
+++ b/lib/default-theme/SearchBox.vue
@@ -4,6 +4,7 @@
       @input="query = $event.target.value"
       aria-label="Search"
       :value="query"
+      :class="{ 'focused': focused }"
       autocomplete="off"
       spellcheck="false"
       @focus="focused = true"
@@ -156,7 +157,7 @@ export default {
 .search-box
   display inline-block
   position relative
-  margin-right 0.5rem
+  margin-right 1rem
   input
     cursor text
     width 10rem
@@ -209,7 +210,6 @@ export default {
       width 0
       border-color transparent
       position relative
-      left 1rem
       &:focus
         cursor text
         left 0
@@ -223,6 +223,8 @@ export default {
 @media (max-width: $MQMobile)
   .search-box
     margin-right 0
+    input
+      left 1rem
     .suggestions
       right 0
 

From 4e88817c37e699017a6ef4733375edab8d08a139 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Thu, 9 Aug 2018 00:23:30 +0800
Subject: [PATCH 2/3] chore: only set max width at desktop

---
 docs/guide/README.md         |  2 +-
 lib/default-theme/Navbar.vue | 20 ++++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/docs/guide/README.md b/docs/guide/README.md
index 5ad2af4fc0..2ab95d5003 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -1,4 +1,4 @@
-# Introduction <Badge text="beta" type="warn"/>
+# Introduction
 
 <Bit/>
 
diff --git a/lib/default-theme/Navbar.vue b/lib/default-theme/Navbar.vue
index 94ccfc75c7..88be2fc8f9 100644
--- a/lib/default-theme/Navbar.vue
+++ b/lib/default-theme/Navbar.vue
@@ -23,8 +23,8 @@
     <div
       class="links"
       :style="{
-          'max-width': linksWrapMaxWidth + 'px'
-        }"
+        'max-width': linksWrapMaxWidth + 'px'
+      }"
     >
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
@@ -52,12 +52,17 @@ export default {
   },
 
   mounted () {
+    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
     const handleLinksWrapWidth = () => {
-      this.linksWrapMaxWidth =
-        this.$el.offsetWidth -
-        parseInt(css(this.$el, 'paddingLeft')) -
-        parseInt(css(this.$el, 'paddingRight')) -
-        this.$refs.siteName.offsetWidth
+      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+        this.linksWrapMaxWidth = null
+      } else {
+        this.linksWrapMaxWidth =
+          this.$el.offsetWidth -
+          parseInt(css(this.$el, 'paddingLeft')) -
+          parseInt(css(this.$el, 'paddingRight')) -
+          this.$refs.siteName.offsetWidth
+      }
     }
     handleLinksWrapWidth()
     window.addEventListener('resize', handleLinksWrapWidth, false)
@@ -108,7 +113,6 @@ $navbar-horizontal-padding = 1.5rem
     padding-left 1.5rem
     box-sizing border-box
     background-color white
-    max-width "calc(100% - %s)" % ($navbar-horizontal-padding)
     white-space nowrap
     font-size 0.9rem
     position absolute

From 7597acd6c3c8bd587daa23fdc127d3d86d8cf49c Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Thu, 9 Aug 2018 00:36:47 +0800
Subject: [PATCH 3/3] refactor: code

---
 docs/.vuepress/config.js     | 10 +---------
 lib/default-theme/Navbar.vue |  7 ++-----
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 9c3b2a1cc4..f56003051c 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -3,7 +3,7 @@ module.exports = {
   locales: {
     '/': {
       lang: 'en-US',
-      title: 'VuePress123123',
+      title: 'VuePress',
       description: 'Vue-powered Static Site Generator'
     },
     '/zh/': {
@@ -59,14 +59,6 @@ module.exports = {
             text: 'Default Theme Config',
             link: '/default-theme-config/'
           },
-          {
-            text: 'Default Theme Config',
-            link: '/default-theme-config/'
-          },
-          {
-            text: 'Default Theme Config',
-            link: '/default-theme-config/'
-          },
           {
             text: 'Changelog',
             link: 'https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md'
diff --git a/lib/default-theme/Navbar.vue b/lib/default-theme/Navbar.vue
index 88be2fc8f9..6ad9bb2098 100644
--- a/lib/default-theme/Navbar.vue
+++ b/lib/default-theme/Navbar.vue
@@ -53,15 +53,12 @@ export default {
 
   mounted () {
     const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
+    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
     const handleLinksWrapWidth = () => {
       if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
         this.linksWrapMaxWidth = null
       } else {
-        this.linksWrapMaxWidth =
-          this.$el.offsetWidth -
-          parseInt(css(this.$el, 'paddingLeft')) -
-          parseInt(css(this.$el, 'paddingRight')) -
-          this.$refs.siteName.offsetWidth
+        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING - this.$refs.siteName.offsetWidth
       }
     }
     handleLinksWrapWidth()