web: added global nav for small devices

web/css/responsive.css

@@ -16,6 +16,9 @@
 	}
 
 	/* Application Framework */
+	#gnav {
+		display: initial;
+	}
 	#view {
 		width: initial;
 		border-right: none;

web/css/styles.css

@@ -124,6 +124,34 @@ button.nav {
 	color: var(--clrBtn);
 	font-size: 24px;
 }
+#gnav {
+	display: none;
+	position: fixed;
+	bottom: 55px;
+	right: 55px;
+	z-index: 3;
+}
+#gnav button {
+	position: absolute;
+	top: 0;
+	left: 0;
+	font-size: 24px;
+	border-radius: 50%;
+	background: var(--clrText);
+	color: var(--clrBg);	
+	padding: 5px;
+	border: transparent 5px solid;
+	transition: top 0.05s linear;
+	transform: translateX(-50%) translateY(-50%);
+	z-index: 2;
+}
+#gnav button[role="open-gnav"] {
+	z-index: 3;
+	padding: 15px;
+}
+#gnav.open button[role="sign-out"] {
+	top: -75px;
+}
 
 /* Application Framework */
 #container {
@@ -134,6 +162,7 @@ button.nav {
 	flex: auto;
 	border-right: 1px solid var(--clrBorder);
 	width: 750px;
+	min-height: 100vh;
 }
 #view header {
 	position: sticky;
@@ -141,7 +170,7 @@ button.nav {
 	background: var(--clrBg);
 }
 #view header > label {
-	padding: 22px 15px;
+	padding: 15px;
 	font-size: 22px;
 	font-weight: 800;
 	display: block;

web/index.html

@@ -24,6 +24,14 @@
 			damus_web_init();
 		});
 		</script>
+		<nav id="gnav">
+			<button class="icon" role="open-gnav" title="Open Menu" onclick="toggle_gnav(this)">
+				<i class="fa fa-fw fa-hand-peace"></i>
+			</button>
+			<button class="icon" role="sign-out" title="Sign Out" onclick="press_logout()">
+				<i class="fa fa-fw fa-arrow-right-from-bracket"></i>
+			</button>
+		</nav>
 		<div id="container">
 			<div class="flex-fill vertical-hide"></div>
 			<div id="nav" class="flex-noshrink vertical-hide">

web/js/ui/util.js

@@ -11,3 +11,8 @@ function toggle_cw(el) {
 	input.classList.toggle("hide", !isOn);
 }
 
+// toggle_gnav hides or shows the global navigation's additional buttons based
+// on its opened state.
+function toggle_gnav(el) {
+	el.parentElement.classList.toggle("open");
+}