From 2cb70a00041791a2c4a4ead65bd7b0251ced2ad2 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 30 May 2024 22:13:42 -0300 Subject: content, client: dynamically show/hide sidebar for search --- src/content/dependencies/generatePageLayout.js | 53 +++++++++++++++++--------- 1 file changed, 36 insertions(+), 17 deletions(-) (limited to 'src/content') 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'), -- cgit 1.3.0-6-gf8a5