Fixed mobile-desktop menu

Seenginx/Pages/_Host.cshtml

@@ -43,6 +43,5 @@
 
 	<script src="_framework/blazor.server.js"></script>
 	<script src="js/modal.js" asp-append-version="true"></script>
-	<script src="js/ui.js" asp-append-version="true"></script>
 </body>
 </html>

Seenginx/SCSS/main.scss

@@ -2,3 +2,4 @@
 @import "base.scss";
 @import "utility.scss";
 @import "side-menu.scss";
+@import "override-framework.scss";

Seenginx/SCSS/override-framework.scss

@@ -0,0 +1,25 @@
+@font-face {
+	font-family: 'Ubuntu';
+	src: url(/fonts/ubuntu-light-webfont.woff2) format('woff2');
+	font-weight: 300;
+	font-style: normal;
+}
+@font-face {
+	font-family: 'Ubuntu-Mono';
+	src: url(/fonts/ubuntumono-regular-webfont.woff2) format('woff2');
+	/*font-weight: 300;*/
+	font-style: normal;
+}
+
+html{
+	font-family: Ubuntu, sans-serif;
+}
+
+.pure-menu-heading{
+	text-transform: none;
+	font-family: Ubuntu-Mono,'Noto Mono'
+}
+.pure-menu-link {
+	font-family: Ubuntu-Mono,'Noto Mono'
+}
+

Seenginx/SCSS/side-menu.scss

@@ -5,8 +5,8 @@ body {
 :root {
 	--leftPanel: 150px;
 	--negativeLeftPanel: -150px;
-	--mobileLeftPanel: 150px;
+	--mobileLeftPanel: 50px;
-	--mobileNegativeLeftPanel: -150px;
+	--mobileNegativeLeftPanel: -50px;
 }
 
 .pure-img-responsive {
@@ -37,6 +37,11 @@ This is the parent `<div>` that contains the menu and the content area.
 
 	&.active {
 
+		@include MediaQuery(phone) {
+			position: relative;
+			left: var(--leftPanel);
+		}
+
 		& .menu-link {
 			left: var(--leftPanel);
 		}
@@ -121,7 +126,7 @@ small screens.
 	left: 0; /* "#menu width" */
 	background: #000;
 	background: rgba(0,0,0,0.7);
-	font-size: 16px; /* change this value to increase/decrease button size */
+	font-size: 14px; /* change this value to increase/decrease button size */
 	z-index: 10;
 	width: min-content;
 	height: auto;
@@ -140,14 +145,8 @@ small screens.
 /*
 Hides the menu at `48em`, but modify this based on your app's needs.
 */
-@media (min-width: 48em) {
-
-	.header,
-	.content {
-		padding-left: 2em;
-		padding-right: 2em;
-	}
 
+@media (min-width: 37.6em) {
 	#layout {
 		padding-left: var(--leftPanel); /* left col width "#menu" */
 		left: 0;
@@ -167,16 +166,3 @@ Hides the menu at `48em`, but modify this based on your app's needs.
 		left: var(--leftPanel);
 	}
 }
-
-@media (max-width: 48em) {
-	/* Only apply this when the window is small. Otherwise, the following
-    case results in extra padding on the left:
-        * Make the window small.
-        * Tap the menu to trigger the active state.
-        * Make the window large again.
-    */
-	#layout.active {
-		position: relative;
-		left: var(--leftPanel);
-	}
-}

Seenginx/SCSS/utility.scss

@@ -7,3 +7,8 @@
 		}
 	}
 }
+
+.petiteCaps {
+	font-variant: petite-caps
+}
+

Seenginx/Shared/NavMenu.razor

@@ -8,27 +8,27 @@
 	<div class="pure-menu">
 		<NavLink class="pure-menu-heading" href="/" Match="NavLinkMatch.All">
 			<span class="oi" data-glyph="bolt"></span>
-			<span class="isHiddenMobile">Seenginx</span>
+			<span class="petiteCaps">Seenginx</span>
 		</NavLink>
 
 		<ul class="pure-menu-list">
 			<li class="pure-menu-item @ActiveNav.GetValueOrDefault("nginx")">
 				<NavLink href="/nginx" class="pure-menu-link" @onclick="@(e => SelectMenuItem("nginx"))">
 					<span class="oi" data-glyph="code"></span>
-					<span class="isHiddenMobile">NGINX</span>
+					<span class="petiteCaps">NginX</span>
 				</NavLink>
 			</li>
 			<li class="pure-menu-item @ActiveNav.GetValueOrDefault("systemd")">
 				<NavLink href="/systemd" class="pure-menu-link" @onclick="@(e => SelectMenuItem("systemd"))">
 					<span class="oi" data-glyph="cog"></span>
-					<span class="isHiddenMobile">SystemD</span>
+					<span class="petiteCaps">SystemD</span>
 				</NavLink>
 			</li>
 
 			<li class="pure-menu-item @ActiveNav.GetValueOrDefault("dmesg")">
 				<NavLink href="/dmesg" class="pure-menu-link" @onclick="@(e => SelectMenuItem("dmesg"))">
 					<span class="oi" data-glyph="dashboard"></span>
-					<span class="isHiddenMobile">Dmesg</span>
+					<span class="petiteCaps">Dmesg</span>
 				</NavLink>
 			</li>
 		</ul>

Seenginx/Shared/NavMenu.razor.cs

@@ -13,7 +13,7 @@ namespace Seenginx.Shared
 		[Parameter]
 		public string MenuActiveClass { get; set; }
 
-		[ParameterAttribute]
+		[Parameter]
 		public EventCallback<string> MenuActiveClassChanged { get; set; }
 
 		protected async override Task OnInitializedAsync()

Seenginx/wwwroot/css/main.css

@@ -33,14 +33,17 @@ body {
     .isHiddenMobile {
       display: none; } }
 
+.petiteCaps {
+  font-variant: petite-caps; }
+
 body {
   color: #777; }
 
 :root {
   --leftPanel: 150px;
   --negativeLeftPanel: -150px;
-  --mobileLeftPanel: 150px;
+  --mobileLeftPanel: 50px;
-  --mobileNegativeLeftPanel: -150px; }
+  --mobileNegativeLeftPanel: -50px; }
 
 .pure-img-responsive {
   max-width: 100%;
@@ -65,6 +68,10 @@ This is the parent `<div>` that contains the menu and the content area.
   position: relative;
   left: 0;
   padding-left: 0; }
+  @media only screen and (max-width: 37.5em) {
+    #layout.active {
+      position: relative;
+      left: var(--leftPanel); } }
   #layout.active .menu-link {
     left: var(--leftPanel); }
   #layout.active #menu {
@@ -130,7 +137,7 @@ small screens.
   /* "#menu width" */
   background: #000;
   background: rgba(0, 0, 0, 0.7);
-  font-size: 16px;
+  font-size: 14px;
   /* change this value to increase/decrease button size */
   z-index: 10;
   width: min-content;
@@ -143,11 +150,7 @@ small screens.
 /*
 Hides the menu at `48em`, but modify this based on your app's needs.
 */
-@media (min-width: 48em) {
+@media (min-width: 37.6em) {
-  .header,
-  .content {
-    padding-left: 2em;
-    padding-right: 2em; }
   #layout {
     padding-left: var(--leftPanel);
     /* left col width "#menu" */
@@ -161,13 +164,24 @@ Hides the menu at `48em`, but modify this based on your app's needs.
   #layout.active .menu-link {
     left: var(--leftPanel); } }
 
-@media (max-width: 48em) {
+@font-face {
-  /* Only apply this when the window is small. Otherwise, the following
+  font-family: 'Ubuntu';
-    case results in extra padding on the left:
+  src: url(/fonts/ubuntu-light-webfont.woff2) format("woff2");
-        * Make the window small.
+  font-weight: 300;
-        * Tap the menu to trigger the active state.
+  font-style: normal; }
-        * Make the window large again.
+
-    */
+@font-face {
-  #layout.active {
+  font-family: 'Ubuntu-Mono';
-    position: relative;
+  src: url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");
-    left: var(--leftPanel); } }
+  /*font-weight: 300;*/
+  font-style: normal; }
+
+html {
+  font-family: Ubuntu, sans-serif; }
+
+.pure-menu-heading {
+  text-transform: none;
+  font-family: Ubuntu-Mono,'Noto Mono'; }
+
+.pure-menu-link {
+  font-family: Ubuntu-Mono,'Noto Mono'; }

Seenginx/wwwroot/css/main.min.css

@@ -1 +1 @@
-body{box-sizing:border-box;}*,::before,::after{box-sizing:inherit;}#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}body{color:#777;}:root{--leftPanel:150px;--negativeLeftPanel:-150px;--mobileLeftPanel:150px;--mobileNegativeLeftPanel:-150px;}.pure-img-responsive{max-width:100%;height:auto;}#layout,#menu,.menu-link{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;}#layout{position:relative;left:0;padding-left:0;}#layout.active .menu-link{left:var(--leftPanel);}#layout.active #menu{left:var(--leftPanel);width:var(--leftPanel);}#menu{margin-left:var(--negativeLeftPanel);width:var(--leftPanel);position:fixed;top:0;left:0;bottom:0;z-index:1000;background:#191818;overflow-y:auto;-webkit-overflow-scrolling:touch;}#menu a{color:#999;border:none;padding:.6em 0 .6em .6em;}#menu .pure-menu,#menu .pure-menu ul{border:none;background:transparent;}#menu .pure-menu ul,#menu .pure-menu .menu-item-divided{border-top:1px solid #333;}#menu .pure-menu li a:hover,#menu .pure-menu li a:focus{background:#333;}#menu .pure-menu-selected,#menu .pure-menu-heading{background:#1f8dd6;}#menu .pure-menu-selected a{color:#fff;}#menu .pure-menu-heading{font-size:110%;color:#fff;margin:0;}.menu-link{position:fixed;display:block;top:0;left:0;background:#000;background:rgba(0,0,0,.7);font-size:16px;z-index:10;width:min-content;height:auto;padding:14px;}.menu-link:hover,.menu-link:focus{background:#000;}@media(min-width:48em){.header,.content{padding-left:2em;padding-right:2em;}#layout{padding-left:var(--leftPanel);left:0;}#menu{left:var(--leftPanel);}.menu-link{position:fixed;left:var(--leftPanel);display:none;}#layout.active .menu-link{left:var(--leftPanel);}}@media(max-width:48em){#layout.active{position:relative;left:var(--leftPanel);}}
+body{box-sizing:border-box;}*,::before,::after{box-sizing:inherit;}#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}body{color:#777;}:root{--leftPanel:150px;--negativeLeftPanel:-150px;--mobileLeftPanel:50px;--mobileNegativeLeftPanel:-50px;}.pure-img-responsive{max-width:100%;height:auto;}#layout,#menu,.menu-link{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;}#layout{position:relative;left:0;padding-left:0;}@media only screen and (max-width:37.5em){#layout.active{position:relative;left:var(--leftPanel);}}#layout.active .menu-link{left:var(--leftPanel);}#layout.active #menu{left:var(--leftPanel);width:var(--leftPanel);}#menu{margin-left:var(--negativeLeftPanel);width:var(--leftPanel);position:fixed;top:0;left:0;bottom:0;z-index:1000;background:#191818;overflow-y:auto;-webkit-overflow-scrolling:touch;}#menu a{color:#999;border:none;padding:.6em 0 .6em .6em;}#menu .pure-menu,#menu .pure-menu ul{border:none;background:transparent;}#menu .pure-menu ul,#menu .pure-menu .menu-item-divided{border-top:1px solid #333;}#menu .pure-menu li a:hover,#menu .pure-menu li a:focus{background:#333;}#menu .pure-menu-selected,#menu .pure-menu-heading{background:#1f8dd6;}#menu .pure-menu-selected a{color:#fff;}#menu .pure-menu-heading{font-size:110%;color:#fff;margin:0;}.menu-link{position:fixed;display:block;top:0;left:0;background:#000;background:rgba(0,0,0,.7);font-size:14px;z-index:10;width:min-content;height:auto;padding:14px;}.menu-link:hover,.menu-link:focus{background:#000;}@media(min-width:37.6em){#layout{padding-left:var(--leftPanel);left:0;}#menu{left:var(--leftPanel);}.menu-link{position:fixed;left:var(--leftPanel);display:none;}#layout.active .menu-link{left:var(--leftPanel);}}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.pure-menu-link{font-family:Ubuntu-Mono,'Noto Mono';}

Seenginx/wwwroot/js/ui.js

@@ -1,46 +0,0 @@
-(function (window, document) {
-
-    var layout   = document.getElementById('layout'),
-        menu     = document.getElementById('menu'),
-        menuLink = document.getElementById('menuLink'),
-        content  = document.getElementById('main');
-
-    function toggleClass(element, className) {
-        var classes = element.className.split(/\s+/),
-            length = classes.length,
-            i = 0;
-
-        for(; i < length; i++) {
-          if (classes[i] === className) {
-            classes.splice(i, 1);
-            break;
-          }
-        }
-        // The className is not found
-        if (length === classes.length) {
-            classes.push(className);
-        }
-
-        element.className = classes.join(' ');
-    }
-
-    function toggleAll(e) {
-        var active = 'active';
-
-        e.preventDefault();
-        toggleClass(layout, active);
-        toggleClass(menu, active);
-        toggleClass(menuLink, active);
-    }
-
-    menuLink.onclick = function (e) {
-        toggleAll(e);
-    };
-
-    content.onclick = function(e) {
-        if (menu.className.indexOf('active') !== -1) {
-            toggleAll(e);
-        }
-    };
-
-}(this, this.document));