doc/doc-support: inject custom header via nixos-render-docs --header

doc/doc-support/header.html

@@ -0,0 +1,7 @@
+<div class="manual-header">
+    <nav class="manual-header--tabs">
+        <a class="manual-header--tab manual-header--tab-active" href="#">Nixpkgs</a>
+        <a class="manual-header--tab" href="https://nixos.org/manual/nixos/stable/">NixOS</a>
+    </nav>
+    <span class="manual-header--title">Nixpkgs Reference Manual</span>
+</div>

doc/doc-support/package.nix

@@ -119,6 +119,8 @@ stdenvNoCC.mkDerivation (
         --script ./anchor-use.js \
         --sidebar-depth 3 \
         --nav ./nav.json \
+        --header ${./header.html}\
+        --no-navheader \
         manual.md \
         out/index.html
 

doc/style.css

@@ -398,6 +398,7 @@ div.appendix .variablelist .term {
 
 :root {
   --sidebar-width: 20rem;
+  --header-height: 3rem;
   --background: #fff;
   --main-text-color: #000;
   --link-color: #405d99;
@@ -528,7 +529,7 @@ nav.toc-sidebar summary {
     min-height: 0;
     display: grid;
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-rows: var(--header-height) auto minmax(0, 1fr);
   }
 
   body:has(> nav.toc-sidebar) {
@@ -537,7 +538,7 @@ nav.toc-sidebar summary {
 
   .navheader {
     grid-column: 1 / -1;
-    grid-row: 1;
+    grid-row: 2;
   }
 
   nav.toc-sidebar {
@@ -548,7 +549,7 @@ nav.toc-sidebar summary {
     /*  */
     margin: 0;
     grid-column: 1;
-    grid-row: 2;
+    grid-row: 3;
     max-height: none;
     overflow-y: auto;
     border: none;
@@ -562,7 +563,7 @@ nav.toc-sidebar summary {
 
   main.content {
     grid-column: 1 / -1;
-    grid-row: 2;
+    grid-row: 3;
     overflow-y: auto;
     padding: 0 1rem;
   }
@@ -571,3 +572,73 @@ nav.toc-sidebar summary {
     grid-column: 2;
   }
 }
+
+.manual-header {
+  background-color: var(--background);
+  border-bottom: 0.0625rem solid #d8d8d8;
+  display: flex;
+  flex-direction: column;
+}
+
+.manual-header--title {
+  order: -1;
+  padding: 0.5rem 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--small-heading-color);
+  text-align: center;
+}
+
+.manual-header--tabs {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  margin: 0;
+  padding: 0;
+}
+
+.manual-header--tab {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--main-text-color);
+  text-decoration: none;
+  border-bottom: 0.1875rem solid transparent;
+  border-top: 0.1875rem solid transparent;
+  transition: border-bottom-color 0.15s ease;
+}
+
+.manual-header--tab:hover {
+  border-bottom-color: var(--heading-color);
+  color: var(--main-text-color);
+}
+
+.manual-header--tab-active {
+  border-bottom-color: var(--heading-color);
+  color: var(--heading-color);
+  font-weight: 700;
+}
+
+@media screen and (min-width: 768px) {
+  .manual-header {
+    height: var(--header-height);
+    flex-direction: row;
+    align-items: stretch;
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  .manual-header--title {
+    order: 0;
+    margin-left: auto;
+    padding: 0 1rem;
+    align-self: center;
+  }
+
+  .manual-header--tabs {
+    justify-content: flex-start;
+    padding: 0 1rem;
+  }
+}