diff --git a/examples/ShellDocs.Preview/Components/Pages/DocsPage.razor b/examples/ShellDocs.Preview/Components/Pages/DocsPage.razor index 441cf15..482595d 100644 --- a/examples/ShellDocs.Preview/Components/Pages/DocsPage.razor +++ b/examples/ShellDocs.Preview/Components/Pages/DocsPage.razor @@ -1,6 +1,5 @@ @page "/docs/{*Path:nonfile}" @layout DocsLayout -@using Microsoft.AspNetCore.Components.Sections @inject NavigationGraph Graph @inject MarkdownRenderer Renderer @@ -9,11 +8,6 @@ @if (_document is not null) { - - - - - } else { @@ -35,8 +29,6 @@ else private RenderedDocument? _document; private string _title = ""; - private NavigationNode? _prev; - private NavigationNode? _next; protected override void OnParametersSet() { @@ -46,14 +38,11 @@ else { _document = Renderer.RenderFile(node.Path); _title = node.Title + " — ShellDocs"; - (_prev, _next) = Graph.GetPrevNext(node); } else { _document = null; _title = "Not found — ShellDocs"; - _prev = null; - _next = null; } } } diff --git a/src/ShellDocs.Components/Chrome/DocsBreadcrumb.razor b/src/ShellDocs.Components/Chrome/DocsBreadcrumb.razor new file mode 100644 index 0000000..9dcb11b --- /dev/null +++ b/src/ShellDocs.Components/Chrome/DocsBreadcrumb.razor @@ -0,0 +1,40 @@ +@inject DocsPageState PageState +@implements IDisposable +@using ShellDocs.Core + +@if (PageState.Breadcrumbs.Count > 1) +{ + +} + +@code { + protected override void OnInitialized() => PageState.OnChange += Rerender; + private void Rerender() => InvokeAsync(StateHasChanged); + public void Dispose() => PageState.OnChange -= Rerender; +} diff --git a/src/ShellDocs.Components/Chrome/DocsBreadcrumb.razor.css b/src/ShellDocs.Components/Chrome/DocsBreadcrumb.razor.css new file mode 100644 index 0000000..9639377 --- /dev/null +++ b/src/ShellDocs.Components/Chrome/DocsBreadcrumb.razor.css @@ -0,0 +1,40 @@ +.docs-breadcrumb { + margin: 0 0 1.25rem; + font-size: 0.8125rem; + color: var(--muted-foreground); +} + +.docs-breadcrumb-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.25rem; +} + +.docs-breadcrumb-item { + display: inline-flex; + align-items: center; + gap: 0.25rem; +} + +.docs-breadcrumb-link, +.docs-breadcrumb-section { + color: var(--muted-foreground); + text-decoration: none; + transition: color 150ms; +} +.docs-breadcrumb-link:hover { color: var(--foreground); } + +.docs-breadcrumb-current { + color: var(--foreground); + font-weight: 500; +} + +.docs-breadcrumb-sep { + width: 0.75rem; + height: 0.75rem; + opacity: 0.6; +} diff --git a/src/ShellDocs.Components/Chrome/PrevNextNav.razor b/src/ShellDocs.Components/Chrome/PrevNextNav.razor index 5f326d1..b7838a0 100644 --- a/src/ShellDocs.Components/Chrome/PrevNextNav.razor +++ b/src/ShellDocs.Components/Chrome/PrevNextNav.razor @@ -1,33 +1,40 @@ +@inject DocsPageState PageState +@implements IDisposable @using ShellDocs.Core -@if (Prev is not null || Next is not null) +@{ + var prev = Prev ?? PageState.Prev; + var next = Next ?? PageState.Next; +} + +@if (prev is not null || next is not null) {