ok

src/Elastic.Markdown/Assets/fonts.css

@@ -1,22 +1,26 @@
 @font-face {
 	font-family: "Inter";
 	src: url("./fonts/InterVariable.woff2") format("woff2");
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Mier B";
 	src: url("./fonts/MierB-Regular.woff2") format("woff2");
 	font-weight: normal;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Mier B";
 	src: url("./fonts/MierB-Bold.woff2") format("woff2");
 	font-weight: bold;
+	font-display: swap;
 }
 
 @font-face {
 	font-family: "Mier B";
 	src: url("./fonts/MierB-Demi.woff2") format("woff2");
 	font-weight: 600;
+	font-display: swap;
 }

src/Elastic.Markdown/Assets/main.ts

@@ -18,40 +18,45 @@ hljs.registerLanguage('apiheader', function() {
 hljs.addPlugin(mergeHTMLPlugin);
 hljs.highlightAll();
 
-
 type NavState = { [key: string]: boolean };
-
+const PAGE_NAV_STATE_KEY = 'pagesNavState';
+const sessionState = JSON.parse(sessionStorage.getItem(PAGE_NAV_STATE_KEY)) as NavState
 
 function keepNavState(element: HTMLElement) {
     const inputs = $$('input[type="checkbox"]', element);
-    const sessionState = JSON.parse(sessionStorage.getItem('pagesNavState')) as NavState
     if (sessionState) {
         inputs.forEach(input => {
             const key = input.id;
-            input.checked = input.checked || sessionState[key];
+			if (input.dataset['shouldExpand'] === 'true') {
+				input.checked = true;
+			} else {
+				input.checked = sessionState[key];
+			}
         });
     }
     window.addEventListener('beforeunload', () => {
-        const state = inputs.reduce((state: NavState, input) => {
+		const inputs = $$('input[type="checkbox"]', element);
+		const state: NavState = inputs.reduce((state: NavState, input) => {
             const key = input.id;
             const value = input.checked;
             return { ...state, [key]: value};
         }, {});
-        sessionStorage.setItem('pagesNavState', JSON.stringify(state));
+        sessionStorage.setItem(PAGE_NAV_STATE_KEY, JSON.stringify(state));
     });
 }
 
+const PAGE_NAV_SCROLL_POSITION_KEY = 'pagesNavScrollPosition';
+const scrollPosition = sessionStorage.getItem(PAGE_NAV_SCROLL_POSITION_KEY);
+
 function keepNavPosition(element: HTMLElement) {
-    const scrollPosition = sessionStorage.getItem('pagesNavScrollPosition');
     if (scrollPosition) {
         element.scrollTop = parseInt(scrollPosition);
     }
     window.addEventListener('beforeunload', () => {
-        sessionStorage.setItem('pagesNavScrollPosition', element.scrollTop.toString());
+        sessionStorage.setItem(PAGE_NAV_SCROLL_POSITION_KEY, element.scrollTop.toString());
     });
 }
 
 const pagesNav = $('#pages-nav');
-
-keepNavState(pagesNav);
 keepNavPosition(pagesNav);
+keepNavState(pagesNav);

src/Elastic.Markdown/Assets/styles.css

@@ -5,6 +5,10 @@
 @import "highlight.js/styles/atom-one-dark.css";
 @import "./markdown/typography.css";
 
+:root {
+	interpolate-size: allow-keywords;
+}
+
 #default-search::-webkit-search-cancel-button {
 	@apply pr-2;
 	-webkit-appearance: none;

src/Elastic.Markdown/Helpers/BoolExtensions.cs

@@ -0,0 +1,10 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+namespace Elastic.Markdown.Helpers;
+
+public static class BoolExtensions
+{
+	public static string ToLowerString(this bool @bool) => @bool.ToString().ToLowerInvariant();
+}

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

@@ -1,3 +1,4 @@
+@using Elastic.Markdown.Helpers
 @using Elastic.Markdown.IO.Navigation
 @inherits RazorSlice<NavigationTreeItem>
 @if (Model.IsRedesign)
@@ -8,51 +9,52 @@
 		{
 			var f = file.File;
 			var isCurrent = f == Model.CurrentDocument;
-			<li class="block pl-6 pb-2 w-full @(isCurrent ? "current" : string.Empty)">
+			<li class="block pl-4 w-full @(isCurrent ? "current" : string.Empty)">
 				<div class="flex">
 					<div class="w-6">
 					</div>
 					<a
-						class="block w-full hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) "
+						class="block py-1 w-full hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) "
 						href="@f.Url">
 						@f.NavigationTitle
 					</a>
 				</div>
-
 			</li>
 		}
 		else if (item is GroupNavigation folder)
 		{
 			var g = folder.Group;
 			var isCurrent = g.Index == Model.CurrentDocument;
+			var slug = g.Index?.Title.Slugify();
 			const int initialExpandLevel = 1;
 			var shouldExpand = g.HoldsCurrent(Model.CurrentDocument) || g.Depth <= initialExpandLevel || g.ContainsCurrentPage(Model.CurrentDocument);
-			<li class="block pl-6 pb-2">
-				<div class="flex items-center">
-					<div class="w-6">
-						@if (g.NavigationItems.Count > 0)
-						{
-							<label for="@g.Index?.Title">
-								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 cursor-pointer">
-									<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
-								</svg>
-							</label>
-						}
-					</div>
-					<a
-						href="@g.Index?.Url"
-						class="block w-full hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) ">
-						@g.Index?.NavigationTitle
-					</a>
-				</div>
-				<input 
-					id="@g.Index?.Title" 
-					type="checkbox"
-					class="peer hidden" 
-					@(shouldExpand ? "checked" : string.Empty)>
+			<li class="flex flex-wrap pl-4">
+				<label for="@slug" class="peer group flex items-center mr-1">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="w-4 shrink -rotate-90 group-has-checked:rotate-0 cursor-pointer">
+						<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
+					</svg>
+					<input
+						id="@slug"
+						type="checkbox"
+						class="hidden"
+						aria-hidden="true"
+						data-should-expand="@shouldExpand.ToLowerString()"
+						@(shouldExpand ? "checked" : string.Empty)>
+				</label>
+				<a
+					href="@g.Index?.Url"
+					class="block py-1 grow hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) ">
+					@g.Index?.NavigationTitle
+				</a>
 				@if (g.NavigationItems.Count > 0)
 				{
-					<ul class="h-0 peer-checked:h-auto w-full overflow-hidden mt-2" data-has-current="@g.ContainsCurrentPage(Model.CurrentDocument)">
+					<ul class="h-0 grow overflow-hidden peer-has-checked:h-auto w-full overflow-hidden" data-has-current="@g.ContainsCurrentPage(Model.CurrentDocument)">
 						@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
 						{
 							Level = g.Depth,

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -12,11 +12,13 @@
 	</head>
 
 	<body class="text-ink">
-	<section class="h-9 bg-black"></section>
+	@* <section class="h-9 bg-black"></section> *@
 	<header class="sticky top-0 bg-blue-developer max-w-screen px-6 pb-6 flex items-center justify-center">
 		<div class="container flex flex-wrap lg:flex-nowrap">
 			<div class="h-10 mt-6 basis-full lg:basis-auto">
-				<img src="@Model.Static("logo-elastic-horizontal-color-reverse.svg")" alt="Elastic" class="h-10">
+				<a href="/">
+					<img src="@Model.Static("logo-elastic-horizontal-color-reverse.svg")" alt="Elastic" class="h-10">
+				</a>
 			</div>
 			<form role="search" class="hidden lg:block grow basis-full lg:basis-auto shrink-0 mt-6 lg:mx-10 h-10" autocomplete="off">
 				<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>