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;
+	align-content: baseline;
-	border-right: 2px solid #444;
-	place-items: baseline;
 	gap: 3px;
+	padding: 0 0.5rem;
 }
 
-.NavMenu > * {
+	.NavMenu .spacer {
-	padding: 0 0.5rem !important;
-}
-
-.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;
+	}
 }

Shogi.UI/Pages/Home/HomePage.razor

@@ -34,7 +34,6 @@
 </main>
 
 @code {
-	private bool show = true;
 	private string activeSessionName = string.Empty;
 	private Task OnLoginChanged()
 	{
@@ -46,10 +45,4 @@
 		activeSessionName = s.SessionId.ToString();
 		StateHasChanged();
 	}
-
-	private void OnClickClose()
-	{
-		show = false;
-		StateHasChanged();
-	}
 }

Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css

@@ -125,7 +125,7 @@
 	}
 
 	.board {
-		min-height: 100vmin;
+		min-height: 95vmin;
 	}
 
 	.side-board {

Shogi.UI/wwwroot/css/themes.css

@@ -44,6 +44,7 @@
 			color: var(--hrefColor);
 			padding: 0;
 			font-size: 100%;
+			box-shadow: none;
 		}
 
 			.PrimaryTheme button.href:hover {
@@ -61,11 +62,11 @@
 
 	.PrimaryTheme ul {
 		padding: 0.3rem;
-		margin: 0;
+		margin: 0 !important;
 		margin-bottom: var(--uniformBottomMargin);
-		background-color: var(--foregroundColor);
+		background-color: var(--backgroundColor);
-		color: var(--backgroundColor);
+		color: var(--foregroundColor);
-		list-style-position: inside;
+		list-style: inside square;
 	}