Einführung Navsidebar

views/login.pug

@@ -55,7 +55,7 @@ html(lang='de')
 						| Zum Speichern und Abfragen der Einstellung zum Präsentationsmodus wird der Session-Store genutzt.
 							
 				.from-group
-					.col-sm-1
+					.col-sm-2
 						button.btn.btn-success.btn-sm
 							//- (onclick="run_login();")
 							span Weiter ...

views/mixins_headline_nav.pug

@@ -1,16 +1,68 @@
 mixin headline_presentation_hamburger
-	.dropdown
+	button.btn.btn-primary.btn-sm(onclick="show_navsidebar();", style="line-height: 1.25;")
-		.dropdown-toggle(data-toggle="dropdown", style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px; ")
+		span(style="font-size: 150%;") ⇤
-			//- margin-right: auto; (normalerweise)
+		
+		
+	div#navsidebarslider(style="position:fixed; right:0px; background:#007bff; top:45%; z-index: 1; border-top-left-radius: .3rem; border-bottom-left-radius: .3rem;")
+		//- width: 12px; font-weight: bold; color: white; text-align: center; font-size: 80%; padding-left: 2px;
+		button.btn.btn-primary.btn-sm(style="line-height: 1.25; padding: .25rem .25rem;")
+			span(style="font-size: 150%;") ⇤
+		//- | 〈
+		//- 〉
+		
+	//-
+		div(style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px;", onclick="show_navsidebar();")
 			span(style="top:  4px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
 			span(style="top: 12px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
 			span(style="top: 20px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
-		.dropdown-menu
+	//-
-			.dropdown-item
+		.dropdown
-				input.form-check-input#check_as_presentation(type="checkbox")
+			.dropdown-toggle(data-toggle="dropdown", style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px; ")
-				label.form-check-label(for="check_as_presentation") Als Präsentation
+				//- margin-right: auto; (normalerweise)
-				//- , onclick="event.stopPropagation();"
+				span(style="top:  4px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
-				
+				span(style="top: 12px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
+				span(style="top: 20px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
+			.dropdown-menu
+				.dropdown-item
+					input.form-check-input#check_as_presentation(type="checkbox")
+					label.form-check-label(for="check_as_presentation") Als Präsentation
+					//- , onclick="event.stopPropagation();"
+
+mixin navsidebar(gliederung, current)
+	div#navsidebar(style="position: fixed; z-index: 5; height: 100%; min-width: 25%; max-width: 35%; top: 0px; right: 0px; bottom: 0px; background-color: white; padding: 15px; border-left: 1px solid #0e4f88; overflow: scroll;")
+		table(style="width: 100%;")
+			tr
+				td
+					button.btn.btn-primary.btn-sm(onclick="hide_navsidebar();", style="line-height: 1.25;")
+						span(style="font-size: 150%;") ⇥
+				td(style="text-align: right; vertical-align: bottom; font-size: 100%;")
+					input#check_as_presentation(type="checkbox",style="margin-right: 5px;")
+						//- .form-check-input
+					label(for="check_as_presentation") Als Präsentation
+						//- .form-check-label
+		hr(style="border-top: 2px solid #0e4f88; margin-top: 10px; margin-bottom: 10px;")
+		a(href=pathoffset+"/")
+			b Start
+		each item in gliederung
+			- var item_path = pathoffset + "/" + item.id;
+			.div(style="margin-top: 10px;")
+				if(current.length > 0 && current[0].id === item.id)
+					b !{item.name}
+				else
+					a(href=item_path)
+						b !{item.name}
+					
+			if(item.subs.length > 0)
+				ul.liarrow
+					each subitem in item.subs
+						- var subitem_path = item_path + "/" + subitem.id;
+						li
+							if(current.length > 1 && current[1].id === subitem.id)
+								| !{subitem.name}
+							else
+								a(href=subitem_path) !{subitem.name}
+			
+
 mixin headline_presentation_script
 	script.
 		var check_as_presentation = sessionStorage.getItem('show_as_presentation');
@@ -33,6 +85,42 @@ mixin headline_presentation_script
 			sessionStorage.setItem('show_as_presentation', $('#check_as_presentation').prop('checked'));
 			location.reload();
 		});
+		
+		$(document).ready(function(){
+			$("#navsidebar").css("margin-right", $("#navsidebar").outerWidth()*-1);
+			$("#navsidebar").scrollTop(0);
+			$("#navsidebarslider").click(show_navsidebar);
+			
+			$(window).resize(function(){
+				if($("#navsidebar").hasClass("navsidebarvisible")) {
+					$("#navsidebarslider").css("margin-right",$("#navsidebar").outerWidth());
+				}
+				else {
+					$("#navsidebar").css("margin-right", $("#navsidebar").outerWidth()*-1);
+				}
+			});
+		});
+		
+		function show_navsidebar() {
+			console.log("show navsidebar", $("#navsidebar").outerWidth());
+			$("#navsidebar").animate({"margin-right": "+="+$("#navsidebar").outerWidth()});
+			$("#navsidebar").focus();
+			$("#navsidebar").addClass("navsidebarvisible")
+			$("#navsidebarslider").animate({"margin-right": "+="+$("#navsidebar").outerWidth()});
+			$("#navsidebarslider button span").text("⇥");
+			$("#navsidebarslider").off("click");
+			$("#navsidebarslider").click(hide_navsidebar);
+		}
+		
+		function hide_navsidebar() {
+			console.log("hide navsidebar", $("#navsidebar").outerWidth());
+			$("#navsidebar").animate({"margin-right": "-="+$("#navsidebar").outerWidth()});
+			$("#navsidebar").removeClass("navsidebarvisible")
+			$("#navsidebarslider").animate({"margin-right": "-="+$("#navsidebar").outerWidth()});
+			$("#navsidebarslider button span").text("⇤");
+			$("#navsidebarslider").off("click");
+			$("#navsidebarslider").click(show_navsidebar);
+		}
 
 mixin body_presentation_script
 	script.

views/nt/ev/lk/layout.pug

@@ -15,9 +15,10 @@ html(lang='de')
 		script(src='/javascripts/slide-utils.js')
 		script(src='/javascripts/popper.min.js')
 		
-		+cookies_css
+		//- +cookies_css
 		
 	body
+		+navsidebar(gliederung, current)
 		+headline
 		block headline
 		+navigation_auto(gliederung, current)
@@ -41,6 +42,6 @@ html(lang='de')
 
 		
 		+body_presentation_script
-			
+		//-	
-		+cookies_html
+			+cookies_html
-		+cookies_script
+			+cookies_script

views/nt/ev/mk/layout.pug

@@ -18,6 +18,7 @@ html(lang='de')
 		
 		//- +cookies_css
 	body
+		+navsidebar(gliederung, current)
 		+headline
 		block headline
 		+navigation_auto(gliederung, current)