mirrors/Nim
1
0
Fork 0
mirror of https://github.com/nim-lang/Nim.git synced 2026-04-05 23:28:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

nimdoc: Add a nav-burger to display the panel on mobile (#25606)

Browse Source 
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)
This commit is contained in:
Zoom
2026-03-23 15:31:51 +04:00
committed by GitHub
parent 4414b5a396
commit 57e15cd9a4
15 changed files with 163 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config/nimdoc.cfg
View File

@@ -248,6 +248,9 @@ doc.file = """<?xml version="1.0" encoding="utf-8" ?>
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">$title</h1>$subtitle
$content

64
doc/nimdoc.css
View File

@@ -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%;

3
nimdoc/extlinks/project/expected/_._/util.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">nimdoc/extlinks/util</h1>
<div class="row">

3
nimdoc/extlinks/project/expected/doc/manual.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">Nothing User Manual</h1>

3
nimdoc/extlinks/project/expected/main.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">nimdoc/extlinks/project/main</h1>
<div class="row">

3
nimdoc/extlinks/project/expected/sub/submodule.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">nimdoc/extlinks/project/sub/submodule</h1>
<div class="row">

3
nimdoc/extlinks/project/expected/theindex.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">Index</h1>
Documents: <a href="doc/manual.html">Nothing User Manual</a>.<br/><p />Modules: <a href="_._/util.html">../util</a>, <a href="main.html">main</a>, <a href="sub/submodule.html">sub/submodule</a>.<br/><p /><h2>API symbols</h2>

3
nimdoc/rst2html/expected/rst_examples.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">Not a Nim Manual</h1>
<div class="row">

3
nimdoc/test_doctype/expected/test_doctype.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">nimdoc/test_doctype/test_doctype</h1>
<div class="row">

3
nimdoc/test_out_index_dot_html/expected/index.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">nimdoc/test_out_index_dot_html/foo</h1>
<div class="row">

3
nimdoc/test_out_index_dot_html/expected/theindex.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">Index</h1>
Modules: <a href="index.html">index</a>.<br/><p /><h2>API symbols</h2>

64
nimdoc/testproject/expected/nimdoc.out.css
View File

@@ -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%;

3
nimdoc/testproject/expected/subdir/subdir_b/utils.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">subdir/subdir_b/utils</h1>
<div class="row">

3
nimdoc/testproject/expected/testproject.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">testproject</h1>
<div class="row">

3
nimdoc/testproject/expected/theindex.html
View File

@@ -23,6 +23,9 @@
</head>
<body>
<div class="document" id="documentId">
<input type="checkbox" id="nav-toggle" hidden>
<label for="nav-toggle" id="nav-burger">&#9776;</label>
<label for="nav-toggle" id="nav-overlay"></label>
<div class="container">
<h1 class="title">Index</h1>
Modules: <a href="subdir/subdir_b/utils.html">subdir/subdir_b/utils</a>, <a href="testproject.html">testproject</a>.<br/><p /><h2>API symbols</h2>