From c903a064bb9e7f8d168df30c5caa9e7a02aa99e8 Mon Sep 17 00:00:00 2001
From: captainill <jonthomas0@gmail.com>
Date: Sat, 14 Nov 2015 14:41:17 -0800
Subject: [PATCH] rename sidebar to mobile nav to avoid conflict

---
 website/www/source/javascripts/Sidebar.js     |   8 +-
 website/www/source/layouts/_mobile_nav.erb    |  22 ++--
 website/www/source/stylesheets/_header.less   |   4 +-
 .../_hashicorp-mobile-nav.less                | 112 +++++++++---------
 4 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/website/www/source/javascripts/Sidebar.js b/website/www/source/javascripts/Sidebar.js
index b36e508c4..94f2cbdb6 100644
--- a/website/www/source/javascripts/Sidebar.js
+++ b/website/www/source/javascripts/Sidebar.js
@@ -11,9 +11,9 @@
 
     constructor: function(){
       this.$body = $('body');
-      this.$overlay = $('.sidebar-overlay');
-      this.$sidebar = $('#sidebar');
-      this.$sidebarHeader = $('#sidebar .sidebar-header');
+      this.$overlay = $('.mobile-nav-overlay');
+      this.$sidebar = $('#mobile-nav');
+      this.$sidebarHeader = $('#mobile-nav .mobile-nav-header');
       this.$toggleButton = $('.navbar-toggle');
       this.sidebarImg = this.$sidebarHeader.css('background-image');
 
@@ -25,7 +25,7 @@
 
       _this.$toggleButton.on('click', function() {
         _this.$sidebar.toggleClass('open');
-        if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) {
+        if ((_this.$sidebar.hasClass('mobile-nav-fixed-left') || _this.$sidebar.hasClass('mobile-nav-fixed-right')) && _this.$sidebar.hasClass('open')) {
           _this.$overlay.addClass('active');
           _this.$body.css('overflow', 'hidden');
         } else {
diff --git a/website/www/source/layouts/_mobile_nav.erb b/website/www/source/layouts/_mobile_nav.erb
index 142b6880f..728260b9c 100644
--- a/website/www/source/layouts/_mobile_nav.erb
+++ b/website/www/source/layouts/_mobile_nav.erb
@@ -1,18 +1,18 @@
-<!-- Overlay for fixed sidebar -->
-<div class="sidebar-overlay"></div>
+<!-- Overlay for fixed mobile-nav -->
+<div class="mobile-nav-overlay"></div>
 
-<!-- Material sidebar -->
-<aside id="sidebar" class="sidebar sidebar-default sidebar-fixed-right" role="navigation">
-    <!-- Sidebar header -->
-    <div class="sidebar-header header-cover">
-        <!-- Sidebar brand image -->
-        <div class="sidebar-image">
-            <a class="sidebar-logo" href="/">Vagrant</a>
+<!-- Material mobile-nav -->
+<aside id="mobile-nav" class="mobile-nav mobile-nav-default mobile-nav-fixed-right" role="navigation">
+    <!-- mobile-nav header -->
+    <div class="mobile-nav-header header-cover">
+        <!-- mobile-nav brand image -->
+        <div class="mobile-nav-image">
+            <a class="mobile-nav-logo" href="/">Vagrant</a>
         </div>
     </div>
 
-    <!-- Sidebar navigation -->
-    <ul class="main nav sidebar-nav">
+    <!-- mobile-nav navigation -->
+    <ul class="main nav mobile-nav-nav">
       <li class="pill"><a href="/vmware">VMware Integration</a></li>
       <li><a href="/downloads.html">Downloads</a></li>
       <li><a href="https://docs.vagrantup.com/">Documentation</a></li>
diff --git a/website/www/source/stylesheets/_header.less b/website/www/source/stylesheets/_header.less
index e67f19c97..82f0321f4 100644
--- a/website/www/source/stylesheets/_header.less
+++ b/website/www/source/stylesheets/_header.less
@@ -13,7 +13,7 @@
   top: 0;
   left: 0;
   background-color: @white;
-  z-index: 9999999999;
+  z-index: 1001;
 
   &.docs {
       background: @gray-background;
@@ -130,7 +130,7 @@
     .navbar-toggle{
       padding-top: 0;
     }
-    
+
     .navbar-brand {
       .logo{
         width: @project-logo-width * .75;
diff --git a/website/www/source/stylesheets/hashicorp-shared/_hashicorp-mobile-nav.less b/website/www/source/stylesheets/hashicorp-shared/_hashicorp-mobile-nav.less
index 39be1c2ee..a24e03608 100644
--- a/website/www/source/stylesheets/hashicorp-shared/_hashicorp-mobile-nav.less
+++ b/website/www/source/stylesheets/hashicorp-shared/_hashicorp-mobile-nav.less
@@ -1,5 +1,5 @@
 //
-// Hashicorp Sidebar
+// Hashicorp mobile-nav
 // - Shared throughout projects
 // - Edits should not be made here
 // --------------------------------------------------
@@ -22,22 +22,22 @@
 @link-disabled-color:       @gray-light;
 @link-disabled-bg:          transparent;
 
-/* -- Sidebar style ------------------------------- */
+/* -- mobile-nav style ------------------------------- */
 
-// Sidebar variables
+// mobile-nav variables
 // --------------------------------------------------
-@zindex-sidebar-fixed: 1035;
+@zindex-mobile-nav-fixed: 1035;
 
-@sidebar-desktop-width: 280px;
-@sidebar-width: 240px;
+@mobile-nav-desktop-width: 280px;
+@mobile-nav-width: 240px;
 
-@sidebar-padding: 16px;
-@sidebar-divider: @sidebar-padding/2;
+@mobile-nav-padding: 16px;
+@mobile-nav-divider: @mobile-nav-padding/2;
 
-@sidebar-icon-width: 40px;
-@sidebar-icon-height: 20px;
+@mobile-nav-icon-width: 40px;
+@mobile-nav-icon-height: 20px;
 
-.sidebar-nav-base {
+.mobile-nav-nav-base {
   text-align: center;
 
   &:last-child{
@@ -105,13 +105,13 @@
 }
 
 //
-// Sidebar
+// mobile-nav
 // --------------------------------------------------
 
-// Sidebar Elements
+// mobile-nav Elements
 //
-// Basic style of sidebar elements
-.sidebar {
+// Basic style of mobile-nav elements
+.mobile-nav {
   position: relative;
   display: block;
   min-height: 100%;
@@ -127,22 +127,22 @@
     list-style-type: none;
   }
 
-  .sidebar-divider, .divider {
+  .mobile-nav-divider, .divider {
     width: 80%;
     height: 1px;
     margin: 8px auto;
     background-color: lighten(@gray, 20%);
   }
 
-  // Sidebar heading
+  // mobile-nav heading
   //----------------
-  .sidebar-header {
+  .mobile-nav-header {
     position: relative;
-    margin-bottom: @sidebar-padding;
+    margin-bottom: @mobile-nav-padding;
     .transition(all .2s ease-in-out);
   }
 
-  .sidebar-image {
+  .mobile-nav-image {
     padding-top: 24px;
     img {
       display: block;
@@ -151,14 +151,14 @@
   }
 
 
-  // Sidebar icons
+  // mobile-nav icons
   //----------------
-  .sidebar-icon {
+  .mobile-nav-icon {
     display: inline-block;
-    height: @sidebar-icon-height;
-    margin-right: @sidebar-divider;
+    height: @mobile-nav-icon-height;
+    margin-right: @mobile-nav-divider;
     text-align: left;
-    font-size: @sidebar-icon-height;
+    font-size: @mobile-nav-icon-height;
     vertical-align: middle;
 
     &:before, &:after {
@@ -166,11 +166,11 @@
     }
   }
 
-  .sidebar-nav {
+  .mobile-nav-nav {
     margin: 0;
     padding: 0;
 
-    .sidebar-nav-base();
+    .mobile-nav-nav-base();
 
     // Links
     //----------------
@@ -197,73 +197,73 @@
   }
 }
 
-// Sidebar toggling
+// mobile-nav toggling
 //
-// Hide sidebar
-.sidebar {
+// Hide mobile-nav
+.mobile-nav {
   width: 0;
-  .translate3d(-@sidebar-desktop-width, 0, 0);
+  .translate3d(-@mobile-nav-desktop-width, 0, 0);
 
   &.open {
-    min-width: @sidebar-desktop-width;
-    width: @sidebar-desktop-width;
+    min-width: @mobile-nav-desktop-width;
+    width: @mobile-nav-desktop-width;
     .translate3d(0, 0, 0);
   }
 }
 
-// Sidebar positions: fix the left/right sidebars
-.sidebar-fixed-left,
-.sidebar-fixed-right,
-.sidebar-stacked {
+// mobile-nav positions: fix the left/right mobile-navs
+.mobile-nav-fixed-left,
+.mobile-nav-fixed-right,
+.mobile-nav-stacked {
   position: fixed;
   top: 0;
   bottom: 0;
-  z-index: @zindex-sidebar-fixed;
+  z-index: @zindex-mobile-nav-fixed;
 }
-.sidebar-stacked {
+.mobile-nav-stacked {
   left: 0;
 }
-.sidebar-fixed-left {
+.mobile-nav-fixed-left {
   left: 0;
   box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
   -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
 }
-.sidebar-fixed-right {
+.mobile-nav-fixed-right {
   right: 0;
   box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
   -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
 
-  .translate3d(@sidebar-desktop-width, 0, 0);
+  .translate3d(@mobile-nav-desktop-width, 0, 0);
   &.open {
     .translate3d(0, 0, 0);
   }
-  .icon-material-sidebar-arrow:before {
+  .icon-material-mobile-nav-arrow:before {
     content: "\e614"; // icon-material-arrow-forward
   }
 }
 
-// Sidebar size
+// mobile-nav size
 //
-// Change size of sidebar and sidebar elements on small screens
+// Change size of mobile-nav and mobile-nav elements on small screens
 @media (max-width: @screen-tablet) {
-  .sidebar.open {
-    min-width: @sidebar-width;
-    width: @sidebar-width;
+  .mobile-nav.open {
+    min-width: @mobile-nav-width;
+    width: @mobile-nav-width;
   }
 
-  .sidebar .sidebar-header {
-    //height: @sidebar-width * 9/16; // 16:9 header dimension
+  .mobile-nav .mobile-nav-header {
+    //height: @mobile-nav-width * 9/16; // 16:9 header dimension
   }
 
-  .sidebar .sidebar-image {
+  .mobile-nav .mobile-nav-image {
     /* img {
-    width: @sidebar-width/4 - @sidebar-padding;
-    height: @sidebar-width/4 - @sidebar-padding;
+    width: @mobile-nav-width/4 - @mobile-nav-padding;
+    height: @mobile-nav-width/4 - @mobile-nav-padding;
   } */
   }
 }
 
-.sidebar-overlay {
+.mobile-nav-overlay {
   visibility: hidden;
   position: fixed;
   top: 0;
@@ -272,7 +272,7 @@
   bottom: 0;
   opacity: 0;
   background: @white;
-  z-index: @zindex-sidebar-fixed - 1;
+  z-index: @zindex-mobile-nav-fixed - 1;
 
   -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
   -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
@@ -284,7 +284,7 @@
   transform: translateZ(0);
 }
 
-.sidebar-overlay.active {
+.mobile-nav-overlay.active {
   opacity: 0.3;
   visibility: visible;
   -webkit-transition-delay: 0;