Fine tuning

Author: reakaleek

src/Elastic.Markdown/Assets/main.ts

@@ -18,42 +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
+type NavExpandState = { [key: string]: boolean };
+const PAGE_NAV_EXPAND_STATE_KEY = 'pagesNavState';
+const navState = JSON.parse(localStorage.getItem(PAGE_NAV_EXPAND_STATE_KEY)) as NavExpandState
 
 function keepNavState(nav: HTMLElement) {
     const inputs = $$('input[type="checkbox"]', nav);
-    if (sessionState) {
+    if (navState) {
         inputs.forEach(input => {
             const key = input.id;
 			if (input.dataset['shouldExpand'] === 'true') {
 				input.checked = true;
 			} else {
-				input.checked = sessionState[key];
+				input.checked = navState[key];
 			}
         });
     }
     window.addEventListener('beforeunload', () => {
 		const inputs = $$('input[type="checkbox"]', nav);
-		const state: NavState = inputs.reduce((state: NavState, input) => {
+		const state: NavExpandState = inputs.reduce((state: NavExpandState, input) => {
             const key = input.id;
             const value = input.checked;
             return { ...state, [key]: value};
         }, {});
-        sessionStorage.setItem(PAGE_NAV_STATE_KEY, JSON.stringify(state));
+		localStorage.setItem(PAGE_NAV_EXPAND_STATE_KEY, JSON.stringify(state));
     });
 }
 
+type NavScrollPosition = number;
 const PAGE_NAV_SCROLL_POSITION_KEY = 'pagesNavScrollPosition';
-const scrollPosition = sessionStorage.getItem(PAGE_NAV_SCROLL_POSITION_KEY);
+const pagesNavScrollPosition: NavScrollPosition = parseInt(
+	localStorage.getItem(PAGE_NAV_SCROLL_POSITION_KEY)
+);
 
 function keepNavPosition(nav: HTMLElement) {
-    if (scrollPosition) {
-        nav.scrollTop = parseInt(scrollPosition);
+	if (pagesNavScrollPosition) {
+        nav.scrollTop = pagesNavScrollPosition;
     }
     window.addEventListener('beforeunload', () => {
-        sessionStorage.setItem(PAGE_NAV_SCROLL_POSITION_KEY, nav.scrollTop.toString());
+		localStorage.setItem(PAGE_NAV_SCROLL_POSITION_KEY, nav.scrollTop.toString());
     });
 }
 
@@ -75,8 +78,8 @@ function isElementInViewport(el: HTMLElement): boolean {
 	);
 }
 
-
 const pagesNav = $('#pages-nav');
-keepNavPosition(pagesNav);
 keepNavState(pagesNav);
+keepNavPosition(pagesNav);
+pagesNav.style.opacity = '1';
 scrollCurrentNaviItemIntoView(pagesNav, 100);

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

@@ -2,7 +2,7 @@
 
 @if (Model.IsRedesign)
 {
-	<div class="pt-6 pb-20 sticky">
+	<div class="pt-6 pb-20">
 		<ul class="block w-full">
 			@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
 			{

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

@@ -14,7 +14,7 @@
 					<div class="w-5">
 					</div>
 					<a
-						class="block w-full py-1 text-sm leading-[1.2em] tracking-[-0.02em] hover:font-semibold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty)"
+						class="block py-1 text-sm leading-[1.2em] tracking-[-0.02em] hover:text-ink-dark @(isCurrent ? "text-blue-elastic!" : string.Empty)"
 						href="@f.Url">
 						@f.NavigationTitle
 					</a>
@@ -50,7 +50,7 @@
 				</label>
 				<a
 					href="@g.Index?.Url"
-					class="block py-1 grow text-sm leading-[1.2em] tracking-[-0.02em] hover:font-semibold @(isCurrent ? "current font-bold text-blue-elastic" : string.Empty) ">
+					class="block py-1 text-sm leading-[1.2em] tracking-[-0.02em] hover:text-ink-dark @(containsCurrent && g.Depth == 1 ? "font-bold" : string.Empty) @(isCurrent ? "current text-blue-elastic!" : string.Empty) ">
 					@g.Index?.NavigationTitle
 				</a>
 				@if (g.NavigationItems.Count > 0)

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -70,6 +70,7 @@
 			@* <nav id="pages-nav-2" class="sticky top-22 w-60 overflow-x-hidden z-10 max-h-[calc(100vh-var(--spacing)*22)] overflow-y-auto"> *@
 			@* 	@(new HtmlString(Model.NavigationHtml)) *@
 			@* </nav> *@
+			hello
 		</aside>
 	</div>
 	<script src="@Model.Static("main.js")"></script>