Style boost

Shogi.UI/Layout/NavMenu.razor

@@ -1,6 +1,7 @@
 @inject NavigationManager navigator
 @inject ShogiApi Api
 
+@* Desktop view *@
 <nav class="NavMenu PrimaryTheme ThemeVariant--Contrast">
 	<h1>Shogi</h1>
 	<a href="">Home</a>
@@ -25,8 +26,52 @@
 	</AuthorizeView>
 </nav>
 
+@* Mobile view *@
+<nav class="NavMenu PrimaryTheme ThemeVariant--Contrast compact">
+	<div class="flex">
+		<h1>Shogi</h1>
+		<AuthorizeView>
+			<span>@context.User.Identity?.Name</span>
+		</AuthorizeView>
+		<button class="href" @onclick="() => isExpanded = !isExpanded">
+			@(isExpanded ? "Collapse" : "Expand")
+		</button>
+	</div>
+
+	<div class="drop-down @ExpandedCss">
+		<ul>
+			<li>
+				<a href="">Home</a>
+			</li>
+			<li>
+				<a href="search">Search</a>
+			</li>
+			<AuthorizeView>
+				<Authorized>
+
+					<li>
+						<button class="href" @onclick="CreateSession">Create</button>
+					</li>
+					<li>
+						<a href="logout">Logout</a>
+					</li>
+				</Authorized>
+				<NotAuthorized>
+					<li>
+						<a href="login">Login</a>
+					</li>
+					<li>
+						<a href="register">Register</a>
+					</li>
+				</NotAuthorized>
+			</AuthorizeView>
+		</ul>
+	</div>
+
+</nav>
 
 @code {
+	private bool isExpanded = false;
 
 	async Task CreateSession()
 	{
@@ -36,4 +81,6 @@
 			navigator.NavigateTo($"play/{sessionId}");
 		}
 	}
+
+	string ExpandedCss => isExpanded ? "expand" : string.Empty;
 }

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;
+	}
 }