[Misc]Improve navigation on mobile devices (#639)

- Make the sidebar useable again
- Add the search field back and move it to the top
- Move the category navigation tree from the content area to the
  sidebar, preserving the hierarchy

These changes have no effect outside mobile mode (width <= 992px).

Fixes #487.

Signed-off-by: Yannick Schaus <habpanel@schaus.net>

_includes/header.html

@@ -53,17 +53,18 @@
             </li>
           </ul>
           <ul id="nav-mobile" class="side-nav">
-            <li><a href="{{base}}/index.html">Home</a></li>
-            <li><a href="{{root}}/tutorials/index.html">Tutorials</a></li>
-            <li><a href="{{base}}/introduction.html">User Manual</a></li>
-            <li><a href="{{root}}/developers/index.html">Developer Guide</a></li>
-            <li><a target="_blank" href="https://community.openhab.org">Community Forum</a></li>
-            <li><a target="_blank" href="https://github.com/openhab">GitHub</a></li>
             <li class="search">
+              <i class="material-icons">search</i>
               <form method="GET" id="searchformmob" class="search-form" action="/search">
                 <input id="querymob" name="q" type="text" class="search-form-input" placeholder="search" />
               </form>
             </li>
+            <li><a href="{{base}}/index.html">Home</a></li>
+            <li><a href="{{root}}/tutorials/index.html">Tutorials</a><div id="side-nav-mobile-tutorials" class="side-nav-mobile"></div></li>
+            <li><a href="{{base}}/introduction.html">User Manual</a><div id="side-nav-mobile-user" class="side-nav-mobile"></div></li>
+            <li><a href="{{root}}/developers/index.html">Developer Guide</a><div id="side-nav-mobile-developer" class="side-nav-mobile"></div></li>
+            <li><a target="_blank" href="https://community.openhab.org">Community Forum</a></li>
+            <li><a target="_blank" href="https://github.com/openhab">GitHub</a></li>
           </ul>
         </div>
       </div>

css/openhab.css

@@ -112,6 +112,8 @@ input.gsc-input {
 
 #querymob {
   color: #000;
+  padding-left: 40px !important;
+  width: 260px;
 }
 
 /* Address (on imprint page) */
@@ -133,3 +135,153 @@ footer .list-inline > li {
   padding-right: 5px;
   padding-left: 5px;
 }
+
+/* Overrides for mobile mode */
+
+#sidenav-overlay {
+  z-index: 995;
+}
+
+#nav-mobile {
+  top: 64px;
+  padding-bottom: 150px;
+}
+
+#nav-mobile .search .material-icons {
+  color: #aaa;
+  position: absolute;
+  left: 10px;
+  line-height: 50px;
+}
+
+#nav-mobile .search-form ::-webkit-input-placeholder {
+  color: #aaa;
+}
+
+#nav-mobile .search-form ::-moz-placeholder {
+  color: #aaa;
+}
+
+#nav-mobile .search-form ::-ms-input-placeholder{
+  color: #aaa;
+}
+
+@media only screen and (max-width: 992px) {
+
+  body.documentation section.text .side-nav-wrapper {
+      display: none;
+  }
+
+  /* Mobile mode side Nav */
+
+  /* All Menu Links */
+  .side-nav-mobile ul.nav {
+    margin-bottom: 20px;
+  }
+
+  .side-nav-mobile li.active {
+    background: none;
+  }
+
+  .side-nav-mobile ul.nav > li {
+    color: black;
+    font-size: 80%;
+  }
+
+  .side-nav-mobile ul.nav > ul {
+    padding: 0 !important;
+  }
+
+  .side-nav-mobile ul.nav a {
+    padding: 5px 10px;
+    font-size: 1rem;
+    line-height: 24px;
+    height: 36px;
+    display: block;
+    color: #01324D;
+    text-align: left;
+    font-weight: 300;
+  }
+
+  .side-nav-mobile ul.nav ul {
+    height: auto !important;
+  }
+
+  /* First Level Menu Links Hover */
+  .side-nav-mobile ul.nav > li > a:hover {
+    background: #EEE;
+  }
+
+  /* First Level Menu Links */
+  .side-nav-mobile ul.nav li a:after {
+    font-family: "Material Icons";
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    content: "";
+    position: absolute;
+    right: 10px;
+  }
+
+  /* First level menu with sub nav */
+  .side-nav-mobile ul.nav li a.has-submenu:after {
+    content: "keyboard_arrow_down";
+  }
+
+  /* Active first level menu link */
+  .side-nav-mobile ul.nav li.active > a {
+    color: #039be5;
+    background: #EEE;
+  }
+
+  .side-nav-mobile ul.nav li.active a:after {
+
+  }
+
+  /* First level menu with sub nav opened */
+  .side-nav-mobile ul.nav li.active.open a:after {
+    content: "keyboard_arrow_up";
+  }
+
+  .side-nav-mobile ul.nav li.active ul li a:hover {
+    background: none;
+  }
+
+
+  .side-nav-mobile ul.nav li.active.open ul li a:after {
+    content: none;
+    display: none;
+  }
+
+  /* Second level menu with sub nav */
+  .side-nav-mobile ul.nav li.active.open ul li a.has-submenu:after {
+    content: "keyboard_arrow_down";
+    display: inline;
+  }
+
+  /* Second level menu with sub nav opened */
+  .side-nav-mobile ul.nav li.active.open ul li.open a.has-submenu:after {
+    content: "keyboard_arrow_up";
+  }
+
+  /* Active second level menu link */
+  .side-nav-mobile ul.nav li.active ul li.active a {
+    background: none;
+  }
+
+  .side-nav-mobile ul.nav ul {
+  display: none;
+    margin: 0px;
+    padding: 0px 0px 0px 20px;
+    background-color: #F6F6F6;
+  }
+
+  .side-nav-mobile ul.nav hr, .side-nav-mobile div.content hr {
+    border: 1px solid #CCC;
+    margin: 6px 2px 4px 2px;
+  }
+}

js/init.js

@@ -77,6 +77,9 @@ function initSideNav() {
         }
     });
 
+    var sideNavMobileSection = (linkUrl.indexOf('/developer') == 0) ? 'developer' : (linkUrl.indexOf('/tutorials') == 0) ? 'tutorials' : 'user';
+    $('section ul.nav').clone().appendTo('#side-nav-mobile-' + sideNavMobileSection);
+
     // Sticky SideNav
     if (!window.onLandingPage) {
         var isSmall = $(window).width() <= 600;