Style boost

Shogi.UI/Layout/NavMenu.razor.css

@@ -1,15 +1,45 @@
 .NavMenu {
 	display: flex;
-	flex-direction: row;
-	border-right: 2px solid #444;
-	place-items: baseline;
+	align-content: baseline;
 	gap: 3px;
+	padding: 0 0.5rem;
 }
 
-.NavMenu > * {
-	padding: 0 0.5rem !important;
-}
+	.NavMenu .spacer {
+		flex: 1;
+	}
 
-.NavMenu .spacer {
-	flex: 1;
+	/******************/
+	/* Mobile Nav Menu*/
+	/******************/
+
+	.NavMenu.compact {
+		/* display is changed in @media */
+		display: none;
+	}
+
+		.NavMenu.compact .flex {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.NavMenu.compact .drop-down {
+			height: 0;
+			overflow-y: clip;
+			transition: height 0.25s ease-in;
+		}
+
+			.NavMenu.compact .drop-down.expand {
+				height: 100px;
+			}
+
+
+@media all and (max-width: 750px) {
+	.NavMenu.compact {
+		display: block;
+	}
+
+	.NavMenu {
+		display: none;
+	}
 }