make search bar fixed

Author: vincentlauvlwj

source/_data/navigation-zh-cn.yaml

@@ -1,6 +1,6 @@
 
 home:
-  - title: 快速开始
+  - title: 快速上手
     link: zh-cn/quick-start.html
     color: purple
     icon: flash

source/zh-cn/quick-start.md

@@ -1,10 +1,10 @@
 ---
-title: 快速开始
+title: 快速上手
 lang: zh-cn
 related_path: en/quick-start.html
 ---
 
-# 快速开始
+# 快速上手
 
 Ktorm 已经发布到 maven 中央仓库，因此，如果你使用 maven 的话，只需要在 `pom.xml` 文件里面添加一个依赖： 
 

themes/doc/lib/browser/navigation/components.jsx

@@ -29,15 +29,20 @@ class Sidebar extends React.Component {
 
   componentDidUpdate() {
     if (this.props.visibleHeaderId) {
-      setTimeout(function () {
-        const $sidebar = $('.doc-sidebar');
-        const $firstItem = $($('.doc-sidebar-list').children('li').get(0));
-        const $currentItem = $('.doc-sidebar-list__item--current');
+      if ($(window).width() > 800) {
+        setTimeout(function () {
+          const $sidebar = $('.doc-sidebar');
+          const $firstItem = $($('.doc-sidebar-list').children('.doc-sidebar-list__item--link').get(0));
+          const $currentItem = $('.doc-sidebar-list__item--current');
 
-        if ($currentItem.length > 0) {
-          $sidebar.animate({scrollTop: $currentItem.position().top - $firstItem.position().top}, 800);
-        }
-      }, 100);
+          if ($currentItem.length > 0) {
+            const offset = $currentItem.position().top - $firstItem.position().top;
+            if (offset > 100) {
+              $sidebar.animate({ scrollTop: offset }, 800);
+            }
+          }
+        }, 100);
+      }
     }
   }
 

themes/doc/lib/browser/navigation/containers.jsx

@@ -177,7 +177,7 @@ class Navigation extends React.Component {
   }
 
   onContentClick () {
-    if ( this.$body.hasClass(SIDEBAR_IS_VISIBLE_CLASS) ) {
+    if (this.$body.hasClass(SIDEBAR_IS_VISIBLE_CLASS)) {
       this.toggleSidebar();
     }
   }
@@ -192,7 +192,7 @@ class Navigation extends React.Component {
 
   uncollapseSidebar () {
     this.$body.removeClass(NAVIGATION_IS_COLLAPSED_CLASS);
-    this.$searchFormInput().focus();
+    this.$searchFormInput()[0].focus();
 
     if (window.localStorage) {
       window.localStorage.setItem('navigation_collapsed', 'false');
@@ -201,6 +201,10 @@ class Navigation extends React.Component {
 
   toggleSidebar () {
     this.$body.toggleClass(SIDEBAR_IS_VISIBLE_CLASS);
+
+    if (this.$body.hasClass(SIDEBAR_IS_VISIBLE_CLASS)) {
+      this.$searchFormInput()[0].focus();
+    }
   }
 
   hideSidebar () {

themes/doc/lib/browser/support/components.jsx

@@ -1,19 +1,23 @@
 const React = require('react');
 
 module.exports.SupportFooter = function ({page, data, url_for}) {
-  var navigation = null;
+  let navigation;
   if (page.lang === 'zh-cn') {
     navigation = data['navigation-zh-cn'].main.filter((item) => item.type === 'link');
   } else {
     navigation = data['navigation-en'].main.filter((item) => item.type === 'link');
   }
 
   function renderLinks() {
-    var links = [];
-    var currentIndex = navigation.map((item) => item.path).indexOf(page.path.replace('index.html', ''));
+    const links = [];
+    const currentIndex = navigation.findIndex((item) => {
+      const itemPath = (item.path || '').replace(/index\.html$/, '').replace(/\/$/, '');
+      const pagePath = (page.path || '').replace(/index\.html$/, '').replace(/\/$/, '');
+      return itemPath === pagePath;
+    });
 
     if (currentIndex !== -1 && currentIndex !== 0) {
-      var previous = navigation[currentIndex - 1];
+      const previous = navigation[currentIndex - 1];
       links.push(
         <div className="doc-footer-link" key={previous.path}>
           {page.lang === 'zh-cn' ? '上一篇：' : 'Prev Article: '}
@@ -25,7 +29,7 @@ module.exports.SupportFooter = function ({page, data, url_for}) {
     }
 
     if (currentIndex !== -1 && currentIndex !== navigation.length - 1) {
-      var next = navigation[currentIndex + 1];
+      const next = navigation[currentIndex + 1];
       links.push(
         <div className="doc-footer-link" key={next.path}>
           {page.lang === 'zh-cn' ? '下一篇：' : 'Next Article: '}
@@ -50,7 +54,7 @@ module.exports.SupportFooter = function ({page, data, url_for}) {
     return (
       <div className="doc-support-footer">
         {renderLinks()}
-        Any questions about the document? Try searching again on the left menu or <a href="https://github.com/kotlin-orm/ktorm/issues/new">Raise an issue on Github</a>
+        Any questions about the document? Try searching again on the left menu or <a href="https://github.com/kotlin-orm/ktorm/issues/new">raise an issue on GitHub</a>
       </div>
     );
   }

themes/doc/source/style/_doc/navigation.scss

@@ -25,16 +25,6 @@
     width: $doc-sidebar-width;
   }
 
-  .doc-search-form {
-    margin-top: 0.7rem;
-    margin-bottom: 0rem;
-    margin-left: auto;
-
-    @media screen and (min-width: $doc-breakpoint) {
-      display: none
-    }
-  }
-
   &__logo {
     flex-grow: 1;
     display: flex;
@@ -84,7 +74,7 @@
 
   &__sidebar-toggle {
     line-height: $doc-navbar-height;
-    font-size:2rem;
+    font-size: 2rem;
     height: 100%;
     display: inline-block;
     vertical-align: middle;
@@ -178,18 +168,31 @@
   }
 
   &__search-form {
-    height: 36px;
-    width: 100%;
-    margin: 24px 0 0 22px;
+    width: $doc-sidebar-width;
+    background-color: white;
 
-    @media screen and (max-width: $doc-breakpoint) {
-      display: none;
+    @media screen and (min-width: $doc-breakpoint) {
+      position: fixed;
+      left: 0;
+      top: 50px;
+      z-index: 3;
+    }
+
+    .doc-search-form {
+      margin: 15px 22px;
+      width: 236px;
+      height: 36px;
     }
   }
 }
 
 .doc-sidebar-list {
   padding-left: 0px;
+  margin-top: -10px;
+
+  @media screen and (min-width: $doc-breakpoint) {
+    margin-top: 66px;
+  }
 
   &__item {
     margin-left: 34px;

themes/doc/source/style/_doc/search.scss

@@ -1,5 +1,5 @@
 .doc-search-form {
-  width: 236px;
+  max-width: 236px;
 
   &__input[type="search"] {
     width: 100%;