From 57e15cd9a4fb11e02fcc55be714f3628d3687cff Mon Sep 17 00:00:00 2001 From: Zoom Date: Mon, 23 Mar 2026 15:31:51 +0400 Subject: [PATCH] nimdoc: Add a nav-burger to display the panel on mobile (#25606) Small changes to the default html template and the `nimdoc.css`. Adds a burger button to show the navigation panel when on narrow screens/mobile. Displayed when the panel gets hidden. Second element click or click on the dimmed background ides the panel. # Demo: ![burger-action](https://github.com/user-attachments/assets/a10bd626-95a1-4a04-80bb-c159c85ac1a7) --- config/nimdoc.cfg | 3 + doc/nimdoc.css | 64 ++++++++++++++++++- .../extlinks/project/expected/_._/util.html | 3 + .../extlinks/project/expected/doc/manual.html | 3 + nimdoc/extlinks/project/expected/main.html | 3 + .../project/expected/sub/submodule.html | 3 + .../extlinks/project/expected/theindex.html | 3 + nimdoc/rst2html/expected/rst_examples.html | 3 + .../test_doctype/expected/test_doctype.html | 3 + .../expected/index.html | 3 + .../expected/theindex.html | 3 + nimdoc/testproject/expected/nimdoc.out.css | 64 ++++++++++++++++++- .../expected/subdir/subdir_b/utils.html | 3 + nimdoc/testproject/expected/testproject.html | 3 + nimdoc/testproject/expected/theindex.html | 3 + 15 files changed, 163 insertions(+), 4 deletions(-) diff --git a/config/nimdoc.cfg b/config/nimdoc.cfg index 99751f79df..4f608bc4f1 100644 --- a/config/nimdoc.cfg +++ b/config/nimdoc.cfg @@ -248,6 +248,9 @@ doc.file = """
+ + +

$title

$subtitle $content diff --git a/doc/nimdoc.css b/doc/nimdoc.css index 893395d248..ff77a51cb8 100644 --- a/doc/nimdoc.css +++ b/doc/nimdoc.css @@ -155,7 +155,8 @@ body { margin-left: 1%; } @media print { - #global-links, .link-seesrc, .theme-switch-wrapper, #searchInputDiv, .search-groupby { + #global-links, .link-seesrc, .theme-switch-wrapper, #searchInputDiv, .search-groupby, + #nav-burger, #nav-overlay, .three.columns { display:none; } .columns { @@ -174,6 +175,7 @@ body { height: 100vh; position: sticky; top: 0px; + left: 0px; overflow-y: auto; padding: 2px; } @@ -187,9 +189,67 @@ body { width: 100%; margin-left: 0; } +#nav-burger, #nav-overlay { + display: none; +} + @media screen and (max-width: 860px) { + #nav-burger { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: 0.25em; + left: 0.25em; + z-index: 200; + width: 1.6rem; + height: 1.6rem; + font-size: 1.25em; + cursor: pointer; + border-radius: 4px; + background-color: var(--secondary-background); + color: var(--text); + border: 1px solid var(--border); + user-select: none; + opacity: 0.55; + } + #nav-burger:hover { + background-color: var(--third-background); + } + #nav-toggle:checked ~ .container .three.columns { + transform: translateX(0); + } + #nav-toggle:checked ~ #nav-overlay { + opacity: 1; + pointer-events: auto; + } + #nav-overlay { + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 99; /* below sidebar */ + background: rgba(0, 0, 0, 0.35); + opacity: 0; + pointer-events: none; + transition: opacity 0.22s ease; + } .three.columns { - display: none; + display: block; + position: fixed; + left: 0; + width: min(80vw, 24em); + padding-top: 1.6em; + height: 100vh; /* Fallback */ + height: 100dvh; + overflow-y: auto; + z-index: 100; + background-color: var(--secondary-background); + box-shadow: 2px 0 12px rgba(0,0,0,0.25); + transform: translateX(-110%); + transition: transform 0.25s ease; } .nine.columns { width: 100%; diff --git a/nimdoc/extlinks/project/expected/_._/util.html b/nimdoc/extlinks/project/expected/_._/util.html index 32dab9216a..37be00501e 100644 --- a/nimdoc/extlinks/project/expected/_._/util.html +++ b/nimdoc/extlinks/project/expected/_._/util.html @@ -23,6 +23,9 @@
+ + +

nimdoc/extlinks/util

diff --git a/nimdoc/extlinks/project/expected/doc/manual.html b/nimdoc/extlinks/project/expected/doc/manual.html index 2946f803ab..dbdfb6193c 100644 --- a/nimdoc/extlinks/project/expected/doc/manual.html +++ b/nimdoc/extlinks/project/expected/doc/manual.html @@ -23,6 +23,9 @@
+ + +

Nothing User Manual

diff --git a/nimdoc/extlinks/project/expected/main.html b/nimdoc/extlinks/project/expected/main.html index 2aaf19b3af..7ee68ca119 100644 --- a/nimdoc/extlinks/project/expected/main.html +++ b/nimdoc/extlinks/project/expected/main.html @@ -23,6 +23,9 @@
+ + +

nimdoc/extlinks/project/main

diff --git a/nimdoc/extlinks/project/expected/sub/submodule.html b/nimdoc/extlinks/project/expected/sub/submodule.html index cd95a9c54e..1b38da944f 100644 --- a/nimdoc/extlinks/project/expected/sub/submodule.html +++ b/nimdoc/extlinks/project/expected/sub/submodule.html @@ -23,6 +23,9 @@
+ + +

nimdoc/extlinks/project/sub/submodule

diff --git a/nimdoc/extlinks/project/expected/theindex.html b/nimdoc/extlinks/project/expected/theindex.html index cf250edd16..d3706a4af5 100644 --- a/nimdoc/extlinks/project/expected/theindex.html +++ b/nimdoc/extlinks/project/expected/theindex.html @@ -23,6 +23,9 @@
+ + +

Index

Documents: Nothing User Manual.

Modules: ../util, main, sub/submodule.

API symbols

diff --git a/nimdoc/rst2html/expected/rst_examples.html b/nimdoc/rst2html/expected/rst_examples.html index a267041331..ceadfeb5a3 100644 --- a/nimdoc/rst2html/expected/rst_examples.html +++ b/nimdoc/rst2html/expected/rst_examples.html @@ -23,6 +23,9 @@
+ + +

Not a Nim Manual

diff --git a/nimdoc/test_doctype/expected/test_doctype.html b/nimdoc/test_doctype/expected/test_doctype.html index 2cbf6ec0f8..548deb37e3 100644 --- a/nimdoc/test_doctype/expected/test_doctype.html +++ b/nimdoc/test_doctype/expected/test_doctype.html @@ -23,6 +23,9 @@
+ + +

nimdoc/test_doctype/test_doctype

diff --git a/nimdoc/test_out_index_dot_html/expected/index.html b/nimdoc/test_out_index_dot_html/expected/index.html index 4370f0df8a..e287ec60fa 100644 --- a/nimdoc/test_out_index_dot_html/expected/index.html +++ b/nimdoc/test_out_index_dot_html/expected/index.html @@ -23,6 +23,9 @@
+ + +

nimdoc/test_out_index_dot_html/foo

diff --git a/nimdoc/test_out_index_dot_html/expected/theindex.html b/nimdoc/test_out_index_dot_html/expected/theindex.html index ca7c2d7af8..24c4f2df4a 100644 --- a/nimdoc/test_out_index_dot_html/expected/theindex.html +++ b/nimdoc/test_out_index_dot_html/expected/theindex.html @@ -23,6 +23,9 @@
+ + +

Index

Modules: index.

API symbols

diff --git a/nimdoc/testproject/expected/nimdoc.out.css b/nimdoc/testproject/expected/nimdoc.out.css index 893395d248..ff77a51cb8 100644 --- a/nimdoc/testproject/expected/nimdoc.out.css +++ b/nimdoc/testproject/expected/nimdoc.out.css @@ -155,7 +155,8 @@ body { margin-left: 1%; } @media print { - #global-links, .link-seesrc, .theme-switch-wrapper, #searchInputDiv, .search-groupby { + #global-links, .link-seesrc, .theme-switch-wrapper, #searchInputDiv, .search-groupby, + #nav-burger, #nav-overlay, .three.columns { display:none; } .columns { @@ -174,6 +175,7 @@ body { height: 100vh; position: sticky; top: 0px; + left: 0px; overflow-y: auto; padding: 2px; } @@ -187,9 +189,67 @@ body { width: 100%; margin-left: 0; } +#nav-burger, #nav-overlay { + display: none; +} + @media screen and (max-width: 860px) { + #nav-burger { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: 0.25em; + left: 0.25em; + z-index: 200; + width: 1.6rem; + height: 1.6rem; + font-size: 1.25em; + cursor: pointer; + border-radius: 4px; + background-color: var(--secondary-background); + color: var(--text); + border: 1px solid var(--border); + user-select: none; + opacity: 0.55; + } + #nav-burger:hover { + background-color: var(--third-background); + } + #nav-toggle:checked ~ .container .three.columns { + transform: translateX(0); + } + #nav-toggle:checked ~ #nav-overlay { + opacity: 1; + pointer-events: auto; + } + #nav-overlay { + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 99; /* below sidebar */ + background: rgba(0, 0, 0, 0.35); + opacity: 0; + pointer-events: none; + transition: opacity 0.22s ease; + } .three.columns { - display: none; + display: block; + position: fixed; + left: 0; + width: min(80vw, 24em); + padding-top: 1.6em; + height: 100vh; /* Fallback */ + height: 100dvh; + overflow-y: auto; + z-index: 100; + background-color: var(--secondary-background); + box-shadow: 2px 0 12px rgba(0,0,0,0.25); + transform: translateX(-110%); + transition: transform 0.25s ease; } .nine.columns { width: 100%; diff --git a/nimdoc/testproject/expected/subdir/subdir_b/utils.html b/nimdoc/testproject/expected/subdir/subdir_b/utils.html index 3d994aca66..6e56d9d93d 100644 --- a/nimdoc/testproject/expected/subdir/subdir_b/utils.html +++ b/nimdoc/testproject/expected/subdir/subdir_b/utils.html @@ -23,6 +23,9 @@
+ + +

subdir/subdir_b/utils

diff --git a/nimdoc/testproject/expected/testproject.html b/nimdoc/testproject/expected/testproject.html index 2a5e9aa8a8..7bf409cfff 100644 --- a/nimdoc/testproject/expected/testproject.html +++ b/nimdoc/testproject/expected/testproject.html @@ -23,6 +23,9 @@
+ + +

testproject

diff --git a/nimdoc/testproject/expected/theindex.html b/nimdoc/testproject/expected/theindex.html index 62b9da9a2a..f676ade775 100644 --- a/nimdoc/testproject/expected/theindex.html +++ b/nimdoc/testproject/expected/theindex.html @@ -23,6 +23,9 @@
+ + +

Index

Modules: subdir/subdir_b/utils, testproject.

API symbols