|
2 | 2 | @using Elastic.Markdown.IO.Navigation
|
3 | 3 | @inherits RazorSlice<NavigationTreeItem>
|
4 | 4 | @{
|
5 |
| - var topLevel = Model.IsRoot ? 1 : 2; |
| 5 | + var topLevelGroup = Model.IsRoot ? 1 : 2; |
| 6 | + var topLevelFile = Model.IsRoot ? 0 : 1; |
6 | 7 | }
|
7 | 8 | @foreach (var item in Model.SubTree.NavigationItems)
|
8 | 9 | {
|
9 | 10 | var id = item.Id;
|
10 | 11 | if (item is FileNavigation file)
|
11 | 12 | {
|
12 | 13 | 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")"> |
14 | 15 | <a
|
15 | 16 | hx-get="@f.Url"
|
16 | 17 | hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.CurrentDocument.UrlPathPrefix, Model.CurrentDocument.Url, f.Url)"
|
|
34 | 35 | var g = folder.Group;
|
35 | 36 | // const int initialExpandLevel = 3;
|
36 | 37 | // 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" : "") |
56 | 57 | >
|
| 58 | + </label> |
57 | 59 | <a
|
58 | 60 | href="@(g.Index?.Url ?? "")"
|
59 | 61 | @Htmx.GetHxAttributes(Model.Features, Model.CurrentDocument.UrlPathPrefix, Model.CurrentDocument.Url, g.Index?.Url ?? "")
|
60 | 62 | 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" : "")"> |
62 | 64 | @(g.Index?.NavigationTitle ?? "Untitled")
|
63 | 65 | </a>
|
64 |
| - </label> |
| 66 | + </div> |
65 | 67 | @if (g.NavigationItems.Count > 0)
|
66 | 68 | {
|
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": "")"> |
68 | 70 | @await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
|
69 | 71 | {
|
70 | 72 | Features = Model.Features,
|
|
0 commit comments