@salesforcedevs/docs-components 1.3.209-tag4-alpha → 1.3.209-tag5-alpha

package/lwc.config.json

@@ -18,6 +18,7 @@
         "doc/overview",
         "doc/phase",
         "doc/xmlContent",
+        "doc/sidebarFooterNav",
         "docUtils/utils"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.209-tag4-alpha",
+    "version": "1.3.209-tag5-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.html

@@ -16,6 +16,8 @@
         toc-title={tocTitle}
         toc-options={tocOptions}
         enable-slot-change="true"
+        languages={languages}
+        language={language}
     >
         <doc-phase
             slot="doc-phase"

package/src/modules/doc/amfReference/amfReference.ts

@@ -4,6 +4,7 @@ import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
 import { normalizeBoolean } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -48,6 +49,8 @@ export default class AmfReference extends LightningElement {
     @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
     @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;
@@ -1343,21 +1346,8 @@ export default class AmfReference extends LightningElement {
          * New Title: E1 | Ref Spec2 | Project Name | Salesforce Developer
          *
          */
-        // eslint-disable-next-line @lwc/lwc/no-document-query
-        let coveoTitleMetaTag = document.querySelector(
-            'meta[name="coveo-search-title"]'
-        );
-        if (!coveoTitleMetaTag) {
-            coveoTitleMetaTag = document.createElement("meta");
-            coveoTitleMetaTag.setAttribute("name", "coveo-search-title");
-            // eslint-disable-next-line @lwc/lwc/no-document-query
-            document
-                .getElementsByTagName("head")[0]
-                .appendChild(coveoTitleMetaTag);
-        }
-
         if (titleTag) {
-            let titleTagValue = titleTag.textContent || "";
+            let titleTagValue = titleTag.textContent;
             const titleTagSectionValues: string[] =
                 titleTagValue?.split(TITLE_SEPARATOR);
             if (titleTagSectionValues) {
@@ -1369,7 +1359,6 @@ export default class AmfReference extends LightningElement {
                 }
             }
             titleTag.textContent = titleTagValue;
-            coveoTitleMetaTag.setAttribute("content", titleTagValue);
         }
     }
 

package/src/modules/doc/contentLayout/contentLayout.css

@@ -61,12 +61,16 @@ dx-toc {
     flex-direction: row;
     justify-content: center;
     max-width: var(--dx-g-doc-content-max-width);
+
+    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
+    min-height: 62vh;
     margin: auto;
     padding: 0 var(--dx-g-global-header-padding-horizontal);
+    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
 }
 
 .content-body {
-    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-xl);
+    margin: var(--dx-g-spacing-sm) 0 0;
     max-width: 900px;
     flex: 1;
     width: 0;
@@ -106,6 +110,7 @@ dx-toc {
     .content-body-container {
         padding-right: 0;
         overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }
 
     .left-nav-bar {

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

@@ -7,6 +7,10 @@
                 value={sidebarValue}
                 header={sidebarHeader}
                 ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -22,6 +26,10 @@
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar>
@@ -48,6 +56,9 @@
                     ></dx-toc>
                 </div>
             </div>
+            <div class="footer-container">
+                <dx-footer variant="no-signup"></dx-footer>
+            </div>
         </div>
     </div>
 </template>

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

@@ -4,6 +4,7 @@ import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
+import type { OptionWithLink } from "typings/custom";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -36,6 +37,10 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get breadcrumbs() {

package/src/modules/doc/header/header.css

@@ -7,6 +7,8 @@ dx-logo {
 .header_l2 {
     justify-content: space-between;
     height: var(--dx-g-doc-header-main-nav-height);
+    padding-bottom: var(--dx-g-spacing-xs);
+    background: white;
 }
 
 .nav_menu-button {
@@ -16,44 +18,32 @@ dx-logo {
     );
 }
 
+.has-brand.has-scoped-nav-items {
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
 .nav_menu-ctas {
     margin-right: var(--dx-g-spacing-sm);
 }
 
 header:not(.has-brand) > .header_l1 {
-    background: var(--dx-g-brand-current-color-background);
+    background: white;
+    border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
 header:not(.has-brand) > .header_l2 {
-    background: var(--dx-g-brand-current-color-background-2);
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
+    padding-bottom: var(--dx-g-spacing-lg);
 }
 
 .header_l2_group.header_l2_group-right-ctas {
     align-items: baseline;
 }
 
-.header_bail-link {
-    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.header_lang-dropdown {
-    --button-primary-color: var(--dx-g-blue-vibrant-40);
-    --button-primary-color-hover: var(--dx-g-blue-vibrant-30);
-}
-
-.header_lang-dropdown > dx-button {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
-    --dx-c-slot-empty-width: min-content;
-    --border-color: var(--button-primary-color);
-
-    border-bottom: 1px dashed var(--border-color);
-}
-
-.header_lang-dropdown > dx-button:hover {
-    --border-color: var(--button-primary-color-hover);
+.has-brand .header_l2_group-title {
+    padding-bottom: calc(var(--dx-g-spacing-md) + 2px);
 }
 
 @media (max-width: 768px) {
@@ -82,6 +72,10 @@ header:not(.has-brand) > .header_l2 {
         margin-right: var(--dx-g-spacing-sm);
     }
 
+    .has-brand .header_l2_group-title {
+        padding-bottom: var(--dx-g-spacing-smd);
+    }
+
     .header_l2_group-title {
         margin-right: 0;
         padding: var(--dx-g-spacing-smd)
@@ -89,19 +83,15 @@ header:not(.has-brand) > .header_l2 {
         min-height: var(--dx-g-doc-header-main-nav-height);
     }
 
-    .header_l2_group-title .header_lang-dropdown {
-        margin-left: auto;
-    }
-
-    .header_lang-dropdown > dx-button {
-        padding: var(--dx-g-spacing-2xs) 0;
-    }
-
     .has-scoped-nav-items > .header_l2 {
         height: unset;
     }
 
     .has-scoped-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
+        border-bottom: 1px solid var(--dx-g-gray-90);
+    }
+
+    header:not(.has-brand) > .header_l2 {
+        padding-bottom: 0;
     }
 }

package/src/modules/doc/header/header.html

@@ -14,28 +14,12 @@
                                 if:true={isValidBrand}
                                 sprite="salesforcebrand"
                                 symbol={brand}
-                                size="xlarge"
+                                size="large"
                             ></dx-icon>
-                            <span class="subtitle dx-text-display-6">
+                            <span class="subtitle dx-text-display-7">
                                 {subtitle}
                             </span>
                         </a>
-                        <dx-dropdown
-                            if:true={showMobileLanguages}
-                            class="header_lang-dropdown"
-                            options={languages}
-                            small
-                            value={language}
-                            value-path={langValuePath}
-                            onchange={onLangChange}
-                        >
-                            <dx-button
-                                aria-label="Select Language"
-                                variant="inline"
-                                icon-size="large"
-                                icon-symbol="world"
-                            ></dx-button>
-                        </dx-dropdown>
                     </div>
                     <div
                         if:true={hasScopedNavItems}
@@ -52,41 +36,6 @@
                             ></dx-header-nav>
                         </div>
                     </div>
-                    <div
-                        if:false={smallMobile}
-                        class="header_l2_group header_l2_group-right-ctas"
-                    >
-                        <dx-dropdown
-                            if:true={hasLanguages}
-                            class="header_lang-dropdown"
-                            options={languages}
-                            small
-                            value-path={langValuePath}
-                            value={language}
-                            onchange={onLangChange}
-                        >
-                            <dx-button
-                                aria-label="Select Language"
-                                variant="inline"
-                                icon-size="small"
-                                icon-symbol="world"
-                            >
-                                {languageLabel}
-                            </dx-button>
-                        </dx-dropdown>
-                        <dx-button
-                            if:true={hasBailLink}
-                            aria-label={bailLabel}
-                            class="header_bail-link"
-                            href={bailHref}
-                            onclick={handleBailClick}
-                            variant="tertiary"
-                            icon-symbol="new_window"
-                            target="_blank"
-                        >
-                            {bailLabel}
-                        </dx-button>
-                    </div>
                 </div>
             </header>
         </dx-brand-theme-provider>

package/src/modules/doc/header/header.ts

@@ -1,14 +1,11 @@
 import { api } from "lwc";
 import cx from "classnames";
-import type { OptionWithNested, OptionWithLink } from "typings/custom";
+import type { OptionWithNested } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
-import get from "lodash.get";
-import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "880px";
-const SMALL_MOBILE_MATCH = "768px";
 
 export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
@@ -23,31 +20,7 @@ export default class Header extends HeaderBase {
         this._scopedNavItems = toJson(value);
     }
 
-    @api
-    get languages() {
-        return this._languages;
-    }
-
-    set languages(value) {
-        this._languages = toJson(value);
-    }
-
-    @api
-    get language() {
-        return this._language;
-    }
-
-    set language(value) {
-        if (this._language !== value) {
-            this._language = value;
-        }
-    }
-
-    private _language: string | null = null;
-    private _languages!: OptionWithLink[];
     private _scopedNavItems!: OptionWithNested[];
-    private smallMobile = false;
-    private smallMobileMatchMedia!: MediaQueryList;
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
     private shouldRender = false;
@@ -60,24 +33,6 @@ export default class Header extends HeaderBase {
         return this.scopedNavItems && this.scopedNavItems.length > 0;
     }
 
-    private get hasLanguages(): boolean {
-        return !!(this.languages && this.languages.length);
-    }
-
-    private get showMobileLanguages(): boolean {
-        return this.smallMobile && this.hasLanguages;
-    }
-
-    private get languageLabel(): string {
-        return (
-            (this.language &&
-                this.languages.find(
-                    (lang) => get(lang, this.langValuePath) === this.language
-                )?.label) ||
-            this.languages[0].label
-        );
-    }
-
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(
@@ -86,14 +41,6 @@ export default class Header extends HeaderBase {
         this.onTabletChange(this.tabletMatchMedia);
         this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
-        this.smallMobileMatchMedia = window.matchMedia(
-            `(max-width: ${SMALL_MOBILE_MATCH})`
-        );
-        this.onSmallMobileChange(this.smallMobileMatchMedia);
-        this.smallMobileMatchMedia.addEventListener(
-            "change",
-            this.onSmallMobileChange
-        );
         if (
             (window.location.pathname.includes("/docs/") &&
                 window.location.pathname !== "/docs/apis") ||
@@ -110,53 +57,15 @@ export default class Header extends HeaderBase {
             "change",
             this.onTabletChange
         );
-
-        this.smallMobileMatchMedia.removeEventListener(
-            "change",
-            this.onSmallMobileChange
-        );
     }
 
     private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
         (this.tablet = e.matches);
 
-    private onSmallMobileChange = (e: MediaQueryListEvent | MediaQueryList) =>
-        (this.smallMobile = e.matches);
-
     protected additionalClasses(): string {
         return cx(
             this.brand && "has-brand",
             this.hasScopedNavItems && "has-scoped-nav-items"
         );
     }
-
-    private onLangChange(event: CustomEvent<string>): void {
-        const { detail } = event;
-        this._language = detail;
-
-        this.dispatchEvent(new CustomEvent("langchange", { detail }));
-    }
-
-    private handleBailClick(event: Event) {
-        const payload = {
-            click_text: "pdf",
-            click_url: this.bailHref,
-            element_title: "pdf",
-            element_type: "link",
-            content_category: "download"
-        };
-        track(event.target!, "custEv_pdfDownload", {
-            ...payload,
-            file_name: this.getFilename(this.bailHref!),
-            file_extension: "pdf"
-        });
-
-        track(event.target!, "custEv_linkClick", {
-            ...payload
-        });
-    }
-
-    private getFilename = function (path: string) {
-        return path.substring(path.lastIndexOf("/") + 1);
-    };
 }

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.css

@@ -0,0 +1,52 @@
+@import "dxHelpers/reset";
+
+:host {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --popover-container-open-transform: translateX(-4px) translateY(-8px);
+    --popover-transition: none;
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
+}
+
+.footer-display {
+    display: flex;
+}
+
+.footer_lang-dropdown {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --border-color: var(--button-primary-color);
+
+    display: flex;
+    padding: 0 var(--dx-g-spacing-md);
+    margin-left: var(--dx-g-spacing-sm);
+    height: var(--dx-g-spacing-xl);
+    border-radius: var(--dx-g-spacing-xs);
+    align-items: center;
+}
+
+.footer_lang-dropdown[aria-expanded="true"] {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+
+    --border-color: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.footer_lang-dropdown:hover,
+.footer_lang-dropdown:active,
+.footer_lang-dropdown:focus,
+.pdf_bail-link:hover {
+    background-color: var(--button-primary-color-hover);
+
+    --border-color: var(--button-primary-color-hover);
+}
+
+.pdf_bail-link {
+    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
+    --dx-c-button-priamry-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+
+    padding: 0 var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-xs);
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    align-items: center;
+}

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.html

@@ -0,0 +1,55 @@
+<template>
+    <div if:false={mobile} class="footer-display">
+        <dx-button
+            if:true={hasBailLink}
+            aria-label={bailLabel}
+            class="pdf_bail-link"
+            href={bailHref}
+            onclick={handleBailClick}
+            variant="inline"
+            icon-size="medium"
+            icon-symbol="new_window"
+            target="_blank"
+        >
+            {bailLabel}
+        </dx-button>
+        <dx-dropdown
+            if:true={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="medium"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+    <div if:true={mobile} class="footer-display">
+        <dx-dropdown
+            if:true={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="small"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+</template>

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.ts

@@ -0,0 +1,106 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement, api } from "lwc";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import get from "lodash.get";
+import { track } from "dxUtils/analytics";
+
+const MOBILE_SIZE_MATCH = "768px";
+
+export default class SidebarFooterNav extends LightningElement {
+    @api langValuePath: string = "id";
+    @api bailHref?: string | null = null;
+    @api bailLabel?: string | null = null;
+
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
+    @api
+    get language() {
+        return this._language;
+    }
+
+    set language(value) {
+        this._language = value;
+    }
+
+    private _languages!: OptionWithLink[];
+    private _language: string | null = null;
+    private mobile: boolean = false;
+    private matchMedia!: MediaQueryList;
+
+    private get hasLanguages(): boolean {
+        return this.languages?.length > 1;
+    }
+
+    private get languageLabel(): string {
+        const matchingLanguageData = this.language
+            ? this.languages.find(
+                  (lang) => get(lang, this.langValuePath) === this.language
+              )
+            : null;
+        return matchingLanguageData?.label || this.languages[0].label;
+    }
+
+    get hasBailLink(): boolean {
+        return !!(this.bailHref && this.bailLabel);
+    }
+
+    private onLangChange(event: CustomEvent<string>): void {
+        const { detail } = event;
+        this._language = detail;
+
+        this.dispatchEvent(
+            new CustomEvent("langchange", {
+                detail,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    private getFilename = function (path: string) {
+        return path.substring(path.lastIndexOf("/") + 1);
+    };
+
+    private handleBailClick(event: Event) {
+        const payload = {
+            click_text: "pdf",
+            click_url: this.bailHref,
+            element_title: "pdf",
+            element_type: "link",
+            content_category: "download"
+        };
+        track(event.target!, "custEv_pdfDownload", {
+            ...payload,
+            file_name: this.getFilename(this.bailHref!),
+            file_extension: "pdf"
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            ...payload
+        });
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${MOBILE_SIZE_MATCH})`
+        );
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+    };
+}

package/src/modules/doc/xmlContent/types.ts

@@ -61,12 +61,15 @@ export type ApiDocLanguage = {
 
 export interface Header extends Element {
     subtitle: string;
+    headerHref: string;
+}
+
+export type SiderbarFooter = {
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
     language?: string;
-    headerHref: string;
-}
+};
 
 export type ApiNavItem = {
     children: Array<ApiNavItem>;

package/src/modules/doc/xmlContent/xmlContent.html

@@ -11,6 +11,11 @@
         sidebar-value={sidebarValue}
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
+        onlangchange={handleLanguageChange}
+        languages={sidebarFooterContent.languages}
+        language={sidebarFooterContent.language}
+        bail-href={sidebarFooterContent.bailHref}
+        bail-label={sidebarFooterContent.bailLabel}
     >
         <doc-phase
             slot="version-banner"

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -8,6 +8,7 @@ import {
     DocVersion,
     TreeNode,
     Header,
+    SiderbarFooter,
     HistoryState,
     PageReference,
     TocMap
@@ -26,6 +27,12 @@ const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     "ja-jp": 12.5
 };
 
+const defaultSidebarFooter: SiderbarFooter = {
+    bailHref: "",
+    bailLabel: "",
+    languages: [],
+    language: ""
+};
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
@@ -64,15 +71,16 @@ export default class DocXmlContent extends LightningElementWithState<{
     private docContent = "";
     private language?: DocLanguage | null = null;
     private loaded = false;
+    private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
     private sidebarContent: Array<TreeNode> | null = null;
     private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
-    private _pageHeader?: Header;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
+    private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -214,13 +222,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     disconnectedCallback(): void {
         window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
-        if (this.listenerAttached) {
-            this.pageHeader.removeEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = false;
-        }
     }
 
     private get languageId(): string | undefined {
@@ -414,12 +415,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     getReferenceFromUrl(): PageReference {
-        const [
-            page,
-            docId,
-            deliverable,
-            contentDocumentId
-        ] = window.location.pathname.substr(1).split("/");
+        const [page, docId, deliverable, contentDocumentId] =
+            window.location.pathname.substr(1).split("/");
 
         const { origin: domain, hash, search } = window.location;
 
@@ -469,7 +466,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.availableVersions = data.availableVersions;
         this.pdfUrl = data.pdfUrl;
 
-        this.updateHeader();
+        this.updateHeaderAndSidebarFooter();
 
         this.buildBreadcrumbs();
 
@@ -533,7 +530,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         });
     }
 
-    updateHeader(): void {
+    updateHeaderAndSidebarFooter(): void {
         if (!this.pageHeader) {
             return;
         }
@@ -543,20 +540,12 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         if (this.pdfUrl) {
-            this.pageHeader.bailHref = this.pdfUrl;
-            this.pageHeader.bailLabel = "PDF";
+            this.sidebarFooterContent.bailHref = this.pdfUrl;
+            this.sidebarFooterContent.bailLabel = "PDF";
         }
 
-        if (!this.listenerAttached) {
-            this.pageHeader.addEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = true;
-        }
-
-        this.pageHeader.languages = this.availableLanguages;
-        this.pageHeader.language = this.language?.id;
+        this.sidebarFooterContent.languages = this.availableLanguages;
+        this.sidebarFooterContent.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
@@ -581,20 +570,14 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        (this.template.querySelector(
-            "doc-content-layout"
-        ) as any)?.setSidebarInputValue(searchParam);
+        (
+            this.template.querySelector("doc-content-layout") as any
+        )?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
-        const {
-            page,
-            docId,
-            deliverable,
-            contentDocumentId,
-            hash,
-            search
-        } = reference;
+        const { page, docId, deliverable, contentDocumentId, hash, search } =
+            reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
             search!
         )}${this.normalizeHash(hash)}`;