Hotfix/remove search hamburger (#125)

* Removed hamburger and inserted close button in sidebar

* Replace sidebar mobile slide out with fade in

* Updated mobile menu button to translate into different languages

css/layout.css

@@ -49,7 +49,7 @@ html {
 /*! sidebar */
 #sidebar {
 	float: left;
-	padding-top:24px;
+	padding-top:20px;
 }
 
 	#sidebar .nav,
@@ -97,6 +97,9 @@ html {
 		background-color: #1389ce;
 		color: #fff;
 		text-decoration: none;
+		-webkit-transition: all 500ms ease;
+    	-moz-transition: all 500ms ease;
+		transition: all 500ms ease;
 	}
 
 	#sidebar .nav .section .top {
@@ -557,7 +560,7 @@ html {
 			color:#696868;
 		}
 
-.menu-toggle {
+.menu-open {
 	display:none;
 }
 
@@ -683,6 +686,10 @@ html {
 	#sidebar {
 		width: 25%;
 	}
+	/* Removes close button on desktop view */
+	#sidebar .menu-close {
+		display: none;
+	}
 
 	.documentation_children li {
 		width:33%;
@@ -694,19 +701,44 @@ html {
 		width: 1170px;
 	}
 }
-
+/* Sidebar mobile styles (default:hidden) */
 @media (max-width: 991px) {
 	#sidebar {
-		width: 265px;
 		position: fixed;
-		background: #fff;
+		background: transparent;
-		left: -300px;
-		bottom: 0;
 		top: 0;
-		z-index: 9999;
+		left: 0;
-		box-shadow: -2px 1px 40px -3px #999;
+		width: 100%;
-		overflow-y:auto;
+		height: 100%;
-		overflow-x:hidden;
+		opacity: 0;
+		z-index: -1; /* [-1] Sidebar: hidden, [0] Page, [1] Sidebar: Show */
+		box-shadow: none;
+		overflow-x: hidden;
+		overflow-y: auto;
+	    -webkit-transition: all 300ms ease;
+	    -moz-transition: all 300ms ease;
+	    transition: all 300ms ease;
+	    -webkit-touch-callout: none;
+	    -webkit-user-select: none;
+	    -khtml-user-select: none;
+	    -moz-user-select: none;
+	    -ms-user-select: none;
+	    -moz-box-shadow: none!important;
+	    -webkit-box-shadow: none!important;
+	    box-shadow: none!important;
+	}
+
+	/* Opened sidebar styles */
+	#sidebar.open {
+		z-index: 1;
+		background: #fff;
+		opacity: 1;
+	}
+	/* Fade out sidebar state styles before class is removed */
+	#sidebar.hide {
+		z-index: 1;
+		background: transparent;
+		color: white;
 	}
 
 	#content {
@@ -726,81 +758,56 @@ html {
 		font-size:14px;
 	}
 
-	.wrapper .menu-toggle {
+	/* Menu button styles */
+	.wrapper .menu-open {
+		display: block;
+		position: relative;
+		width: 70px;
+		height: 40px;
+		margin-left: auto;
+		margin-bottom: 20px;
+		padding: 7px 10px;
+		font-weight: 700;
+		text-decoration: none;
+		text-transform: uppercase;
+		color: #1389ce;
+		background-color: transparent;
+		border: 2px solid #1389ce;
+		border-radius: 5px;
+
+		cursor: pointer;
+		-webkit-user-select: none; /* Chrome/Safari */
+		-moz-user-select: none; /* Firefox */
+		-ms-user-select: none; /* IE10+ */
+	}
+
+	.wrapper .menu-open:hover {
+		background-color: #1389ce;
+		color: #fff;
+		transition: 300ms 0.1s ease;
+	}
+
+	/* Close button styles */
+	.menu-close {
 		display: block;
 		position: relative;
 		margin-left: auto;
-		margin-bottom: 20px;
+		margin-right: 10px;
-		width: 30px;
+		padding: 0px 12px;
-		height: 39px;
+		font-size: 33px;
-		-webkit-transform: rotate(0deg);
+		font-weight: 700;
-		-moz-transform: rotate(0deg);
+		line-height: 33px;
-		-o-transform: rotate(0deg);
+		text-decoration: none;
-		transform: rotate(0deg);
+		color: #1389ce;
-		-webkit-transition: .5s ease-in-out;
+		width: 40px;
-		-moz-transition: .5s ease-in-out;
+		height: 40px;
-		-o-transition: .5s ease-in-out;
-		transition: .5s ease-in-out;
 		cursor: pointer;
+		-webkit-user-select: none; /* Chrome/Safari */
+		-moz-user-select: none; /* Firefox */
+		-ms-user-select: none; /* IE10+ */
 	}
-
+	.menu-close:hover {
-	.menu-toggle span {
+		text-decoration: none;
-		display: block;
-		position: absolute;
-		height: 3px;
-		width: 100%;
-		background: #1389ce;
-		border-radius: 9px;
-		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;
-	}
-
-	/* Hamburger line positioning */
-	.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;
-	}
-
-	/* X line Animation */
-	.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%;
 	}
 }
 

javascript/DocumentationViewer.js

@@ -1,15 +1,26 @@
 ;(function($) {
 	$(document).ready(function() {
 
-		//toggle the side menu when in mobile
+		// Open sidebar on mobile
-		$('.menu-toggle').on('click', function (e) {
+		$('.menu-open').click(function(){
-			e.preventDefault();
+		    $('#sidebar').removeClass('hide').addClass('open');
-			var left = $('#sidebar').is('.visible') ? -270 : 0;
+			return false;
-			$('#sidebar').animate({ left: left}, 'fast', function() {
+		});
-				$(this).toggleClass('visible');
+		// Close sidebar on mobile
-			});
+		$('.menu-close').click(function(){
-			$(this).toggleClass('open');
+			$('#sidebar').removeClass('open').addClass('hide');
-		})
+
+			setTimeout(function() {
+				$('#sidebar').removeClass('hide');
+			}, 500);
+			return false;
+		});
+		// Close sidebar by hitting of ESC
+		$(document).keyup(function(e) {
+		    if (e.keyCode == 27) {
+		        $('#sidebar').removeClass('open');
+		    }
+		});
 
 		var switched = false;
 

lang/en.yml

@@ -6,6 +6,7 @@ en:
     CHANGE: Change
     KEYWORDS: Keywords
     LANGUAGE: Language
+    MENU: Menu
     MODULES: Modules
     OPENSEARCHDESC: 'Search the documentation'
     OPENSEARCHNAME: 'Documentation Search'

templates/DocumentationViewer.ss

@@ -5,12 +5,12 @@
 
 	<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
 		<div class="wrapper">
-			<a class="menu-toggle">
+			<div class="menu-bar">
-				<span></span>
+				<a class="logo" href="https://userhelp.silverstripe.org/"></a>
-				<span></span>
+				<a class="menu-open">
-				<span></span>
+					<%t DocumentationViewer.MENU "Menu" %>
-				<span></span>
+				</a>
-			</a>
+			</div>
 
 			<% if Breadcrumbs.count > 1 %>
 				<% include DocumentationBreadcrumbs %>

templates/DocumentationViewer_all.ss

@@ -8,15 +8,9 @@
 
 			<div class="doc-breadcrumbs">
 				<p>
-					<a class="menu-toggle">
+					<a class="breadcrumb" href="$BaseHref">Documentation</a>
-						<span></span>
+					<span>/</span>
-						<span></span>
+					<a class="breadcrumb current">Index</a>
-						<span></span>
-						<span></span>
-					</a>
-						<a class="breadcrumb" href="$BaseHref">Documentation</a>
-						<span>/</span>
-						<a class="breadcrumb current">Index</a>
 				</p>
 			</div>
 

templates/DocumentationViewer_results.ss

@@ -8,12 +8,6 @@
 
 			<div class="doc-breadcrumbs">
 				<p>
-					<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/DocumentationSidebar.ss

@@ -1,4 +1,5 @@
 <div id="sidebar">
+	<a class="menu-close" href="#">×</a>
 	<div class="box">
 		$DocumentationSearchForm
 		<ul class="nav">