diff --git a/doc/style.css b/doc/style.css index 96b6979474db..c3c58e88637d 100644 --- a/doc/style.css +++ b/doc/style.css @@ -34,7 +34,7 @@ body { } } -.book .list-of-examples { +.list-of-examples { display: none; } @@ -392,8 +392,7 @@ div.appendix .toc dt { margin-top: 0; } -div.book .list-of-examples dt, -div.appendix .list-of-examples dt { +.list-of-examples dt { margin-top: 0; } @@ -450,6 +449,7 @@ div.appendix .variablelist .term { } :root { + --sidebar-width: 20rem; --background: #fff; --main-text-color: #000; --link-color: #405d99; @@ -496,3 +496,68 @@ div.appendix .variablelist .term { .chapter { content-visibility: auto; } + +.navheader { + position: sticky; + top: 0; + z-index: 1; + background-color: var(--background); +} + +nav.toc-sidebar { + height: 100%; + overflow-y: none; + padding: 0 1rem 2rem; + border-bottom: 0.0625rem solid #d8d8d8; +} + +nav.toc-sidebar .toc { + margin-bottom: 0; +} + +nav.toc-sidebar .toc dl { + margin: 0; +} + +nav.toc-sidebar .toc dd { + margin-left: 1em; +} + +@media screen and (min-width: 768px) { + body { + height: 100vh; + min-height: 0; + display: grid; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: auto minmax(0, 1fr); + } + + body:has(> nav.toc-sidebar) { + grid-template-columns: var(--sidebar-width) minmax(0, 1fr); + } + + .navheader { + grid-column: 1 / -1; + grid-row: 1; + } + + nav.toc-sidebar { + grid-column: 1; + grid-row: 2; + max-height: none; + overflow-y: auto; + border-bottom: none; + border-right: 0.0625rem solid #d8d8d8; + } + + main.content { + grid-column: 1 / -1; + grid-row: 2; + overflow-y: auto; + padding: 0 1rem; + } + + body:has(> nav.toc-sidebar) main.content { + grid-column: 2; + } +} diff --git a/pkgs/by-name/ni/nixos-render-docs/src/nixos_render_docs/manual.py b/pkgs/by-name/ni/nixos-render-docs/src/nixos_render_docs/manual.py index 5b3c30ee1da4..9208148c594b 100644 --- a/pkgs/by-name/ni/nixos-render-docs/src/nixos_render_docs/manual.py +++ b/pkgs/by-name/ni/nixos-render-docs/src/nixos_render_docs/manual.py @@ -307,7 +307,7 @@ class ManualHTMLRenderer(RendererMixin, HTMLRenderer): toc = TocEntry.of(tokens[0]) return "\n".join([ - self._file_header(toc), + self._file_header(toc, sidebar=self._build_toc(tokens, 0)), '
', '
', '
', @@ -316,13 +316,12 @@ class ManualHTMLRenderer(RendererMixin, HTMLRenderer): '
', "
", '
', - self._build_toc(tokens, 0), super(HTMLRenderer, self).render(tokens[6:]), '
', self._file_footer(toc), ]) - def _file_header(self, toc: TocEntry) -> str: + def _file_header(self, toc: TocEntry, sidebar: str = "") -> str: prev_link, up_link, next_link = "", "", "" prev_a, next_a, parent_title = "", "", " " nav_html = "" @@ -384,6 +383,8 @@ class ManualHTMLRenderer(RendererMixin, HTMLRenderer): ' ', ' ', nav_html, + f' ' if sidebar else "", + '
', ]) def _file_footer(self, toc: TocEntry) -> str: @@ -424,6 +425,7 @@ class ManualHTMLRenderer(RendererMixin, HTMLRenderer): ]) return "\n".join([ nav_html, + '
', ' ', '', ])