2 files changed, 98 insertions, 17 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index e3bfa065..fd5df91d 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -5,6 +5,7 @@ export default {
   contentDependencies: [
     'generateColorStyleRules',
     'generateFooterLocalizationLinks',
+    'generatePageSidebar',
     'generateSearchSidebarBox',
     'generateStickyHeadingContainer',
     'transformContent',
@@ -44,6 +45,9 @@ export default {
     relations.stickyHeadingContainer =
       relation('generateStickyHeadingContainer');
 
+    relations.sidebar =
+      relation('generatePageSidebar');
+
     if (sprawl.enableSearch) {
       relations.searchBox =
         relation('generateSearchSidebarBox');
@@ -384,28 +388,43 @@ export default {
             slots.navContent),
         ]);
 
-    const getSidebar = (side, id) =>
-      (html.isBlank(slots[side])
-        ? html.blank()
-        : slots[side].slots({
-            attributes:
-              slots[side]
-                .getSlotValue('attributes')
-                .with({id}),
-          }));
+    const getSidebar = (side, id, needed) => {
+      const sidebar =
+        (html.isBlank(slots[side])
+          ? (needed
+              ? relations.sidebar.clone()
+              : html.blank())
+          : slots[side]);
+
+      if (html.isBlank(sidebar) && !needed) {
+        return sidebar;
+      }
+
+      return sidebar.slots({
+        attributes:
+          sidebar
+            .getSlotValue('attributes')
+            .with({id}),
+      });
+    }
+
+    const willShowSearch =
+      slots.showSearch && relations.searchBox;
 
     let showingSidebarLeft;
     let showingSidebarRight;
 
-    const leftSidebar = getSidebar('leftSidebar', 'sidebar-left');
-    const rightSidebar = getSidebar('rightSidebar', 'sidebar-right');
+    const leftSidebar = getSidebar('leftSidebar', 'sidebar-left', willShowSearch);
+    const rightSidebar = getSidebar('rightSidebar', 'sidebar-right', false);
+
+    if (willShowSearch) {
+      if (html.isBlank(leftSidebar)) {
+        leftSidebar.setSlot('initiallyHidden', true);
+        showingSidebarLeft = false;
+      }
 
-    if (
-      slots.showSearch &&
-      relations.searchBox &&
-      !html.isBlank(leftSidebar)
-    ) {
-      leftSidebar.setSlot('boxes',
+      leftSidebar.setSlot(
+        'boxes',
         html.tags([
           relations.searchBox,
           leftSidebar.getSlotValue('boxes'),
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 1b70af0f..2bc8bf47 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -3673,6 +3673,9 @@ async function searchAll(query, options = {}) {
 // Sidebar search box -------------------------------------
 
 const sidebarSearchInfo = initInfo('sidebarSearchInfo', {
+  pageContainer: null,
+
+  searchSidebarColumn: null,
   searchBox: null,
   searchInput: null,
 
@@ -3706,6 +3709,8 @@ const sidebarSearchInfo = initInfo('sidebarSearchInfo', {
   groupResultKindString: null,
 
   state: {
+    sidebarColumnShownForSearch: null,
+
     workerStatus: null,
     searchStage: null,
 
@@ -3731,12 +3736,22 @@ const sidebarSearchInfo = initInfo('sidebarSearchInfo', {
 function getSidebarSearchReferences() {
   const info = sidebarSearchInfo;
 
+  info.pageContainer =
+    document.getElementById('page-container');
+
   info.searchBox =
     document.querySelector('.wiki-search-sidebar-box');
 
+  if (!info.searchBox) {
+    return;
+  }
+
   info.searchInput =
     info.searchBox.querySelector('.wiki-search-input');
 
+  info.searchSidebarColumn =
+    info.searchBox.closest('.sidebar-column');
+
   const findString = classPart =>
     info.searchBox.querySelector(`.wiki-search-${classPart}-string`);
 
@@ -3944,6 +3959,7 @@ function addSidebarSearchListeners() {
   info.endSearchLink.addEventListener('click', domEvent => {
     domEvent.preventDefault();
     clearSidebarSearch();
+    possiblyHideSearchSidebarColumn();
   });
 }
 
@@ -4168,6 +4184,8 @@ function showSidebarSearchResults(results) {
 
   console.debug(`Showing search results:`, results);
 
+  showSearchSidebarColumn();
+
   const flatResults =
     Object.entries(results)
       .filter(([index]) => index === 'generic')
@@ -4379,6 +4397,50 @@ function hideSidebarSearchResults() {
   cssProp(info.endSearchLine, 'display', 'none');
 }
 
+function showSearchSidebarColumn() {
+  const info = sidebarSearchInfo;
+  const {state} = info;
+
+  if (!info.searchSidebarColumn) {
+    return;
+  }
+
+  if (!info.searchSidebarColumn.classList.contains('initially-hidden')) {
+    return;
+  }
+
+  info.searchSidebarColumn.classList.remove('initially-hidden');
+
+  if (info.searchSidebarColumn.id === 'sidebar-left') {
+    info.pageContainer.classList.add('showing-sidebar-left');
+  } else if (info.searchSidebarColumn.id === 'sidebar-right') {
+    info.pageContainer.classList.add('showing-sidebar-right');
+  }
+
+  state.sidebarColumnShownForSearch = true;
+}
+
+function possiblyHideSearchSidebarColumn() {
+  const info = sidebarSearchInfo;
+  const {state} = info;
+
+  if (!info.searchSidebarColumn) {
+    return;
+  }
+
+  if (state.sidebarColumnShownForSearch) {
+    info.searchSidebarColumn.classList.add('initially-hidden');
+
+    if (info.searchSidebarColumn.id === 'sidebar-left') {
+      info.pageContainer.classList.remove('showing-sidebar-left');
+    } else if (info.searchSidebarColumn.id === 'sidebar-right') {
+      info.pageContainer.classList.remove('showing-sidebar-right');
+    }
+  }
+
+  state.sidebarColumnShownForSearch = null;
+}
+
 clientSteps.getPageReferences.push(getSidebarSearchReferences);
 clientSteps.addInternalListeners.push(addSidebarSearchInternalListeners);
 clientSteps.mutatePageContent.push(mutateSidebarSearchContent);