Skip to content

Commit 8890506

Browse files
reakaleekreakaleek
authored
New pages nav experience (#810)
* wip * New pages nav experience * Fix spacing
1 parent fd7ea64 commit 8890506

File tree

6 files changed

+62
-52
lines changed

6 files changed

+62
-52
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,3 +219,8 @@
219219

220220
max-width: 1250px !important;
221221
}
222+
223+
224+
#elastic-nav {
225+
min-height: var(--offset-top);
226+
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
@inherits RazorSlice<LayoutViewModel>
22
<aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-0 top-[calc(var(--offset-top)+1px)] order-1 w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
3-
43
<nav
54
id="pages-nav"
6-
class="sidebar-nav pr-6"
5+
class="sidebar-nav"
76
@* used to invalidate session storage *@
87
data-current-navigation="@LayoutViewModel.CurrentNavigationId">
98
@(new HtmlString(Model.NavigationHtml))
109
</nav>
11-
<label role="button" for="pages-nav-hamburger" class="absolute md:hidden top-4 right-4 bg-white p-1 rounded-full border-1 border-grey-20 cursor-pointer z-99">
10+
<label role="button" for="pages-nav-hamburger" class="absolute md:hidden top-7 -right-12 bg-white p-1 rounded-full border-1 border-grey-20 cursor-pointer z-99">
1211
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
1312
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
1413
</svg>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@inherits RazorSlice<LayoutViewModel>
2-
<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-grey-20">
3-
<nav id="toc-nav" class="sidebar-nav pl-6">
2+
<aside class="sidebar hidden lg:block order-3">
3+
<nav id="toc-nav" class="sidebar-nav pl-4">
44
<div class="pt-6 pb-20">
55
@if (Model.PageTocItems.Count > 0)
66
{
@@ -13,7 +13,7 @@
1313
{
1414
<li class="has-[:hover]:border-l-grey-80 items-center ml-2 pl-4 border-l-1 border-l-grey-20 has-[.current]:border-l-blue-elastic!">
1515
<a
16-
class="sidebar-link inline-block my-1 @(item.Level == 3 ? "ml-4" : string.Empty)"
16+
class="sidebar-link inline-block my-1.5 @(item.Level == 3 ? "ml-4" : string.Empty)"
1717
href="#@item.Slug">
1818
@item.Heading
1919
</a>

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

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,65 @@
11
@using Elastic.Markdown.Helpers
22
@inherits RazorSlice<NavigationViewModel>
3-
<div class="pt-6 pb-20 font-body">
4-
3+
<div class="pb-20 font-body">
54
@{
65
var current = Model.TopLevelItems.FirstOrDefault(i => i.Id == Model.Tree.Id);
76
}
8-
9-
@if (Model.IsPrimaryNavEnabled)
7+
@if (Model.IsPrimaryNavEnabled && current is { Group.Index: not null })
108
{
11-
<details class="block group border-b-1 border-grey-20 pb-8 font-sans">
12-
<summary class="inline-grid md:grid grid-cols-[1fr_auto] cursor-pointer font-semibold gap-2 hover:text-black">
13-
<span>
14-
@current?.Group.Index?.NavigationTitle
15-
</span>
16-
<div class="flex items-center justify-center size-6">
17-
<svg
18-
xmlns="http://www.w3.org/2000/svg"
19-
fill="none"
20-
viewBox="0 0 24 24"
21-
stroke-width="1.5"
22-
stroke="currentColor"
23-
class="w-4 group-open:rotate-180">
24-
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
25-
</svg>
26-
</div>
27-
</summary>
28-
<ul>
29-
@foreach (var item in Model.TopLevelItems)
30-
{
31-
if (item.Group.Index == null) continue;
32-
<li class="block mt-2">
33-
<a
34-
class="hover:underline hover:text-black active:text-blue-elastic-100 font-semibold text-sm @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
35-
href="@item.Group.Index.Url"
36-
hx-get="@item.Group.Index.Url"
37-
hx-select-oob="#pages-nav,#content-container,#toc-nav"
38-
hx-push-url="true"
39-
preload>@item.Group.Index.NavigationTitle</a>
40-
</li>
41-
}
42-
</ul>
43-
</details>
9+
<div class="sticky top-0 py-6 bg-white z-10 border-b-1 border-grey-20 pr-4">
10+
<details class="block group border-1 border-grey-20 rounded-sm font-sans ">
11+
<summary class="grid grid-cols-[1fr_auto] cursor-pointer font-semibold gap-1 hover:text-black pl-4 pr-2 py-2 group-open:border-b-1 border-grey-20">
12+
<span>
13+
<a
14+
class="hover:underline text-blue-elastic hover:text-blue-elastic-100"
15+
href="@current.Group.Index?.Url"
16+
@Htmx.GetHxAttributes(current.Group.Index?.Url!, true)
17+
>
18+
@current.Group.Index?.NavigationTitle
19+
</a>
20+
</span>
21+
<div class="flex items-center justify-center size-6 hover:bg-grey-20 rounded-sm">
22+
<svg
23+
xmlns="http://www.w3.org/2000/svg"
24+
fill="none"
25+
viewBox="0 0 24 24"
26+
stroke-width="1.5"
27+
stroke="currentColor"
28+
class="w-4 group-open:rotate-180">
29+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
30+
</svg>
31+
</div>
32+
</summary>
33+
<ul class="py-2">
34+
@foreach (var item in Model.TopLevelItems)
35+
{
36+
if (item.Group.Index == null) continue;
37+
if (item.Id == current?.Id) continue;
38+
<li class="block">
39+
<a
40+
class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
41+
href="@item.Group.Index.Url"
42+
hx-get="@item.Group.Index.Url"
43+
hx-select-oob="#pages-nav,#content-container,#toc-nav"
44+
hx-push-url="true"
45+
preload>@item.Group.Index.NavigationTitle</a>
46+
</li>
47+
}
48+
</ul>
49+
</details>
50+
</div>
4451
}
4552
else
4653
{
4754
<a
4855
href="@Model.TitleUrl"
4956
@Htmx.GetHxAttributes(Model.TitleUrl, current is null || Model.Tree.Id == current?.Id)
50-
class="font-semibold text-ink hover:text-black">
57+
class="inline-block mx-4 mt-6 font-semibold text-ink hover:text-black">
5158
@Model.Title
5259
</a>
5360
}
54-
55-
56-
<ul class="block">
61+
62+
<ul class="block pl-4">
5763
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
5864
{
5965
IsPrimaryNavEnabled = Model.IsPrimaryNavEnabled,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
if (item is FileNavigation file && Model.SubTree.IndexFileName != file.File.FileName)
1212
{
1313
var f = file.File;
14-
<li class="flex group/li @(item.Depth == topLevelFile ? "font-semibold py-8 not-last:border-b-1 border-grey-20" : "ml-5 lg:ml-4 mt-4 lg:mt-3")">
14+
<li class="flex group/li pr-4 @(item.Depth == topLevelFile ? "font-semibold py-8 pr-4 not-last:border-b-1 border-grey-20" : "ml-5 lg:ml-4 mt-4 lg:mt-3")">
1515
<a
1616
href="@f.Url"
1717
@Htmx.GetHxAttributes(f.Url, Model.IsPrimaryNavEnabled && f.RootNavigation.Id == Model.RootNavigationId || true)
@@ -25,7 +25,7 @@
2525
else if (item is GroupNavigation folder)
2626
{
2727
var g = folder.Group;
28-
<li class="flex flex-wrap group-navigation @(g.Depth == topLevelGroup ? "py-8 not-last:border-b-1 border-grey-20" : "mt-4 lg:mt-3")">
28+
<li class="flex flex-wrap group-navigation @(g.Depth == topLevelGroup ? "py-8 not-last:border-b-1 border-grey-20 pr-4" : "mt-4 lg:mt-3")">
2929
<div class="peer flex items-start gap-1">
3030
<label for="@id" class="group/label">
3131
<svg

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
@functions {
2525
private async Task DefaultLayout()
2626
{
27-
<div class="grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*60)_auto] lg:grid-cols-[1fr_3fr_1fr] gap-4 container">
27+
<div class="container grid gap-2 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_auto] lg:grid-cols-[calc(var(--spacing)*65)_auto_calc(var(--spacing)*50)]">
2828
@await RenderPartialAsync(_PagesNav.Create(Model))
2929
@await RenderPartialAsync(_TableOfContents.Create(Model))
3030
<main id="content-container" class="w-full order-2 relative pb-30 overflow-x-hidden">
@@ -34,10 +34,10 @@
3434
</div>
3535
<div class="sr-only">Loading</div>
3636
</div>
37-
<div class="content-container md:px-6">
37+
<div class="content-container md:px-4">
3838
@await RenderPartialAsync(_Breadcrumbs.Create(Model))
3939
</div>
40-
<article id="markdown-content" class="content-container markdown-content md:px-6">
40+
<article id="markdown-content" class="content-container markdown-content md:px-4">
4141
<input type="checkbox" class="hidden" id="pages-nav-hamburger">
4242
@await RenderBodyAsync()
4343
</article>

0 commit comments

Comments
 (0)