sidebar

website/config.ru

@@ -23,7 +23,7 @@ use Rack::Deflater
 # to do.
 use Rack::StaticCache,
   :root => "build",
-  :urls => ["/assets"],
+  :urls => ["/assets", "/javascripts"],
   :duration => 2,
   :versioning => false
 

website/source/assets/javascripts/app/Init.js

@@ -0,0 +1,36 @@
+(function(){
+
+// Quick and dirty IE detection
+var isIE = (function(){
+	if (window.navigator.userAgent.match('Trident')) {
+		return true;
+	} else {
+		return false;
+	}
+})();
+
+// isIE = true;
+
+var Init = {
+
+	start: function(){
+		var id = document.body.id.toLowerCase();
+
+		if (this.Pages[id]) {
+			this.Pages[id]();
+		}
+		//always init sidebar
+		Init.initializeSidebar();
+	},
+
+	initializeSidebar: function(){
+		new Sidebar();
+	},
+
+	Pages: {}
+
+};
+
+Init.start();
+
+})();

website/source/assets/javascripts/app/Sidebar.js

@@ -0,0 +1,50 @@
+(function(){
+
+  Sidebar = Base.extend({
+
+    $body: null,
+    $overlay: null,
+    $sidebar: null,
+    $sidebarHeader: null,
+    $sidebarImg: null,
+    $toggleButton: null,
+
+    constructor: function(){
+      this.$body = $('body');
+      this.$overlay = $('.sidebar-overlay');
+      this.$sidebar = $('#sidebar');
+      this.$sidebarHeader = $('#sidebar .sidebar-header');
+      this.$toggleButton = $('.navbar-toggle');
+      this.sidebarImg = this.$sidebarHeader.css('background-image');
+
+      this.addEventListeners();
+    },
+
+    addEventListeners: function(){
+      var _this = this;
+
+      _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')) {
+          _this.$overlay.addClass('active');
+          _this.$body.css('overflow', 'hidden');
+        } else {
+          _this.$overlay.removeClass('active');
+          _this.$body.css('overflow', 'auto');
+        }
+
+        return false;
+      });
+
+      _this.$overlay.on('click', function() {
+        $(this).removeClass('active');
+        _this.$body.css('overflow', 'auto');
+        _this.$sidebar.removeClass('open');
+      });
+    }
+
+  });
+
+  window.Sidebar = Sidebar;
+
+})();

website/source/assets/javascripts/application.js

@@ -0,0 +1,7 @@
+//= require jquery
+
+//= require lib/Base
+
+//= require docs
+//= require app/Sidebar
+////= require app/Init

website/source/assets/javascripts/docs.js

@@ -0,0 +1,46 @@
+(function(){
+
+var Init = {
+
+  start: function(){
+    var classname = this.hasClass(document.body, 'page-sub');
+
+    if (classname) {
+      this.addEventListeners();
+    }
+  },
+
+  hasClass: function (elem, className) {
+    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
+  },
+
+  addEventListeners: function(){
+    var _this = this;
+    //console.log(document.querySelectorAll('.navbar-static-top')[0]);
+    window.addEventListener('resize', _this.resizeImage, false);
+
+    this.resizeImage();
+  },
+
+  resizeImage: function(){
+
+    var header = document.getElementById('header'),
+        footer = document.getElementById('footer'),
+        main = document.getElementById('main-content'),
+        vp = window.innerHeight,
+        bodyHeight = document.body.clientHeight,
+        hHeight = header.clientHeight,
+        fHeight = footer.clientHeight,
+        withMinHeight = hHeight + fHeight + 830;
+
+    if(withMinHeight <  vp &&  bodyHeight < vp){
+      var newHeight = (vp - (hHeight+fHeight)) + 'px';
+      main.style.height = newHeight;
+    }
+  }
+
+};
+
+Init.start();
+
+})();

website/source/assets/javascripts/lib/Base.js

@@ -0,0 +1,145 @@
+/*
+  Based on Base.js 1.1a (c) 2006-2010, Dean Edwards
+  Updated to pass JSHint and converted into a module by Kenneth Powers
+  License: http://www.opensource.org/licenses/mit-license.php
+*/
+/*global define:true module:true*/
+/*jshint eqeqeq:true*/
+(function (name, global, definition) {
+  if (typeof module !== 'undefined') {
+    module.exports = definition();
+  } else if (typeof define !== 'undefined' && typeof define.amd === 'object') {
+    define(definition);
+  } else {
+    global[name] = definition();
+  }
+})('Base', this, function () {
+  // Base Object
+  var Base = function () {};
+
+  // Implementation
+  Base.extend = function (_instance, _static) { // subclass
+    var extend = Base.prototype.extend;
+    // build the prototype
+    Base._prototyping = true;
+    var proto = new this();
+    extend.call(proto, _instance);
+    proto.base = function () {
+      // call this method from any other method to invoke that method's ancestor
+    };
+    delete Base._prototyping;
+    // create the wrapper for the constructor function
+    //var constructor = proto.constructor.valueOf(); //-dean
+    var constructor = proto.constructor;
+    var klass = proto.constructor = function () {
+        if (!Base._prototyping) {
+          if (this._constructing || this.constructor === klass) { // instantiation
+            this._constructing = true;
+            constructor.apply(this, arguments);
+            delete this._constructing;
+          } else if (arguments[0] !== null) { // casting
+            return (arguments[0].extend || extend).call(arguments[0], proto);
+          }
+        }
+      };
+    // build the class interface
+    klass.ancestor = this;
+    klass.extend = this.extend;
+    klass.forEach = this.forEach;
+    klass.implement = this.implement;
+    klass.prototype = proto;
+    klass.toString = this.toString;
+    klass.valueOf = function (type) {
+      return (type === 'object') ? klass : constructor.valueOf();
+    };
+    extend.call(klass, _static);
+    // class initialization
+    if (typeof klass.init === 'function') klass.init();
+    return klass;
+  };
+
+  Base.prototype = {
+    extend: function (source, value) {
+      if (arguments.length > 1) { // extending with a name/value pair
+        var ancestor = this[source];
+        if (ancestor && (typeof value === 'function') && // overriding a method?
+        // the valueOf() comparison is to avoid circular references
+        (!ancestor.valueOf || ancestor.valueOf() !== value.valueOf()) && /\bbase\b/.test(value)) {
+          // get the underlying method
+          var method = value.valueOf();
+          // override
+          value = function () {
+            var previous = this.base || Base.prototype.base;
+            this.base = ancestor;
+            var returnValue = method.apply(this, arguments);
+            this.base = previous;
+            return returnValue;
+          };
+          // point to the underlying method
+          value.valueOf = function (type) {
+            return (type === 'object') ? value : method;
+          };
+          value.toString = Base.toString;
+        }
+        this[source] = value;
+      } else if (source) { // extending with an object literal
+        var extend = Base.prototype.extend;
+        // if this object has a customized extend method then use it
+        if (!Base._prototyping && typeof this !== 'function') {
+          extend = this.extend || extend;
+        }
+        var proto = {
+          toSource: null
+        };
+        // do the "toString" and other methods manually
+        var hidden = ['constructor', 'toString', 'valueOf'];
+        // if we are prototyping then include the constructor
+        for (var i = Base._prototyping ? 0 : 1; i < hidden.length; i++) {
+          var h = hidden[i];
+          if (source[h] !== proto[h])
+            extend.call(this, h, source[h]);
+        }
+        // copy each of the source object's properties to this object
+        for (var key in source) {
+          if (!proto[key]) extend.call(this, key, source[key]);
+        }
+      }
+      return this;
+    }
+  };
+
+  // initialize
+  Base = Base.extend({
+    constructor: function () {
+      this.extend(arguments[0]);
+    }
+  }, {
+    ancestor: Object,
+    version: '1.1',
+    forEach: function (object, block, context) {
+      for (var key in object) {
+        if (this.prototype[key] === undefined) {
+          block.call(context, object[key], key, object);
+        }
+      }
+    },
+    implement: function () {
+      for (var i = 0; i < arguments.length; i++) {
+        if (typeof arguments[i] === 'function') {
+          // if it's a function, call it
+          arguments[i](this.prototype);
+        } else {
+          // add the interface using the extend method
+          this.prototype.extend(arguments[i]);
+        }
+      }
+      return this;
+    },
+    toString: function () {
+      return String(this.valueOf());
+    }
+  });
+
+  // Return Base implementation
+  return Base;
+});

website/source/assets/stylesheets/_columns.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex: 1;
 
-  #sidebar,
+  #sidebar-docs,
   .docs-body{
     flex: 1;
   }
@@ -10,7 +10,7 @@
 
 @media (max-width: 992px) {
   #main-content{
-    #sidebar{
+    #sidebar-docs{
       max-width: 280px;
     }
   }
@@ -20,13 +20,13 @@
   #main-content{
     flex-direction: column;
 
-    #sidebar,
+    #sidebar-docs,
     .docs-body{
       width: 100%;
       max-width: none;
     }
 
-    #sidebar{
+    #sidebar-docs{
       li {
         &:last-child{
           border-bottom: none;

website/source/assets/stylesheets/_footer.scss

@@ -26,6 +26,16 @@
   }
 }
 
+body{
+  &.page-Community{
+    .edit-page-link{
+      position: absolute;
+      top: -70px;
+      right: 30px;
+    }
+  }
+}
+
 .edit-page-link{
   position: absolute;
   top: -150px;

website/source/assets/stylesheets/_sidebar.scss

@@ -1,4 +1,4 @@
-#sidebar {
+#sidebar-docs {
   min-height: 100%;
   max-width: 420px;
   $border: 1px solid $gray-dark;

website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss

@@ -11,7 +11,7 @@ $project-logo-pad-left: 8px;
 // Mixins
 @mixin project-a-style{
   color: $green;
-  font-weight: 600;
+  font-weight: 400;
   letter-spacing: 0;
 
   &:hover{
@@ -21,7 +21,7 @@ $project-logo-pad-left: 8px;
 
 @mixin project-footer-a-style{
   color: $black;
-  font-weight: 600;
+  font-weight: 400;
 
   &:hover{
     color: $green;
@@ -34,7 +34,7 @@ $project-logo-pad-left: 8px;
 
 @mixin project-footer-a-subpage-style{
   color: $white;
-  font-weight: 300;
+  font-weight: 400;
 
   svg path{
     fill: $white;

website/source/layouts/_sidebar.erb

@@ -0,0 +1,26 @@
+<!-- Overlay for fixed sidebar -->
+<div class="sidebar-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">
+            <img src="<%= image_path('logo-header@2x.png') %>" width="24px" height="34px">
+        </div>
+    </div>
+
+    <!-- Sidebar navigation -->
+    <ul class="main nav sidebar-nav">
+        <li class="first"><a href="/intro">Intro</a></li>
+        <li><a href="/docs">Docs</a></li>
+        <li><a href="/community">Community</a></li>
+    </ul>
+    <div class="divider"></div>
+    <!-- Sidebar navigation 2-->
+    <ul class="external nav sidebar-nav">
+        <li class="first"><a class="v-btn gray sml" href="/downloads.html"><%= partial "layouts/svg/svg-download" %>Download</a></li>
+        <li class=""><a class="v-btn gray sml" href="https://github.com/mitchellh/packer"><%= partial "layouts/svg/svg-github" %>GitHub</a></li>
+    </ul>
+</aside>

website/source/layouts/inner.erb

@@ -1,6 +1,6 @@
 <% wrap_layout :layout do %>
   <div id="main-content" class="docs-wrapper">
-      <div id="sidebar" class="col-sm-3 col-md-3">
+      <div id="sidebar-docs" class="col-sm-3 col-md-3">
         <%= yield_content :sidebar %>
       </div>
       <div class="docs-body col-sm-9 col-md-9">

website/source/layouts/layout.erb

@@ -54,6 +54,7 @@
 				</div>
     	</div>
     </div>
+    <%= partial "layouts/sidebar" %>
 
     <%= yield %>
     <div class="clearfix"></div>
@@ -73,9 +74,9 @@
             <% end %>
             <div class="footer-links clearfix">
               <ul class="main-links white nav navbar-nav">
-                <li><a href="/intro/index.html">Intro</a></li>
+                <li><a href="/intro">Intro</a></li>
-                <li><a href="/docs/index.html">Docs</a></li>
+                <li><a href="/docs">Docs</a></li>
-                <li><a href="/community.html">Community</a></li>
+                <li><a href="/community">Community</a></li>
               </ul>
               <ul class="external-links white nav navbar-nav">
                 <li class="first download">
@@ -101,6 +102,7 @@
       </div>
     </div>
   </footer>
+  <%= javascript_include_tag "application" %>
   <%= partial "layouts/google-analytics.html" %>
   <%= partial "layouts/adroll.html" %>
 </body>