fix mobile nav bar not working on introduction and libraries pages

Author: byron-okta

Diff for: src/website/dom-elements-common.js

@@ -1,2 +1,9 @@
-export const codeElements = document.querySelectorAll('.plain-text pre code');
-export const counterElement = document.querySelector('.counter');
+export const codeElements = document.querySelectorAll(".plain-text pre code");
+export const counterElement = document.querySelector(".counter");
+
+export const navbarElement = document.querySelector("nav.navbar");
+export const menuTriggerElement = document.querySelector(".menu-trigger");
+export const menuLinks = document.querySelectorAll(".navbar .menu a");
+export const menuScrollableLinks = navbarElement.querySelectorAll("a.scrollto");
+
+export const sectionElements = document.getElementsByTagName("section");

Diff for: src/website/dom-elements.js

@@ -1,14 +1,6 @@
 export * from '../dom-elements.js';
 export * from './dom-elements-common.js';
 
-export const navbarElement = document.querySelector('nav.navbar');
-export const menuTriggerElement = document.querySelector('.menu-trigger');
-export const menuLinks = document.querySelectorAll('.navbar .menu a');
-export const menuScrollableLinks =
-    navbarElement.querySelectorAll('a.scrollto');
-
-export const sectionElements = document.getElementsByTagName('section');
-
 export const extensionSection = document.querySelector('.update-site');
 export const ebookSection = document.querySelector('.jtw-ebook-banner');
 
@@ -22,4 +14,4 @@ export const debuggerSection = document.getElementById('debugger-io');
 export const shareJwtButton = document.querySelector('.website-share button');
 export const shareJwtTextElement = shareJwtButton.querySelector('span');
 
-export const starsElements = document.getElementsByClassName('stars');
+export const starsElements = document.getElementsByClassName('stars');

Diff for: src/website/introduction/index.js

@@ -1,9 +1,11 @@
 import { CCPAModal } from "../ccpa-modal.js";
 import { setupJwtCounter } from "../counter.js";
 import { setupHighlighting } from "../highlighting.js";
+import { setupNavbar } from "../navbar.js";
 import { TopBanner } from "../top-banner.js";
 
 // Initialization
+setupNavbar();
 setupHighlighting();
 setupJwtCounter();
 CCPAModal();

Diff for: src/website/libraries/index.js

@@ -1,10 +1,12 @@
 import { CCPAModal } from "../ccpa-modal.js";
 import { setupJwtCounter } from "../counter.js";
 import { setupHighlighting } from "../highlighting.js";
+import { setupNavbar } from "../navbar.js";
 import { TopBanner } from "../top-banner.js";
 import { setupLibraries } from "./libraries.js";
 
 // Initialization
+setupNavbar();
 setupLibraries();
 setupHighlighting();
 setupJwtCounter();

Diff for: src/website/navbar.js

@@ -1,12 +1,12 @@
 import { getOffsetBoundingClientRect } from './utils.js';
 
-import { 
+import {
   navbarElement,
   menuTriggerElement,
   menuLinks,
   sectionElements,
   menuScrollableLinks
-} from './dom-elements.js';
+} from './dom-elements-common.js';
 
 export function setupNavbar() {
   window.addEventListener('scroll', () => {
@@ -50,4 +50,4 @@ export function setupNavbar() {
       document.body.classList.remove('menu-mobile');
     });
   });
-}
+}

Diff for: src/website/smooth-scrolling.js

@@ -1,4 +1,4 @@
-import { menuScrollableLinks, navbarElement } from './dom-elements.js';
+import { menuScrollableLinks, navbarElement } from './dom-elements-common.js';
 import { isWideScreen } from '../utils.js';
 
 import $ from 'jquery';
@@ -9,7 +9,7 @@ import log from 'loglevel';
 // jQuery somewhere else.
 export function smoothScrollTo(element) {
   // TODO: don't use jQuery
-  
+
   const navHeight = $(navbarElement).height();
   const targetElement = $(element);