[WIP] Add sidebar toggle icon

Added:
- PageLayout.mustache: #sidebar-hide-checkbox, .main divs, Navigation moved above Header
- Header.mustache: #header label.mw-ui-icon-sidebar

Change-Id: I6a770ad79f23491b4c3d5fb79d24bd63d63a21c7

includes/templates/Header.mustache

@@ -5,6 +5,10 @@
 }}
 
 <div id="header">
+	<label for="sidebar-hide-checkbox" class="mw-ui-icon-sidebar">
+		<span class="speech-only"> Toggle Sidebar </span>
+	</label>
+
 	<div id="p-logo" role="banner">
 		<a {{{html-logo-attributes}}}>
 			<span class="logo-globe {{{html-logo-class}}}"></span>

includes/templates/PageLayout.mustache

@@ -13,6 +13,8 @@
 
 {{{html-headelement}}}
 
+<input id="sidebar-hide-checkbox" type="checkbox" class="hidden">
+
 <div class="main">
 	<div id="mw-head-base" class="noprint content-margin"></div>
 

resources/skins.vector.styles/Header.less

@@ -76,3 +76,14 @@
 		background-repeat: no-repeat;
 	}
 }
+
+// == Sidebar toggle ==
+
+.mw-ui-icon-sidebar {
+	margin: auto 0.7em;
+	width: 25px;
+	height: 25px;
+	background-image: url( ../static/hamburger.7cec498b.svg );
+	background-size: contain;
+	background-repeat: no-repeat;
+}

resources/skins.vector.styles/PageLayout.less

@@ -32,10 +32,18 @@
 	margin: 0 auto;
 }
 
+.main {
+	position: relative;
+	// Placeholder margin for sidebar if #sidebar-hide-checkbox is unchecked.
+	margin-left: @width-sidebar + @margin-content;
+}
+
 @media ( max-width: 1400px ) {
-	#mw-data-after-content,
-	.content-margin {
-		margin-left: @width-sidebar + @margin-content;
+	#sidebar-hide-checkbox:checked {
+		~ .main {
+			// Remove placeholder margin for sidebar if #sidebar-hide-checkbox is checked.
+			margin-left: 0;
+		}
 	}
 }
 
@@ -62,6 +70,16 @@
 
 	.vertical-gradient( @background-color-base, @background-color-secondary, 0%, 10% );
 	.box-shadow( 0 10px 15px -5px rgba(0, 0, 0, 0.15) );
+
+	// Moved in the viewport if #sidebar-hide-checkbox unchecked.
+	.transform( translateX( 0 ) );
+}
+
+#sidebar-hide-checkbox:checked {
+	~ #mw-panel {
+		// Moved out to the left if #sidebar-hide-checkbox is checked.
+		.transform( translateX( -@width-sidebar ) );
+	}
 }
 
 // == Hide empty portlets ==