turn docs navbar into left navbar

docs/_includes/navbar.html

@@ -1,32 +1,32 @@
 <!-- Navbar
 ================================================== -->
-<div class="navbar navbar-fixed-top bs-docs-navbar">
+<div class="navbar navbar-inverse navbar-fixed-left bs-docs-navbar">
   <div class="container">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
-    <a class="navbar-brand" href="/">Bootstrap</a>
+    <a class="navbar-brand" href="/">B</a>
     <div class="nav-collapse collapse">
       <ul class="nav">
-        <li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
+<!--         <li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
-          <a href="/">Home</a>
+          <a href="/"><span class="glyphicon glyphicon-home"></span></a>
         </li>
-        <li {% if page.title == "Getting started" %}class="active"{% endif %}>
+ -->        <li {% if page.title == "Getting started" %}class="active"{% endif %}>
-          <a href="/getting-started">Getting started</a>
+          <a href="/getting-started" data-toggle="tooltip" data-placement="right" title="Getting started"><span class="glyphicon glyphicon-list"></span></a>
         </li>
         <li {% if page.title == "CSS" %}class="active"{% endif %}>
-          <a href="/css">CSS</a>
+          <a href="/css" data-toggle="tooltip" data-placement="right" title="CSS"><span class="glyphicon glyphicon-tint"></span></a>
         </li>
         <li {% if page.title == "Components" %}class="active"{% endif %}>
-          <a href="/components">Components</a>
+          <a href="/components" data-toggle="tooltip" data-placement="right" title="Components"><span class="glyphicon glyphicon-fire"></span></a>
         </li>
         <li {% if page.title == "JavaScript plugins" %}class="active"{% endif %}>
-          <a href="/javascript">JavaScript</a>
+          <a href="/javascript" data-toggle="tooltip" data-placement="right" title="JavaScript plugins"><span class="glyphicon glyphicon-dashboard"></span></a>
         </li>
         <li {% if page.title == "Customize and download" %}class="active"{% endif %}>
-          <a href="/customize">Customize</a>
+          <a href="/customize" data-toggle="tooltip" data-placement="right" title="Customize"><span class="glyphicon glyphicon-cog"></span></a>
         </li>
       </ul>
     </div>

docs/assets/css/bootstrap.css

@@ -3255,6 +3255,7 @@ button.close {
 }
 
 .navbar-fixed-top,
+.navbar-fixed-left,
 .navbar-fixed-bottom {
   position: fixed;
   right: 0;
@@ -3271,6 +3272,16 @@ button.close {
   bottom: 0;
 }
 
+.navbar-fixed-left {
+  top: 0;
+  right: auto;
+  bottom: 0;
+}
+
+.navbar-fixed-left .container {
+  max-width: none;
+}
+
 .navbar-brand {
   display: block;
   max-width: 200px;
@@ -3496,6 +3507,15 @@ button.close {
   .navbar-inverse .nav > .divider {
     border-right-color: #2f2f2f;
   }
+  .navbar-fixed-left {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .navbar-fixed-left .navbar-brand,
+  .navbar-fixed-left .nav,
+  .navbar-fixed-left .nav > li {
+    float: none;
+  }
   .navbar-toggle {
     position: relative;
     top: auto;

docs/assets/css/docs.css

@@ -49,9 +49,9 @@ section > ul li {
 /* Navbar
 -------------------------------------------------- */
 
-.bs-docs-navbar {
+/*.bs-docs-navbar {
   background-color: #fff;
-  border-bottom: 1px solid #ccc; /* IE8 */
+  border-bottom: 1px solid #ccc;
   border-bottom: 1px solid rgba(0,0,0,.1);
 }
 .bs-docs-navbar .nav > .active > a,
@@ -59,7 +59,30 @@ section > ul li {
   font-weight: 500;
   background-color: transparent;
 }
+*/
 
+.bs-docs-navbar .navbar-brand {
+  padding: 15px;
+  font-size: 32px;
+  margin-left: 0;
+}
+.bs-docs-navbar .nav {
+  border-top: 1px solid #111;
+  border-bottom: 1px solid #333;
+}
+.bs-docs-navbar .nav > li > a {
+  width: 60px;
+  text-align: center;
+  border-top: 1px solid #333;
+  border-bottom: 1px solid #111;
+}
+.bs-docs-navbar .glyphicon {
+  display: block;
+  font-size: 20px;
+}
+.bs-docs-navbar .nav .tooltip {
+  white-space: nowrap;
+}
 
 
 /* Jumbotrons
@@ -181,7 +204,7 @@ section > ul li {
 
 /* Base styles are not affixable given mobile-first */
 .bs-docs-sidenav {
-  margin: 20px 0 0;
+  margin: 0;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
@@ -613,7 +636,9 @@ input.focused {
 
   /* Account for fixed navbar (which is static to start) */
   body {
-    padding-top: 50px; /* Default height of navbar */
+    /*padding-top: 50px;*/ /* Default height of navbar */
+    padding-top: 0;
+    padding-left: 60px;
   }
 
   /* Undo custom padding */
@@ -644,7 +669,7 @@ input.focused {
   /* From here, start to affix the nav because we keep columns here */
   .bs-docs-sidenav.affix {
     position: fixed;
-    top: 54px;
+    top: 20px;
   }
   .bs-docs-sidenav {
     width: 170px;

docs/assets/js/application.js

@@ -49,6 +49,11 @@
     $('.tooltip-test').tooltip()
     $('.popover-test').popover()
 
+    $('.bs-docs-navbar').tooltip({
+      selector: "a[data-toggle=tooltip]",
+      container: ".bs-docs-navbar .nav"
+    })
+
     // popover demo
     $("a[data-toggle=popover]")
       .popover()

less/navbar.less

@@ -58,6 +58,7 @@
 
 // Fix the top/bottom navbars when screen real estate supports it
 .navbar-fixed-top,
+.navbar-fixed-left,
 .navbar-fixed-bottom {
   position: fixed;
   right: 0;
@@ -68,6 +69,16 @@
 .navbar-fixed-top    { top: 0; }
 .navbar-fixed-bottom { bottom: 0; }
 
+// Fixed left
+.navbar-fixed-left {
+  top: 0;
+  right: auto;
+  bottom: 0;
+}
+.navbar-fixed-left .container {
+  max-width: none;
+}
+
 
 
 //
@@ -307,6 +318,16 @@
     border-right-color: lighten(@navbar-inverse-bg, 5%);
   }
 
+  .navbar-fixed-left {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .navbar-fixed-left .navbar-brand,
+  .navbar-fixed-left .nav,
+  .navbar-fixed-left .nav > li {
+    float: none;
+  }
+
   // Required to make the collapsing navbar work on regular desktops
   .navbar-toggle {
     position: relative;