[WIP] Menu at right side & collapsible

public/static/css/menu2.css

@@ -0,0 +1,134 @@
+#top {
+	left: 0;
+	top: 0;
+	display: inline-block;
+	overflow-y: auto;
+    overflow-x: hidden;
+}
+
+#top #cssmenu > ul > li {
+	 float: none;
+}
+
+body .row {
+	display: inline-block;
+	position: absolute;
+}
+
+/* no shadows or borders in the menu bar */
+#top #cssmenu > ul > li > ul {
+	position: inherit;
+	border: none;
+	background: none;
+	-webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+/* less padding in the menu bar */
+#top > .helper {
+	 padding-left: 5px;
+	 padding-right: 5px;
+}
+
+/* no background for menu entries */
+#top a:hover, #top #cssmenu li.open > a, #top #cssmenu li.active > a {
+	 background: inherit;
+}
+
+/* active menu entry */
+#top #cssmenu li.active > a {
+	color: black;
+}
+
+/* menu entries - less padding */
+.expand-content li {
+	padding-left: 5px;
+}
+
+@media only screen and (min-width:992px)
+{
+	/* left menu has full height and no padding, margin etc. */
+	#top {
+		height: 100vh;
+		width: auto;
+		padding: 0;
+		margin: 0;
+		border: 0px;
+	}
+
+	/* and only minimal padding on the right side */
+	#top #cssmenu > ul > li > ul > li > a {
+		padding-right: 3px;
+	}
+
+	/* required due to weird behavior with display:inline-block */
+	body {
+		overflow-y: hidden;
+	}
+
+	/* auto-scroll for both boxes, but leave enough space for nav bottom */
+	#tour-content {
+	    height: calc(100vh - 52px);
+	    overflow-y: auto;
+	}
+
+	#tour-code {
+	    height: calc(100vh - 52px);
+	    overflow-y: auto;
+	}
+}
+
+@media only screen and (max-width:991px)
+{
+	/* display the menu over the content */
+	#top {
+		position: absolute;
+		z-index: 3;
+	}
+	/* no overlap between tour title and hambuger */
+	#tour-content {
+		padding-top: 15px
+	}
+	/* remove weird margin around menu hamburger */
+	#top a.hamburger {
+		margin: 0.15em;
+	}
+	/* show hamburger menu item on larger screens */
+	#top > .helper {
+		padding: 0;
+	}
+	/* use a different width than 54em */
+	#top #cssmenu {
+		display: none;
+	}
+	/* use a different width than 54em */
+	#top a.hamburger {
+		display: inline;
+		float: right;
+		font-size: 2em;
+		line-height: 1;
+	}
+	/* use a different width than 54em */
+	#top a.hamburger::after {
+		content: "\f0c9";
+		font-family: FontAwesome;
+	}
+	/* use a different width than 54em */
+	#top a.hamburger span {
+		display: none;
+	}
+}
+
+/* less space for the nav bar */
+.navbar .h1 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+/* Menu toggle icon */
+.menu-toggle-item {
+	float: left;
+	text-align: right;
+	margin-top: 10px;
+	padding-right: 15px;
+}

public/static/js/tour-controller.js

@@ -159,6 +159,15 @@ dlangTourApp.controller('DlangTourAppCtrl',
 		url += $scope.chapterId + '/' + $scope.section + '.md';
 		$window.open(url, '_blank');
 	}
+
+	$scope.toggleMenu = function() {
+		var el = document.getElementById("top");
+		if (el.style.display === "none") {
+			el.style.display = "inline-block";
+		} else {
+			el.style.display = "none";
+		}
+	}
 }]);
 
 // use CodeMirror to highlight pre

source/app.d

@@ -144,7 +144,8 @@ shared static this()
 		auto googleAnalyticsId = config.googleAnalyticsId;
 		auto chapterId = "";
 		auto language = "en";
-		res.render!("error.dt", req, error, language, googleAnalyticsId, chapterId, toc, title)();
+		auto section = "";
+		res.render!("error.dt", req, error, language, googleAnalyticsId, chapterId, section, toc, title)();
 		res.finalize();
 	};
 

views/base.dt

@@ -5,6 +5,7 @@ head
 	link(rel="stylesheet", href="/static/css/common.css")
 	link(rel="shortcut icon", href="/static/img/favicon.ico")
 	link(rel="stylesheet", type="text/css", href="/static/css/menu.css")
+	link(rel="stylesheet", type="text/css", href="/static/css/menu2.css")
 	meta(name="viewport",content="width=device-width, initial-scale=1.0, minimum-scale=0.1, maximum-scale=10.0")
 	title #{title}
 	link(rel="stylesheet", href="/static/css/tour.css")
@@ -17,28 +18,29 @@ body(ng-app="DlangTourApp", class="ng-cloak")
 		.helper
 			.helper.expand-container.active
 				.logo
-					a(href="https://dlang.org")
-						img(id="logo", alt="DLang Logo", src="/static/img/dlogo.svg")
-					a(href="#{req.rootDir}", id="title")
-						span The DLang Tour
+					//-a(href="https://dlang.org")
+						//-img(id="logo", alt="DLang Logo", src="/static/img/dlogo.svg")
+					//-a(href="#{req.rootDir}", id="title")
+						//-span The DLang Tour
 				a(href="#", title="Menu", class="hamburger expand-toggle")
 					span Menu
 				#cssmenu
 					ul
 						- foreach(ref tocItem; *toc)
 							- auto active = chapterId == tocItem.chapterId;
-							li(class=(active ? "expand-container active" : "expand-container"))
+							li(class=(active ? "expand-container open" : "expand-container"))
 								a.expand-toggle(href="#")
 									span=tocItem.title
 								ul.expand-content
 									- foreach(ref sec; tocItem.sections)
-										li(class=(active ? "active" : ""))
+										- auto activeSection = section == sec.sectionId;
+										li(class=(activeSection ? "active" : ""))
 											a(href="/tour/#{language}/#{tocItem.chapterId}/#{sec.sectionId}")
 												span=sec.title
 
-				#github_avatar
-					a(href="https://github.com/stonemaster/dlang-tour")
-						i(class="fa fa-github",aria-hidden="true")
+				//-#github_avatar
+					//-a(href="https://github.com/stonemaster/dlang-tour")
+						//-i(class="fa fa-github",aria-hidden="true")
 
 	block content
 

views/tour.dt

@@ -9,8 +9,12 @@ block head
 
 block content
 	.row(ng-controller="DlangTourAppCtrl as ctrl", ng-init="init('#{language}', '#{githubRepo}', '#{chapterId}', '#{section}', #{hasSourceCode}, '#{previousSection.link}', '#{nextSection.link}')")
+
 		div#tour-content(ng-show="showContent", ng-class="{'col-md-12': !showSourceCode, 'col-md-6 col-sm-12': showSourceCode}")
 			div(ng-hide="showProgramOutput")
+				.menu-toggle-item.hidden-xs.hidden-sm
+					button.btn.btn-default(ng-click="toggleMenu()")
+						.fa.fa-bars
 				.content-command-box
 					button.btn.btn-default(ng-click="editOnGithub()")
 						.fa.fa-edit
@@ -24,7 +28,7 @@ block content
 						span.fa.fa-close
 				h2.program-output-title rdmd playground.d
 				pre#program-output {{programOutput}}
-		div(ng-class="{'col-md-6 col-sm-12': showContent, 'col-md-12': !showContent}", ng-show="showSourceCode", style="padding-left: 0px; padding-right: 0px")
+		div#tour-code(ng-class="{'col-md-6 col-sm-12': showContent, 'col-md-12': !showContent}", ng-show="showSourceCode", style="padding-left: 0px; padding-right: 0px")
 			div#command-box.text-right
 				button.btn.btn-default(ng-click="showContent = !showContent")
 					i.fa.fa-expand(ng-show="showContent",aria-hidden="true")
@@ -40,20 +44,23 @@ block content
 						span Reset
 			ui-codemirror(ui-codemirror-opts="editorOptions", ui-codemirror="{ onLoad : codemirrorLoaded }", ng-model="sourceCode")
 
-	nav.navbar.navbar-bottom
-		.container.text-center.h1
-			a(href="#{previousSection.link}", ng-show="'' != '#{previousSection.link}'")
-				| <
-				span.h4 #{previousSection.title}
-			| #{sectionId + 1} /
-			span.small #{sectionCount}
-			a(href="#{nextSection.link}", ng-show="'' != '#{nextSection.link}'")
-				span.h4 #{nextSection.title}
-				| >
-		.container.hidden-xs.hidden-sm
-			p.text-muted.text-center
-				kbd ?
-				| Keyboard shortcuts
+		.clear
+		nav.navbar.navbar-bottom
+			.text-center.h1
+				a(href="#{previousSection.link}", ng-show="'' != '#{previousSection.link}'")
+					| <
+					span.h4 #{previousSection.title}
+				//-| #{sectionId + 1} /
+				//-span.small #{sectionCount}
+				span(ng-show="'' != '#{previousSection.link}'")
+					| /
+				a(href="#{nextSection.link}", ng-show="'' != '#{nextSection.link}'")
+					span.h4 #{nextSection.title}
+					| >
+			//-.container.hidden-xs.hidden-sm
+				//-p.text-muted.text-center
+					//-kbd ?
+					| Keyboard shortcuts
 
 block js
 	script(src="/static/js/tour-controller.js")