Skip to content

Commit db25447

Browse files
reakaleekreakaleek
committed
Enhance nav
1 parent 447514f commit db25447

File tree

5 files changed

+54
-28
lines changed

5 files changed

+54
-28
lines changed

‎src/Elastic.Markdown/Assets/main.ts‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ type NavState = { [key: string]: boolean };
2222
const PAGE_NAV_STATE_KEY = 'pagesNavState';
2323
const sessionState = JSON.parse(sessionStorage.getItem(PAGE_NAV_STATE_KEY)) as NavState
2424

25-
function keepNavState(element: HTMLElement) {
26-
const inputs = $$('input[type="checkbox"]', element);
25+
function keepNavState(nav: HTMLElement) {
26+
const inputs = $$('input[type="checkbox"]', nav);
2727
if (sessionState) {
2828
inputs.forEach(input => {
2929
const key = input.id;
@@ -35,7 +35,7 @@ function keepNavState(element: HTMLElement) {
3535
});
3636
}
3737
window.addEventListener('beforeunload', () => {
38-
const inputs = $$('input[type="checkbox"]', element);
38+
const inputs = $$('input[type="checkbox"]', nav);
3939
const state: NavState = inputs.reduce((state: NavState, input) => {
4040
const key = input.id;
4141
const value = input.checked;
@@ -48,15 +48,35 @@ function keepNavState(element: HTMLElement) {
4848
const PAGE_NAV_SCROLL_POSITION_KEY = 'pagesNavScrollPosition';
4949
const scrollPosition = sessionStorage.getItem(PAGE_NAV_SCROLL_POSITION_KEY);
5050

51-
function keepNavPosition(element: HTMLElement) {
51+
function keepNavPosition(nav: HTMLElement) {
5252
if (scrollPosition) {
53-
element.scrollTop = parseInt(scrollPosition);
53+
nav.scrollTop = parseInt(scrollPosition);
5454
}
5555
window.addEventListener('beforeunload', () => {
56-
sessionStorage.setItem(PAGE_NAV_SCROLL_POSITION_KEY, element.scrollTop.toString());
56+
sessionStorage.setItem(PAGE_NAV_SCROLL_POSITION_KEY, nav.scrollTop.toString());
5757
});
5858
}
5959

60+
function scrollCurrentNaviItemIntoView(nav: HTMLElement, delay: number) {
61+
setTimeout(() => {
62+
const currentNavItem = $('.current');
63+
if (currentNavItem && !isElementInViewport(currentNavItem)) {
64+
currentNavItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
65+
}
66+
}, delay);
67+
}
68+
function isElementInViewport(el: HTMLElement): boolean {
69+
const rect = el.getBoundingClientRect();
70+
return (
71+
rect.top >= 0 &&
72+
rect.left >= 0 &&
73+
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
74+
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
75+
);
76+
}
77+
78+
6079
const pagesNav = $('#pages-nav');
6180
keepNavPosition(pagesNav);
6281
keepNavState(pagesNav);
82+
scrollCurrentNaviItemIntoView(pagesNav, 100);

‎src/Elastic.Markdown/Assets/styles.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
}
2222

2323
#pages-nav {
24-
scrollbar-gutter: stable;
2524
&::-webkit-scrollbar-track {
2625
background-color: transparent;
2726
}
@@ -35,4 +34,6 @@
3534
&::-webkit-scrollbar-thumb {
3635
border-radius: 4px;
3736
}
37+
38+
scrollbar-gutter: stable;
3839
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
@if (Model.IsRedesign)
44
{
5-
<div class="pt-6 sticky">
5+
<div class="pt-6 pb-20 sticky">
66
<ul class="block w-full">
77
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
88
{

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
{
1010
var f = file.File;
1111
var isCurrent = f == Model.CurrentDocument;
12-
<li class="block pl-4 w-full @(isCurrent ? "current" : string.Empty)">
12+
<li class="block ml-2 pl-2 w-full border-l-1 @(isCurrent ? "current border-l-gray-400" : "border-l-gray")">
1313
<div class="flex">
14-
<div class="w-6">
14+
<div class="w-5">
1515
</div>
1616
<a
17-
class="block py-1 w-full hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) "
17+
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)"
1818
href="@f.Url">
1919
@f.NavigationTitle
2020
</a>
@@ -27,8 +27,9 @@
2727
var isCurrent = g.Index == Model.CurrentDocument;
2828
var slug = g.Index?.Title.Slugify();
2929
const int initialExpandLevel = 1;
30-
var shouldExpand = g.HoldsCurrent(Model.CurrentDocument) || g.Depth <= initialExpandLevel || g.ContainsCurrentPage(Model.CurrentDocument);
31-
<li class="flex flex-wrap pl-4">
30+
var containsCurrent = g.HoldsCurrent(Model.CurrentDocument) || g.ContainsCurrentPage(Model.CurrentDocument);
31+
var shouldInitiallyExpand = containsCurrent || g.Depth <= initialExpandLevel;
32+
<li class="flex flex-wrap ml-2 pl-2 @(g.Depth > 1 ? "border-l-1 border-l-gray" : string.Empty)">
3233
<label for="@slug" class="peer group flex items-center mr-1">
3334
<svg
3435
xmlns="http://www.w3.org/2000/svg"
@@ -44,12 +45,12 @@
4445
type="checkbox"
4546
class="hidden"
4647
aria-hidden="true"
47-
data-should-expand="@shouldExpand.ToLowerString()"
48-
@(shouldExpand ? "checked" : string.Empty)>
48+
data-should-expand="@containsCurrent.ToLowerString()"
49+
@(shouldInitiallyExpand ? "checked" : string.Empty)>
4950
</label>
5051
<a
5152
href="@g.Index?.Url"
52-
class="block py-1 grow hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) ">
53+
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) ">
5354
@g.Index?.NavigationTitle
5455
</a>
5556
@if (g.NavigationItems.Count > 0)

‎src/Elastic.Markdown/Slices/_Layout.cshtml‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<header class="sticky top-0 bg-blue-developer max-w-screen px-6 pb-6 flex items-center justify-center">
1717
<div class="container flex flex-wrap lg:flex-nowrap">
1818
<div class="h-10 mt-6 basis-full lg:basis-auto">
19-
<a href="/">
19+
<a href="@Model.UrlPathPrefix/">
2020
<img src="@Model.Static("logo-elastic-horizontal-color-reverse.svg")" alt="Elastic" class="h-10">
2121
</a>
2222
</div>
@@ -40,33 +40,37 @@
4040
</div>
4141
</header>
4242
<div class="container mx-auto flex">
43-
<aside>
44-
<nav id="pages-nav" class="sticky top-22 z-10 max-h-[calc(100vh-var(--spacing)*22)] overflow-y-auto">
43+
<aside class="hidden lg:block">
44+
<nav id="pages-nav" class="sticky top-22 w-80 z-10 max-h-[calc(100vh-var(--spacing)*22)] overflow-y-auto">
4545
@(new HtmlString(Model.NavigationHtml))
4646
</nav>
4747
</aside>
48-
<main class="markdown-content w-[100ch] max-w-screen pt-6 pb-6 px-6">
48+
<main class="markdown-content w-full max-w-screen pt-6 pb-6 px-6">
4949
<ol class="flex-1 mb-6" itemscope="" itemtype="https://schema.org/BreadcrumbList">
50-
<li class="inline text-gray-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
51-
<a itemprop="item" href="/">
52-
<span itemprop="name">Elastic</span>
50+
<li class="inline text-ink text-sm hover:text-ink leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
51+
<a itemprop="item" href="@Model.UrlPathPrefix/">
52+
<span itemprop="name" class="hover:text-ink">Elastic</span>
5353
</a>
54-
<span>/</span>
5554
<meta itemprop="position" content="1">
5655
</li>
57-
@foreach (var item in Model.Parents.Reverse())
56+
@foreach (var item in Model.Parents.Reverse().Skip(1))
5857
{
59-
<li class="inline text-gray-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
58+
<li class="inline text-gray-500 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
59+
<span class="px-1">/</span>
6060
<a itemprop="item" href="@item.Url">
61-
<span itemprop="name">@item.NavigationTitle</span>
61+
<span itemprop="name" class="hover:text-ink">@item.NavigationTitle</span>
6262
</a>
63-
<span>/</span>
6463
<meta itemprop="position" content="2">
6564
</li>
6665
}
6766
</ol>
6867
@await RenderBodyAsync()
6968
</main>
69+
<aside>
70+
@* <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"> *@
71+
@* @(new HtmlString(Model.NavigationHtml)) *@
72+
@* </nav> *@
73+
</aside>
7074
</div>
7175
<script src="@Model.Static("main.js")"></script>
7276
</body>

0 commit comments

Comments
 (0)