content: generatePageSidebarBox: collapsible slot

Makes collapsibility a function of the boxes in a sidebar,
rather than a property of the sidebar (column) itself.

6 files changed, 34 insertions, 40 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 927d45a..0bf3454 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -390,14 +390,6 @@ export default {
     const hasSidebarLeft = !html.isBlank(html.resolve(leftSidebar));
     const hasSidebarRight = !html.isBlank(html.resolve(rightSidebar));
 
-    const collapseSidebars =
-      (hasSidebarLeft
-        ? leftSidebar.getSlotValue('collapse')
-        : true) &&
-      (hasSidebarRight
-        ? rightSidebar.getSlotValue('collapse')
-        : true);
-
     const processSkippers = skipperList =>
       skipperList
         .filter(({condition, id}) =>
@@ -509,15 +501,11 @@ export default {
 
       slots.secondaryNav,
 
-      html.tag('div', {class: 'layout-columns'},
-        !collapseSidebars &&
-          {class: 'vertical-when-thin'},
-
-        [
-          leftSidebar,
-          mainHTML,
-          rightSidebar,
-        ]),
+      html.tag('div', {class: 'layout-columns'}, [
+        leftSidebar,
+        mainHTML,
+        rightSidebar,
+      ]),
 
       slots.bannerPosition === 'bottom' &&
         slots.banner,
diff --git a/src/content/dependencies/generatePageSidebar.js b/src/content/dependencies/generatePageSidebar.js
index dda75dd..43015aa 100644
--- a/src/content/dependencies/generatePageSidebar.js
+++ b/src/content/dependencies/generatePageSidebar.js
@@ -30,16 +30,6 @@ export default {
       default: 'static',
     },
 
-    // Collapsing sidebars disappear when the viewport is sufficiently
-    // thin. (This is the default.) Override as false to make the sidebar
-    // stay visible in thinner viewports, where the page layout will be
-    // reflowed so the sidebar is as wide as the screen and appears below
-    // nav, above the main content.
-    collapse: {
-      type: 'boolean',
-      default: true,
-    },
-
     // Wide sidebars generally take up more horizontal space in the normal
     // page layout, and should be used if the content of the sidebar has
     // a greater than typical focus compared to main content.
@@ -58,22 +48,26 @@ export default {
 
     attributes.add(slots.attributes);
 
-    if (slots.class) {
-      attributes.add('class', slots.class);
-    }
-
     if (slots.wide) {
       attributes.add('class', 'wide');
     }
 
-    if (!slots.collapse) {
-      attributes.add('class', 'no-hide');
-    }
-
     if (slots.stickyMode !== 'static') {
       attributes.add('class', `sticky-${slots.stickyMode}`);
     }
 
+    const {content: boxes} = html.smooth(slots.boxes);
+
+    const allBoxesCollapsible =
+      boxes.every(box =>
+        html.resolve(box)
+          .attributes
+          .has('class', 'collapsible'));
+
+    if (allBoxesCollapsible) {
+      attributes.add('class', 'all-boxes-collapsible');
+    }
+
     if (html.isBlank(slots.boxes)) {
       return html.blank();
     } else {
diff --git a/src/content/dependencies/generatePageSidebarBox.js b/src/content/dependencies/generatePageSidebarBox.js
index 5183545..e11efc3 100644
--- a/src/content/dependencies/generatePageSidebarBox.js
+++ b/src/content/dependencies/generatePageSidebarBox.js
@@ -11,10 +11,18 @@ export default {
       type: 'attributes',
       mutable: false,
     },
+
+    collapsible: {
+      type: 'boolean',
+      default: true,
+    },
   },
 
   generate: (slots, {html}) =>
     html.tag('div', {class: 'sidebar'},
+      slots.collapsible &&
+        {class: 'collapsible'},
+
       slots.attributes,
       slots.content),
 };
diff --git a/src/content/dependencies/generateWikiHomeNewsBox.js b/src/content/dependencies/generateWikiHomeNewsBox.js
index e054edd..bd0e479 100644
--- a/src/content/dependencies/generateWikiHomeNewsBox.js
+++ b/src/content/dependencies/generateWikiHomeNewsBox.js
@@ -46,6 +46,8 @@ export default {
 
     return relations.box.slots({
       attributes: {class: 'latest-news-sidebar-box'},
+      collapsible: false,
+
       content: [
         html.tag('h1', language.$('homepage.news.title')),
 
diff --git a/src/content/dependencies/generateWikiHomePage.js b/src/content/dependencies/generateWikiHomePage.js
index 35461d0..ee14a58 100644
--- a/src/content/dependencies/generateWikiHomePage.js
+++ b/src/content/dependencies/generateWikiHomePage.js
@@ -79,13 +79,14 @@ export default {
 
       leftSidebar:
         relations.sidebar.slots({
-          collapse: false,
           wide: true,
 
           boxes: [
             relations.customSidebarContent &&
               relations.customSidebarBox.slots({
                 attributes: {class: 'custom-content-sidebar-box'},
+                collapsible: false,
+
                 content:
                   relations.customSidebarContent
                     .slot('mode', 'multiline'),
diff --git a/src/static/site6.css b/src/static/site6.css
index b27a1fb..66518d3 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -2313,7 +2313,8 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
 /* Layout - Medium or Thin */
 
 @media (max-width: 899.98px) {
-  .sidebar-column:not(.no-hide) {
+  .sidebar.collapsible,
+  .sidebar-column.all-boxes-collapsible {
     display: none;
   }
 
@@ -2321,15 +2322,15 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
     display: block;
   }
 
-  .layout-columns.vertical-when-thin {
+  .layout-columns {
     flex-direction: column;
   }
 
-  .layout-columns.vertical-when-thin > *:not(:last-child) {
+  .layout-columns > *:not(:last-child) {
     margin-bottom: 10px;
   }
 
-  .sidebar-column.no-hide {
+  .sidebar-column {
     max-width: unset !important;
     flex-basis: unset !important;
     margin-right: 0 !important;