Create sidebar hamburger menu for mobile (#121)

* Create sidebar hamburger menu for mobile

* Improve sidebar UX and mobile menu

* Fixed sidebar UX bug where blue text breadcrumb didn't appear and fixed hover/focus styling

* Improved UX of hamburger by applying toggle animations

css/layout.css

@@ -43,7 +43,7 @@ html {
 }
 
 	#content .box {
-		padding: 30px; 
+		padding: 30px 5px;
 	}
 
 /*! sidebar */
@@ -72,27 +72,36 @@ html {
 		text-transform: uppercase;
 	}
 
+	#sidebar .nav .current .top {
+		color: #1389CE;
+		font-weight: 700;
+	}
+
 	#sidebar .nav a {
 		display:block;
-		padding-top:8px;
+		padding-top:7px;
-		padding-bottom:8px;
+		padding-bottom:7px;
 		padding-right:12px;
 	}
 
-	#sidebar .nav a:hover {
+	/* Sidebar hover states */
-		text-decoration: none;
+	#sidebar .nav a:hover,
-		background:#eee;
+	#sidebar .nav a.top:hover,
-		color:#808c8d;
+	#sidebar .nav .section ul li .section:hover,
-	}
+	#sidebar .nav a.current:hover,
-
+	/* Sidebar focus states */
-	#sidebar .nav a.current:hover {
+	#sidebar .nav a:focus,
-		background-color: #03527a;
+	#sidebar .nav a.top:focus,
+	#sidebar .nav .section ul li .section:focus,
+	#sidebar .nav a.current:focus {
+		background-color: #1389ce;
 		color: #fff;
+		text-decoration: none;
 	}
 
 	#sidebar .nav .section .top {
-		background: #f6f7f8;
 		border: none;
+		color: #1389CE;
 	}
 
 	#sidebar li {
@@ -101,7 +110,6 @@ html {
 	}
 
 	#sidebar li a.current {
-		background:rgb(3, 91, 136);
 		color:#fff;
 	}
 
@@ -109,7 +117,6 @@ html {
 
 	#sidebar .nav .section ul,
 	#sidebar .nav .current ul {
-		background: #f6f7f8;
 		border-bottom: 1px solid #eee;
 		margin: 0;
 		padding:0;
@@ -117,16 +124,23 @@ html {
 
 	#sidebar .nav .section ul li a,
 	#sidebar .nav .current ul li a {
-		padding-left:24px;
+		padding-left:30px;
+	}
+
+	#sidebar .nav .section ul li a.section {
+		color: #1389CE;
 	}
 
 	#sidebar .nav .section ul li ul li a,
 	#sidebar .nav .current ul li ul li a {
-		padding-left:42px;
+		padding-left:48px;
 		font-size:14px;
 	}
 
-	#sidebar .nav a.current {}
+	#sidebar .nav a.current {
+		color: #1389CE;
+		font-weight: 700;
+	}
 
 	#sidebar .minor-nav a {
 		color: #181C17;
@@ -207,16 +221,6 @@ html {
 		background: #fff;
 	}
 
-.menu-toggle {
-	position:absolute;
-	right:20px;
-	top:14px;
-}
-
-.menu-toggle img {
-	width:32px;
-}
-
 /*! language */
 #language {}
 
@@ -700,7 +704,7 @@ html {
 		bottom: 0;
 		top: 0;
 		z-index: 9999;
-		box-shadow: -2px 1px 12px -3px #ccc;	
+		box-shadow: -2px 1px 40px -3px #999;
 		overflow-y:auto;
 		overflow-x:hidden;
 	}
@@ -722,8 +726,88 @@ html {
 		font-size:14px;
 	}
 
-	.menu-toggle {
+	.wrapper .menu-toggle {
 		display: block;
+		position: relative;
+		margin-left: auto;
+		margin-bottom: 20px;
+		width: 30px;
+		height: 30px;
+		-webkit-transform: rotate(0deg);
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		transform: rotate(0deg);
+		-webkit-transition: .5s ease-in-out;
+		-moz-transition: .5s ease-in-out;
+		-o-transition: .5s ease-in-out;
+		transition: .5s ease-in-out;
+		cursor: pointer;
+	}
+
+	.menu-toggle span {
+		display: block;
+		position: absolute;
+		height: 3px;
+		width: 100%;
+		background: #1389ce;
+		border-radius: 9px;
+		opacity: 1;
+		left: 0;
+		-webkit-transform: rotate(0deg);
+		-moz-transform: rotate(0deg);
+		-o-transform: rotate(0deg);
+		transform: rotate(0deg);
+		-webkit-transition: .25s ease-in-out;
+		-moz-transition: .25s ease-in-out;
+		-o-transition: .25s ease-in-out;
+		transition: .25s ease-in-out;
+	}
+	/* Icon 3 */
+
+	.menu-toggle span:nth-child(1) {
+	  top: 8px;
+	}
+
+	.menu-toggle span:nth-child(2),
+	.menu-toggle span:nth-child(3) {
+	  top: 18px;
+	}
+
+	.menu-toggle span:nth-child(4) {
+	  top: 28px;
+	}
+
+	.menu-toggle.open span:nth-child(1) {
+	  top: 18px;
+	  width: 0%;
+	  left: 50%;
+	}
+
+	.menu-toggle.open span:nth-child(2) {
+	  -webkit-transform: rotate(45deg);
+	  -moz-transform: rotate(45deg);
+	  -o-transform: rotate(45deg);
+	  transform: rotate(45deg);
+	}
+
+	.menu-toggle.open span:nth-child(3) {
+	  -webkit-transform: rotate(-45deg);
+	  -moz-transform: rotate(-45deg);
+	  -o-transform: rotate(-45deg);
+	  transform: rotate(-45deg);
+	}
+
+	.menu-toggle.open span:nth-child(4) {
+	  top: 18px;
+	  width: 0%;
+	  left: 50%;
+	}
+}
+
+@media (max-width:992px) {
+	#content {
+		float: right;
+		width: 100%;
 	}
 }
 

css/typography.css

@@ -13,7 +13,7 @@
 
 /*! links */
 a {
-	color: #1389ce; 
+	color: #808c8d; 
 	text-decoration: none;
 }
 

javascript/DocumentationViewer.js

@@ -1,5 +1,16 @@
 ;(function($) {
 	$(document).ready(function() {
+
+		//toggle the side menu when in mobile
+		$('.menu-toggle').on('click', function (e) {
+			e.preventDefault();
+			var left = $('#sidebar').is('.visible') ? -270 : 0;
+			$('#sidebar').animate({ left: left}, 'fast', function() {
+				$(this).toggleClass('visible');
+			});
+			$(this).toggleClass('open');
+		})
+
 		var switched = false;
 
 		var updateTables = function() {
@@ -135,60 +146,7 @@
 			$(this).removeClass('hover');
 		});
 
-		/*
-		$(".search input").live("keyup", function(e) {
-			clearTimeout($.data(this, 'timer'));
 
-			var string = $(this).val();
-			var self = $(this);
-
-			if (string == '') {
-				$(".search .autocomplete-results").hide();
-			} else {
-				var container;
-
-				if($(this).siblings('.autocomplete-results').length == 0) {
-					container = $("<div class='autocomplete-results'></div");
-					
-					$(this).after(container);
-				} else {
-					container = $(this).siblings('.autocomplete-results').first();
-				}
-
-				$(this).data('timer', setTimeout(function() {
-					if(string !== '') {
-						$.getJSON(
-							self.parents('form').attr('action'),
-							{ query: string },
-							function(results) {
-								if(results) {
-									var list = $("<ul></ul>");
-
-									$.each(results, function(i, elem) {
-										list.append(
-											$("<li></li>")
-												.append(
-													$("<a></a>").attr('href', elem.link).text(elem.title)
-												).append(
-													elem.path
-												)
-										);
-									});
-
-									container.append(list);
-								} else {
-									container.hide().removeClass('loading');
-								}
-							}
-						);
-					}
-
-					return false;
-				}, 100));
-			};
-
-		});
-		*/
 
 		/** ---------------------------------------------
 		 * LANGAUGE SELECTER
@@ -218,13 +176,6 @@
 			}
 		});
 
-		$('.menu-toggle').on('click', function (e) {			
-			e.preventDefault();
-			var left = $('#sidebar').is('.visible') ? -270 : 0;
-			$('#sidebar').animate({ left: left}, 'fast', function() {
-				$(this).toggleClass('visible');
-			});
-		})
 
 	});
 })(jQuery);

templates/DocumentationViewer.ss

@@ -5,6 +5,13 @@
 
 	<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
 		<div class="wrapper">
+			<a class="menu-toggle">
+				<span></span>
+				<span></span>
+				<span></span>
+				<span></span>
+			</a>
+
 			<% if Breadcrumbs.count > 1 %>
 				<% include DocumentationBreadcrumbs %>
 			<% else_if Page.Title %>

templates/DocumentationViewer_all.ss

@@ -8,7 +8,12 @@
 
 			<div class="doc-breadcrumbs">
 				<p>
-					<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
+					<a class="menu-toggle">
+						<span></span>
+						<span></span>
+						<span></span>
+						<span></span>
+					</a>
 						<a class="breadcrumb" href="$BaseHref">Documentation</a>
 						<span>/</span>
 						<a class="breadcrumb current">Index</a>

templates/DocumentationViewer_results.ss

@@ -8,7 +8,12 @@
 
 			<div class="doc-breadcrumbs">
 				<p>
-					<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
+					<a class="menu-toggle">
+						<span></span>
+						<span></span>
+						<span></span>
+						<span></span>
+					</a>
 					<a class="breadcrumb" href="$BaseHref">Documentation</a>
 					<span>/</span>
 					<a class="breadcrumb current">Search</a>

templates/Includes/DocumentationBreadcrumbs.ss

@@ -1,6 +1,5 @@
 <div class="doc-breadcrumbs">
 	<p>
-		<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
 		<% loop Breadcrumbs %>	
 			<% if not First %>
 				<a class="breadcrumb <% if Last %>current<% end_if %>" href="$Link">$Title</a> <% if Last %><% else %><span>/</span><% end_if %>

templates/Includes/DocumentationSidebar.ss

@@ -1,7 +1,6 @@
 <div id="sidebar">
 	<div class="box">
 		$DocumentationSearchForm
-		
 		<ul class="nav">
 			<% if not HasDefaultEntity %>
 				<li><a href="$Link" class="top">Home</a></li>