Improved main layout, now fully responsive

Wave/Components/Layout/MainLayout.razor

@@ -1,16 +1,39 @@
 @inherits LayoutComponentBase
 
-<div class="flex flex-col h-screen">
+<div class="drawer md:drawer-open drawer-end">
-	<NavMenu />
+	<input id="main-drawer" type="checkbox" class="drawer-toggle" />
+	<div class="drawer-content">
 
-	<main class="flex-1 container mx-auto px-12 py-8">
+	</div>
-		@Body
+	<div class="drawer-content">
-	</main>
+		<div class="flex flex-col h-screen overflow-x-auto">
+			<header class="md:hidden p-4 flex justify-between bg-base-200">
+				<div class="h-12">
+					<LogoPartial />
+				</div>
+				<label for="main-drawer" class="btn btn-square btn-ghost drawer-button" title="open navigation">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+					</svg>
+				</label>
+			</header>
+			<main class="flex-1 container mx-auto px-12 py-8">
+				@Body
+			</main>
+			<footer class="footer footer-center p-4 bg-base-300 text-base-content">
+				<span class="block">
+					Powered by 
+					<a class="link link-primary" target="_blank" href="https://github.com/miawinter98/Wave">Wave</a>
+				</span>
+			</footer>
+		</div>
+	</div>
+	<div class="drawer-side">
+		<label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
 		
-	<footer class="footer footer-center p-4 bg-base-300 text-base-content">
+		<div class="bg-base-200 p-4 h-full flex flex-col gap-4">
-		<span class="block">
+			<NavMenu />
-			Powered by 
+		</div>
-			<a class="link link-primary" target="_blank" href="https://github.com/miawinter98/Wave">Wave</a>
+	</div>
-		</span>
-	</footer>
 </div>
+

Wave/Components/Layout/NavMenu.razor

@@ -3,80 +3,66 @@
 
 @inject NavigationManager NavigationManager
 
-<header>
+<header class="h-12 hidden md:block">
-	<div class="navbar bg-base-200">
+	<LogoPartial />
-		<div class="navbar-start">
-			<picture class="h-12">
-				<source type="image/jxl" srcset="img/logo.jxl" />
-				<source type="image/webp" srcset="img/logo.webp" />
-				<source type="image/svg+xml" scrset="img/logo.svg" />
-				<img class="max-h-full object-contain object-left" src="img/logo.png" alt="Wave" />
-			</picture>
-		</div>
-		<div class="navbar-center"></div>
-		<div class="navbar-end">
-            <ul class="menu menu-horizontal gap-2">
-                <AuthorizeView>
-                    <Authorized>
-                        <li>
-                            <NavLink ActiveClass="tab-active" href="Account/Manage">
-                                @context.User.Identity?.Name
-                            </NavLink>
-                        </li>
-                        <li>
-                            <form action="Account/Logout" method="post">
-                                <AntiforgeryToken />
-                                <input type="hidden" name="ReturnUrl" value="@_currentUrl" />
-                                <button type="submit" class="flex gap-2">
-                                    Logout
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                                        <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
-                                        <path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd" />
-                                    </svg>
-                                </button>
-                            </form>
-                        </li>
-                    </Authorized>
-                    <NotAuthorized>
-                        <li>
-                            <NavLink href="Account/Login">
-                                Login
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                                    <path fill-rule="evenodd" d="M17 4.25A2.25 2.25 0 0 0 14.75 2h-5.5A2.25 2.25 0 0 0 7 4.25v2a.75.75 0 0 0 1.5 0v-2a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 0-1.5 0v2A2.25 2.25 0 0 0 9.25 18h5.5A2.25 2.25 0 0 0 17 15.75V4.25Z" clip-rule="evenodd" />
-                                    <path fill-rule="evenodd" d="M1 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H1.75A.75.75 0 0 1 1 10Z" clip-rule="evenodd" />
-                                </svg>
-                            </NavLink>
-                        </li>
-                        <li>
-                            <NavLink href="Account/Register">
-                                Register
-                            </NavLink>
-                        </li>
-                    </NotAuthorized>
-                </AuthorizeView>
-            </ul>
-            <AuthorizeView>
-                @if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) {
-                    <div class="w-8">
-                        <ProfilePictureComponent ProfileId="@id" />
-                    </div>
-                }
-            </AuthorizeView>
-		</div>
-	</div>
-	<div class="flex justify-center bg-base-300">
-		<nav class="tabs tabs-bordered">
-            <NavLink ActiveClass="tab-active" class="tab" href="" Match="NavLinkMatch.All">Home</NavLink>
-			<NavLink ActiveClass="tab-active" class="tab" href="weather">Weather</NavLink>
-            <NavLink ActiveClass="tab-active" class="tab" href="auth">Auth Required</NavLink>
-            <AuthorizeView Policy="ArticleEditPermissions">
-                <Authorized>
-                    <NavLink ActiveClass="tab-active" class="tab" href="article/new">New Article</NavLink>
-                </Authorized>
-            </AuthorizeView>
-		</nav>
-	</div>
 </header>                         
+<nav class="flex-1">
+	<ul class="menu">
+		<li><NavLink href="" Match="NavLinkMatch.All">Home</NavLink></li>
+		<li><NavLink href="weather">Weather</NavLink></li>
+		<li><NavLink href="auth">Auth Required</NavLink></li>
+		<AuthorizeView Policy="ArticleEditPermissions">
+			<Authorized>
+				<li><NavLink href="article/new">New Article</NavLink></li>
+			</Authorized>
+		</AuthorizeView>
+	</ul>
+</nav>
+<ul class="menu gap-2">
+    <AuthorizeView>
+        <Authorized>
+            <li class="flex content-center gap-2">
+                <NavLink href="Account/Manage">
+                    @context.User.Identity?.Name
+                    @if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) {
+                        <div class="w-8">
+	                        <ProfilePictureComponent ProfileId="@id" />
+                        </div>
+                    }
+                </NavLink>
+            </li>
+            <li>
+                <form action="Account/Logout" method="post">
+                    <AntiforgeryToken />
+                    <input type="hidden" name="ReturnUrl" value="@_currentUrl" />
+                    <button type="submit" class="flex gap-2">
+                        Logout
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                            <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
+                            <path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd" />
+                        </svg>
+                    </button>
+                </form>
+            </li>
+        </Authorized>
+        <NotAuthorized>
+            <li>
+                <NavLink href="Account/Login">
+                    Login
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                        <path fill-rule="evenodd" d="M17 4.25A2.25 2.25 0 0 0 14.75 2h-5.5A2.25 2.25 0 0 0 7 4.25v2a.75.75 0 0 0 1.5 0v-2a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 0-1.5 0v2A2.25 2.25 0 0 0 9.25 18h5.5A2.25 2.25 0 0 0 17 15.75V4.25Z" clip-rule="evenodd" />
+                        <path fill-rule="evenodd" d="M1 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H1.75A.75.75 0 0 1 1 10Z" clip-rule="evenodd" />
+                    </svg>
+                </NavLink>
+            </li>
+            <li>
+                <NavLink href="Account/Register">
+                    Register
+                </NavLink>
+            </li>
+        </NotAuthorized>
+    </AuthorizeView>
+</ul>
 
 @code {
 	private string? _currentUrl;

Wave/Components/LogoPartial.razor

@@ -0,0 +1,6 @@
+<picture>
+	<source type="image/jxl" srcset="img/logo.jxl" />
+	<source type="image/webp" srcset="img/logo.webp" />
+	<source type="image/svg+xml" scrset="img/logo.svg" />
+	<img class="max-h-full object-contain object-left" src="img/logo.png" alt="Wave" />
+</picture>