@salesforcedevs/docs-components 1.19.6-alpha5 → 1.20.0-rnb-scroll

package/package.json

@@ -1,11 +1,16 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.19.6-alpha5",
+    "version": "1.20.0-rnb-scroll",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
     "engines": {
-        "node": "20.x"
+        "node": "20.x",
+        "yarn": "1.22.19"
+    },
+    "volta": {
+        "node": "20.19.0",
+        "yarn": "1.22.19"
     },
     "publishConfig": {
         "access": "public"

package/src/modules/doc/contentLayout/contentLayout.html

@@ -1,24 +1,21 @@
 <template>
     <div class="content">
-        <template lwc:if={showSidebar === 'true'}>
-            <dx-sidebar-old
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-                empty-state-message={emptyStateMessage}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar-old>
-        </template>
-
+        <dx-sidebar-old
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+            languages={languages}
+            language={language}
+            bail-href={bailHref}
+            bail-label={bailLabel}
+            dev-center={devCenter}
+            brand={brand}
+            empty-state-message={emptyStateMessage}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -40,16 +40,6 @@ export default class ContentLayout extends LightningElement {
     @api devCenter: any;
     @api brand: any;
     @api emptyStateMessage?: string;
-    _showSidebar = "true";
-
-    @api
-    set showSidebar(value) {
-        this._showSidebar = value;
-    }
-
-    get showSidebar() {
-        return this._showSidebar;
-    }
 
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api showFooter = false;
@@ -279,13 +269,24 @@ export default class ContentLayout extends LightningElement {
             });
 
             // Adjusting the right nav bar on scroll.
+            // setting maxheight to make the RNB scrollable based on different parent elements
             if (rightNavBarEl) {
-                rightNavBarEl.style.top = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height
-                      }px`
-                    : `${totalHeaderHeight}px`;
+                const docPhaseElHeight = docPhaseEl
+                    ? docPhaseEl.getBoundingClientRect().height
+                    : 0;
+                const toc = rightNavBarEl.querySelector("dx-toc");
+                const listContainer = toc?.shadowRoot?.querySelector(
+                    ".toc"
+                ) as HTMLElement;
+                const viewportHeight = window.innerHeight;
+                const maxHeight =
+                    viewportHeight -
+                    (docPhaseElHeight + totalHeaderHeight + 24); //added some margin of dx-toc
+
+                rightNavBarEl.style.top = `${
+                    totalHeaderHeight + docPhaseElHeight
+                }px`;
+                listContainer.style.maxHeight = `${maxHeight}px`;
             }
 
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).