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