Show some right sidebar buttons on mobile

Author: reakaleek

src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml

@@ -1,6 +1,6 @@
 @inherits RazorSlice<MarkdownLayoutViewModel>
-<aside class="sidebar hidden lg:block max-w-65 md:hidden">
-	<nav id="toc-nav" class="sidebar-nav h-full">
+<aside class="sidebar md:block w-full lg:max-w-65 md:order-2 px-6 md:px-10 lg:px-0">
+	<nav id="toc-nav" class="sidebar-nav lg:h-full flex flex-row-reverse lg:block items-center gap-4">
 		@if (Model.Features.VersionDropdownEnabled)
 		{
 			<div class="mt-6">
@@ -96,22 +96,19 @@
 			</div>
 		</div>
 		}
-		<ul class="mt-6">
+		<ul class="mt-6 hidden md:flex items-center lg:block gap-4">
 
 			@if (Model.GithubEditUrl is not null)
 			{
-				<li class="edit-this-page not-first:mt-1">
+				<li class="edit-this-page lg:not-first:mt-1">
 					<a href="@Model.GithubEditUrl" class="link text-sm" target="_blank">
-
-
 						<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
 							<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/>
 						</svg>
-
 						Edit this page
 					</a>
 				</li>
-				<li class="report-an-issue not-first:mt-1">
+				<li class="report-an-issue lg:not-first:mt-1">
 					<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
 						<svg class="link-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
 							<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
@@ -121,7 +118,7 @@
 				</li>
 			}
 		</ul>
-		<div class="pt-6">
+		<div class="pt-6 hidden lg:block">
 			@if (Model.PageTocItems.Count > 0)
 			{
 				<div>

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -34,34 +34,37 @@
 		<div class="max-w-(--max-layout-width) w-full h-full grid
 					grid-cols-1
 					md:grid-cols-[var(--max-sidebar-width)_1fr]
-					lg:grid-cols-[var(--max-sidebar-width)_1fr_var(--max-sidebar-width)]
+					lg:grid-cols-[var(--max-sidebar-width)_1fr]
 				">
 			@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
-			<div class="justify-center grid
-					grid-cols-1
-					px-6 lg:px-0
-					lg:grid-cols-[1fr_var(--max-text-width)_1fr]
-					">
-				<div class="spacer"></div>
-				<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">
-					<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
-						<div class="h-[2px] w-full overflow-hidden">
-							<div class="progress w-full h-full bg-pink-70 left-right"></div>
+			<div class="lg:grid lg:grid-cols-[1fr_var(--max-sidebar-width)]">
+				@await RenderPartialAsync(_TableOfContents.Create(Model))
+				<div class="justify-center grid
+						grid-cols-1
+						px-6 lg:px-0
+						lg:grid-cols-[1fr_var(--max-text-width)_1fr]
+						lg:order-1
+						">
+					<div class="spacer"></div>
+					<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">
+						<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
+							<div class="h-[2px] w-full overflow-hidden">
+								<div class="progress w-full h-full bg-pink-70 left-right"></div>
+							</div>
+							<div class="sr-only">Loading</div>
+						</div>
+						<div class="content-container md:px-4">
+							@await RenderPartialAsync(_Breadcrumbs.Create(Model))
 						</div>
-						<div class="sr-only">Loading</div>
-					</div>
-					<div class="content-container md:px-4">
-						@await RenderPartialAsync(_Breadcrumbs.Create(Model))
-					</div>
-					<article id="markdown-content" class="content-container markdown-content md:px-4">
-						<input type="checkbox" class="hidden" id="pages-nav-hamburger">
-						@await RenderBodyAsync()
-					</article>
-					@await RenderPartialAsync(_PrevNextNav.Create(Model))
-				</main>
-				<div class="spacer"></div>
+						<article id="markdown-content" class="content-container markdown-content md:px-4">
+							<input type="checkbox" class="hidden" id="pages-nav-hamburger">
+							@await RenderBodyAsync()
+						</article>
+						@await RenderPartialAsync(_PrevNextNav.Create(Model))
+					</main>
+					<div class="spacer"></div>
+				</div>
 			</div>
-			@await RenderPartialAsync(_TableOfContents.Create(Model))
 		</div>
 	}
 }