Improved main layout, now fully responsive

Wave/Components/Layout/MainLayout.razor

@@ -1,12 +1,25 @@
 @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">
 
+	</div>
+	<div class="drawer-content">
+		<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 
@@ -14,3 +27,13 @@
 				</span>
 			</footer>
 		</div>
+	</div>
+	<div class="drawer-side">
+		<label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+		
+		<div class="bg-base-200 p-4 h-full flex flex-col gap-4">
+			<NavMenu />
+		</div>
+	</div>
+</div>
+

Wave/Components/Layout/NavMenu.razor

@@ -3,24 +3,32 @@
 
 @inject NavigationManager NavigationManager
 
-<header>
+<header class="h-12 hidden md:block">
-	<div class="navbar bg-base-200">
+	<LogoPartial />
-		<div class="navbar-start">
+</header>                         
-			<picture class="h-12">
+<nav class="flex-1">
-				<source type="image/jxl" srcset="img/logo.jxl" />
+	<ul class="menu">
-				<source type="image/webp" srcset="img/logo.webp" />
+		<li><NavLink href="" Match="NavLinkMatch.All">Home</NavLink></li>
-				<source type="image/svg+xml" scrset="img/logo.svg" />
+		<li><NavLink href="weather">Weather</NavLink></li>
-				<img class="max-h-full object-contain object-left" src="img/logo.png" alt="Wave" />
+		<li><NavLink href="auth">Auth Required</NavLink></li>
-			</picture>
+		<AuthorizeView Policy="ArticleEditPermissions">
-		</div>
+			<Authorized>
-		<div class="navbar-center"></div>
+				<li><NavLink href="article/new">New Article</NavLink></li>
-		<div class="navbar-end">
+			</Authorized>
-            <ul class="menu menu-horizontal gap-2">
+		</AuthorizeView>
+	</ul>
+</nav>
+<ul class="menu gap-2">
     <AuthorizeView>
         <Authorized>
-                        <li>
+            <li class="flex content-center gap-2">
-                            <NavLink ActiveClass="tab-active" href="Account/Manage">
+                <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>
@@ -55,28 +63,6 @@
         </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>
 
 @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>