content, css: generatePageSidebar: initiallyHidden slot

2 files changed, 19 insertions, 1 deletions

diff --git a/src/content/dependencies/generatePageSidebar.js b/src/content/dependencies/generatePageSidebar.js
index 3ec928db..d3b55580 100644
--- a/src/content/dependencies/generatePageSidebar.js
+++ b/src/content/dependencies/generatePageSidebar.js
@@ -36,6 +36,16 @@ export default {
       type: 'boolean',
       default: false,
     },
+
+    // Provide to include all the HTML for the sidebar in place as usual,
+    // but start it out totally invisible. This is mainly so client-side
+    // JavaScript can show the sidebar if it needs to (and has a target
+    // to slot its own content into). If there are no boxes and this
+    // option *isn't* provided, then the sidebar will just be blank.
+    initiallyHidden: {
+      type: 'boolean',
+      default: false,
+    },
   },
 
   generate(slots, {html}) {
@@ -67,7 +77,11 @@ export default {
       attributes.add('class', 'all-boxes-collapsible');
     }
 
-    if (html.isBlank(slots.boxes)) {
+    if (slots.initiallyHidden) {
+      attributes.add('class', 'initially-hidden');
+    }
+
+    if (html.isBlank(slots.boxes) && !slots.initiallyHidden) {
       return html.blank();
     } else {
       return html.tag('div', attributes, slots.boxes);
diff --git a/src/static/css/site.css b/src/static/css/site.css
index aeba0d48..41145a75 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -172,6 +172,10 @@ body::before {
   flex-grow: 1;
 }
 
+.sidebar-column.initially-hidden {
+  display: none;
+}
+
 .sidebar-multiple {
   display: flex;
   flex-direction: column;