Skip to content

Commit f050e84

Browse files
authored
Fix navigation (#697)
* Fix navigation * Fine tune
1 parent de662b5 commit f050e84

File tree

3 files changed

+41
-28
lines changed

3 files changed

+41
-28
lines changed

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,14 @@
2929
{
3030
<a
3131
onclick="document.getElementById('primary-nav-hamburger').checked = false"
32-
@navItem.HtmxAttributes
33-
hx-target="#main-container"
34-
class="grow p-6 xl:p-0 peer text-nowrap font-semibold flex justify-between items-center gap-1 hover:text-blue-elastic" href="@navItem.Url">
32+
href="@navItem.Url"
33+
hx-get="@navItem.Url"
34+
hx-swap="none"
35+
hx-select-oob="#primary-nav,#secondary-nav,#main-container"
36+
hx-push-url="true"
37+
preload="true"
38+
class="grow p-6 xl:p-0 peer text-nowrap font-semibold flex justify-between items-center gap-1 hover:text-blue-elastic"
39+
>
3540
@navItem.Title
3641
@if (navItem.DropdownItems.Count > 0)
3742
{

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
</div>
88
}
99
<a onclick="document.getElementById('primary-nav-hamburger').checked = false"
10-
href="@Model.Url" class="hover:underline" @Model.HtmxAttributes>
10+
href="@Model.Url" class="hover:underline"
11+
hx-get="@Model.Url"
12+
hx-swap="none"
13+
hx-select-oob="#primary-nav,#secondary-nav,#main-container"
14+
hx-push-url="true"
15+
preload="true"
16+
>
1117
<strong class="font-semibold">@Model.Title</strong>
1218
<p class="text-sm text-ink-light">@Model.Description</p>
1319
</a>

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

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22
@using Elastic.Markdown.IO.Navigation
33
@inherits RazorSlice<NavigationTreeItem>
44
@{
5-
var topLevel = Model.IsRoot ? 1 : 2;
5+
var topLevelGroup = Model.IsRoot ? 1 : 2;
6+
var topLevelFile = Model.IsRoot ? 0 : 1;
67
}
78
@foreach (var item in Model.SubTree.NavigationItems)
89
{
910
var id = item.Id;
1011
if (item is FileNavigation file)
1112
{
1213
var f = file.File;
13-
<li class="block group/li mt-4 lg:mt-1 ml-4">
14+
<li class="flex group/li @(item.Depth == topLevelFile ? "font-semibold py-6 not-last:border-b-1 border-grey-20" : "ml-5 lg:ml-4 mt-4 lg:mt-3")">
1415
<a
1516
hx-get="@f.Url"
1617
hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.CurrentDocument.UrlPathPrefix, Model.CurrentDocument.Url, f.Url)"
@@ -34,37 +35,38 @@
3435
var g = folder.Group;
3536
// const int initialExpandLevel = 3;
3637
// var shouldInitiallyExpand = g.Depth <= initialExpandLevel;
37-
<li class="flex flex-wrap group-navigation @(g.Depth == topLevel ? "mt-6 lg:mt-4" : "mt-4 lg:mt-2")">
38-
<label for="@id" class="peer group/label flex items-start">
39-
<svg
40-
xmlns="http://www.w3.org/2000/svg"
41-
fill="none"
42-
viewBox="0 0 24 24"
43-
stroke-width="1.5"
44-
stroke="currentColor"
45-
width="12"
46-
class="w-3 mr-1 mt-[5px] lg:mt-[3px] shrink-0 -rotate-90 group-has-checked/label:rotate-0 cursor-pointer @(g.Depth == topLevel ? "hidden" : "")">
47-
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
48-
</svg>
49-
<input
50-
id="@id"
51-
type="checkbox"
52-
class="hidden"
53-
aria-hidden="true"
54-
@(g.Depth <= topLevel ? "checked" : "")
55-
@(g.Depth <= topLevel ? "disabled" : "")
38+
<li class="flex flex-wrap group-navigation @(g.Depth == topLevelGroup ? "py-6 not-last:border-b-1 border-grey-20" : "mt-4 lg:mt-3")">
39+
<div class="peer flex items-start gap-1">
40+
<label for="@id" class="group/label">
41+
<svg
42+
xmlns="http://www.w3.org/2000/svg"
43+
fill="none"
44+
viewBox="0 0 24 24"
45+
stroke-width="1.5"
46+
stroke="currentColor"
47+
class="w-3 mt-[3px] shrink-0 -rotate-90 group-has-checked/label:rotate-0 cursor-pointer @(g.Depth == topLevelGroup ? "hidden" : "")">
48+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
49+
</svg>
50+
<input
51+
id="@id"
52+
type="checkbox"
53+
class="hidden"
54+
aria-hidden="true"
55+
@(g.Depth <= topLevelGroup ? "checked" : "")
56+
@(g.Depth <= topLevelGroup ? "disabled" : "")
5657
>
58+
</label>
5759
<a
5860
href="@(g.Index?.Url ?? "")"
5961
@Htmx.GetHxAttributes(Model.Features, Model.CurrentDocument.UrlPathPrefix, Model.CurrentDocument.Url, g.Index?.Url ?? "")
6062
id="page-@(g.Index?.Id ?? id)"
61-
class="sidebar-link @(g.Depth == topLevel ? "font-semibold mt-2 mb-1" : "")">
63+
class="sidebar-link @(g.Depth == topLevelGroup ? "font-semibold mb-1" : "")">
6264
@(g.Index?.NavigationTitle ?? "Untitled")
6365
</a>
64-
</label>
66+
</div>
6567
@if (g.NavigationItems.Count > 0)
6668
{
67-
<ul class="w-full hidden peer-has-checked:block peer-has-[:focus]:block focus-within:block @(g.Depth > topLevel ? "ml-4": "")">
69+
<ul class="w-full hidden peer-has-checked:block @(g.Depth > topLevelGroup ? "ml-4": "")">
6870
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
6971
{
7072
Features = Model.Features,

0 commit comments

Comments
 (0)