diff --git a/js/sidebar.js b/js/sidebar.js
index 66bbe41..44067c0 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -1,5 +1,7 @@
 ((Drupal, once,{ computePosition, offset, arrow, shift, flip }) => {
 
+
+
   Drupal.behaviors.navigation = {
     attach: function (context) {
 
@@ -7,47 +9,65 @@
         return;
       }
 
+      /**
+       * Wrapping element.
+       */
       const sidebar = document.querySelector('.navigation__sidebar');
-      const sidebarControl = once('sidebarControl', document.getElementById("sidebar-control"))[0];
+
+      /**
+       * Expand / collapse button
+       */
+      const sidebarControl = once('sidebarControl', document.getElementById('sidebar-control'))[0];
+
+      /**
+       * Indicates if the focused element is contained within the active flyout.
+       * Note we're not using a one off function here because Safari was having
+       * issues tracking `document.activeElement.`
+       *
+       * @todo need to figure out Safari issue and potentially move to one off function.
+       */
       let isFlyoutFocused = false;
 
-      // Expand the active menu.
+      /**
+       * If active item is in the menu trail, then expand the navigation so it
+       * is open on pageload.
+       */
       function expandActiveMenu() {
         const activeItem = document.querySelector('.is-active');
-        // if the active item is second or third level
-        // and the sidebar is expanded, add expanded class
-        // to the level-1 list item
+        // If the active item is second or third level and the sidebar is
+        // expanded, add expanded class to the level-1 list item.
         if ((activeItem.classList.contains('level-2') ||
           activeItem.classList.contains('level-3')) &&
-          document.documentElement.classList.contains("navigation-active")) {
-            activeItem.closest('.menu-item.level-1').
-            classList.
-            add('menu-item--expanded');
+          document.documentElement.classList.contains('navigation-active')) {
+            activeItem.closest('.menu-item.level-1').classList.add('menu-item--expanded');
         }
 
-        // if the active item is third level,
-        // add expanded class to the level-2 item
+        // If the active item is third level, add expanded class to the level-2 item.
         if (activeItem.classList.contains('level-3')) {
-          activeItem.closest('.menu-item.level-2').
-            classList.
-            add('menu-item--expanded');
+          activeItem.closest('.menu-item.level-2').classList.add('menu-item--expanded');
         }
         checkOverflow();
       }
 
-      // Function to expand the sidebar.
+      /**
+       * Expand sidebar.
+       *
+       * @todo possible combine with collapseSidebar()
+       */
       function expandSidebar() {
-        // set appropriate open classes, text, and attributes
-        document.documentElement.classList.add("navigation-active");
+        // Set appropriate open classes, text, and attributes.
+        document.documentElement.classList.add('navigation-active');
         expandActiveMenu();
         Drupal.displace(true);
         document.querySelector('#sidebar-state').textContent = 'Collapse sidebar';
-        sidebarControl.setAttribute("aria-label", "Collapse sidebar");
-        sidebarControl.setAttribute("aria-expanded", "true");
+        sidebarControl.setAttribute('aria-label', 'Collapse sidebar');
+        sidebarControl.setAttribute('aria-expanded', 'true');
 
-        // scroll to the open trays so they're in view
+        // Scroll to the open trays so they're in view.
         const expandedTray = document.querySelector('.menu-item.menu-item--expanded');
         if (expandedTray) {
+          // @todo can this use
+          // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView?
           const sidebar = document.getElementById('navigation-sidebar');
           const trayOffset = expandedTray.getBoundingClientRect().top - sidebar.getBoundingClientRect().top;
           sidebar.scrollTo({top:trayOffset, behavior: "smooth"});
@@ -58,35 +78,48 @@
         flyoutDetach();
       }
 
-      // Function to collapse the sidebar.
+      /**
+       * Collapse sidebar.
+       *
+       * @todo possible combine with expandSidebar()
+       */
       function collapseSidebar() {
         // unset appropriate classes, text, and attributes
-        document.documentElement.classList.remove("navigation-active");
+        document.documentElement.classList.remove('navigation-active');
         Drupal.displace(true);
         document.querySelector('#sidebar-state').textContent = 'Expand sidebar';
-        sidebarControl.setAttribute("aria-label", "Expand sidebar");
-        sidebarControl.setAttribute("aria-expanded", "false");
+        sidebarControl.setAttribute('aria-label', 'Expand sidebar');
+        sidebarControl.setAttribute('aria-expanded', 'false');
 
         // Close all open menu items
-        var elems = document.querySelectorAll(".menu-item.menu-item--expanded");
+        var elems = document.querySelectorAll('.menu-item.menu-item--expanded');
         elems.forEach(function (el) {
-          el.classList.remove("menu-item--expanded");
-          if( el.querySelector(".menu-item--has-dropdown > button[aria-expanded=true]"))
+          el.classList.remove('menu-item--expanded');
+          if( el.querySelector('.menu-item--has-dropdown > button[aria-expanded=true]'))
           {
-            el.querySelector(".menu-item--has-dropdown > button[aria-expanded=true]").setAttribute("aria-expanded", "false");
+            el.querySelector('.menu-item--has-dropdown > button[aria-expanded=true]').setAttribute('aria-expanded', 'false');
           }
-          el.querySelector(".action").textContent = "Extend";
+          el.querySelector('.action').textContent = 'Extend';
         });
 
-        // update localStorage expanded value
+        // Update localStorage expanded value
         localStorage.setItem('Drupal.navigation.sidebarExpanded', 'false');
         flyoutInit();
       }
 
-      // close open dropdowns
+      /**
+       * Close open dropdowns. This ensures only one dropdown menu can be open
+       * at a time.
+       *
+       * @param {Element} [parentListItem] - the parent <li> element that is to
+       * be collapsed.
+       *
+       * @todo this also triggers in "collapsed" mode, which is probably should
+       * not.
+       */
       function collapseDropdowns(parentListItem) {
         const openDropdown = !parentListItem || parentListItem.classList.contains('level-1') ? document.querySelectorAll('.menu-item--expanded') : document.querySelectorAll('.level-2.menu-item--expanded');
-        if (openDropdown.length > 0) {
+        if (openDropdown.length) {
           for (let i = 0; i < openDropdown.length; i++) {
             openDropdown[i].querySelector('.menu-item--has-dropdown > button').setAttribute('aria-expanded', 'false');
             openDropdown[i].querySelector('.menu-item--has-dropdown > button .action').textContent = 'Extend';
@@ -98,7 +131,12 @@
         }
       }
 
-      // show shadow on sticky section only when content is overflowing
+      /**
+       * Show shadow on sticky section only when content is overflowing.
+       *
+       * @todo this should be using either CSS only or Intersection Observer
+       * instead of getBoundingClientRect().
+       */
       function checkOverflow() {
         const stickyMenu = document.querySelector('.navigation__sidebar--sticky-menu');
         const mainMenu = document.getElementById('menu-builder');
@@ -113,8 +151,16 @@
         }
       }
 
-      // calculate and place flyouts relative to their parent links
-      // using the floating UI library
+      /**
+       * Calculate and place flyouts relative to their parent links using the
+       * floating UI library.
+       *
+       * @param {Element} anchorEl - <button> element within the navigation link
+       *   that was hovered over.
+       * @param {Element} flyoutEl - Top level <ul> that contains menu items to
+       *   be shown.
+       * @param {Element} arrowEl - Empty <div> that is styled as an arrow.
+       */
       function flyoutPosition(anchorEl, flyoutEl, arrowEl) {
         computePosition(anchorEl, flyoutEl, {
           placement: 'right',
@@ -150,8 +196,12 @@
         });
       }
 
-      // When flyouts are active, any click outside of the flyout should
-      // close the flyout.
+      /**
+       * When flyouts are active, any click outside of the flyout should close
+       * the flyout.
+       *
+       * @param {Event} e - The click event.
+       */
       function flyoutFocus(e) {
         const clickedEl = e.target;
         if (document.querySelector('.level-1.menu-item--expanded')
@@ -159,6 +209,8 @@
           collapseDropdowns();
 
           // remove the event listener
+          // @todo why are we removing the event listener here instead of either
+          // leaving it or using { once: true } ?
           document.removeEventListener('click', flyoutFocus);
         } else if (document.querySelector('.level-1.menu-item--expanded')
           && document.querySelector('.level-1.menu-item--expanded').contains(clickedEl)) {
@@ -166,11 +218,15 @@
         }
       }
 
+      /**
+       *
+       * @param {Event} e - The mouseenter event.
+       */
       function flyoutOpen(e) {
-        const hoveredEl = e.target;
-        const anchorEl = hoveredEl.querySelector('.navigation-link');
-        const flyoutEl = hoveredEl.querySelector('.navigation-menu-wrapper');
-        const arrowEl = hoveredEl.querySelector('.arrow-ref');
+        const hoveredEl = e.target; // This is the <li> that was hovered over.
+        const anchorEl = hoveredEl.querySelector('.navigation-link'); // This is the <button> element within the navigation link.
+        const flyoutEl = hoveredEl.querySelector('.navigation-menu-wrapper'); // Top level <ul> that contains menu items to be shown.
+        const arrowEl = hoveredEl.querySelector('.arrow-ref'); // Empty <div> that is styled as an arrow.
         // If hovering over menu item that isn't already showing a flyout
         // close any open dropdowns.
         if (!hoveredEl.classList.contains('menu-item--expanded')) {
@@ -194,6 +250,10 @@
         document.addEventListener('click', flyoutFocus, false);
       }
 
+      /**
+       *
+       * @param {Element} parentListItem - The top level <li> element that is expanded.
+       */
       function flyoutClose(parentListItem) {
         // Remove expanded class if sidebar is collapsed and if
         // focus is not inside the submenu.
@@ -204,6 +264,20 @@
         }
       }
 
+      /**
+       * Checks if the new mouseover target is not the open flyout, and if so
+       * will close the current open flyout.
+       *
+       * This is called from `delayedFlyoutClose()`, which sets a timeout on
+       * mouseout, this function then gets called to see if the mouse is *still*
+       * not hovering above the flyout.
+       *
+       * @todo - maybe this should be combined with delayedFlyoutClose(). We
+       * should also likely be using {once: true} on our event listeners so we
+       * don't need to manually remove them.
+       *
+       * @param {Event} e - The mouseover event.
+       */
       function checkIfClosed(e) {
         // If the hovered element is the open flyout, don't close flyout.
         const parentListItem = document.querySelector('.level-1.menu-item--expanded');
@@ -213,8 +287,10 @@
         document.removeEventListener('mouseover', checkIfClosed);
       }
 
-      // Add delay to the flyoutClose function to avoid accidental
-      // flyout closure.
+      /**
+       * Add delay to the flyoutClose function and then will check again to see
+       * verify that the flyout still is not being hovered over before closing.
+       */
       function delayedFlyoutClose() {
         if (document.querySelector('.level-1.menu-item--expanded')) {
           timeoutID = setTimeout(function() {
@@ -223,11 +299,16 @@
         }
       }
 
-      // flyout setup in the colapsed toolbar state
+      /**
+       * Flyout setup in the collapsed toolbar state. This gets called when
+       * toolbar is put into a collapsed state.
+       */
       function flyoutInit() {
         if (document.querySelectorAll('.level-1 > .navigation-menu-wrapper')) {
+          // @todo why are we not doing this in Twig?
+          // Talked to Claire and she's okay with moving this to Twig.
           document.querySelectorAll('.level-1 > .navigation-menu-wrapper').forEach(flyoutEl => {
-            // duplicate the level-1 icon and title
+            // Duplicate the level-1 icon and title
             // append it to the first item in the submenu
             const parentListItem = flyoutEl.parentElement;
             const anchorEl = parentListItem.querySelector('.navigation-link');
@@ -247,7 +328,10 @@
         }
       }
 
-      // remove all flyout related event listeners
+      /**
+       * Remove all flyout related event listeners. This gets called when
+       * toolbar is put into an expanded state.
+       */
       function flyoutDetach() {
         if (document.querySelectorAll('.level-1 > .navigation-menu-wrapper')) {
           document.querySelectorAll('.level-1 > .navigation-menu-wrapper').forEach(flyoutEl => {
@@ -260,9 +344,15 @@
         }
       }
 
-      // We add the displace attribute to a separate full width element
-      // because we don't want this element to have transitions. Note that
-      // this element and the navbar share the same exact width.
+      /**
+       * Initialize Drupal.displace()
+       *
+       * We add the displace attribute to a separate full width element
+       * because we don't want this element to have transitions. Note that
+       * this element and the navbar share the same exact width.
+       *
+       * @todo make this work with RTL.
+       */
       function initDisplace() {
         if (sidebar) {
           const displaceElement = sidebar.querySelector('.navigation__displace-placeholder');
@@ -272,7 +362,8 @@
         }
       }
 
-      // expand/collapse the sidebar
+      // Event listener to expand/collapse the sidebar.
+      // @todo move into an init() function.
       if (sidebarControl) {
         sidebarControl.addEventListener("click", () => {
           if (document.documentElement.classList.contains("navigation-active")) {
@@ -284,11 +375,17 @@
         });
       }
 
-      // expand/collapse sidebar menu dropdowns
+      // Add click event listeners to all buttons and then
+      // contains the callback to expand / collapse the button's menus.
+      // @todo this should be placed within an init function.
       if (document.getElementsByClassName('menu-item--has-dropdown > button')) {
         once('dropdownHandles', '.menu-item--has-dropdown > button', context).forEach(el => el.addEventListener('click', (e) => {
           let buttonEl = '';
           let parentListItem = '';
+
+          // Looks like a check to see if the click target was the <button> or a
+          // nested <span>.
+          // @todo lets use currentTarget instead.
           if (e.target.classList.contains('label')) {
             buttonEl = e.target.parentElement;
             parentListItem = e.target.parentElement.parentElement;
@@ -296,6 +393,8 @@
             buttonEl = e.target;
             parentListItem = e.target.parentElement;
           }
+          // Expand or collapse the menu.
+          // @todo lets move this to one function instead of a big if statement.
           if (parentListItem.classList.contains('menu-item--expanded')) {
             // the clicked item is open, should collapse
             parentListItem.classList.remove('menu-item--expanded');
@@ -318,7 +417,12 @@
       // Add class to selected nav bar option for css styling.
       let current = 0;
       let iconIsActive = false;
-      const shortcutsNav = document.querySelector('.menu--shortcuts');
+      const shortcutsNav = document.querySelector('.menu--shortcuts'); // <div> that wraps all the shortcuts.
+
+      // Does some really complicated stuff that will be refactored. But
+      // basically it checks all links on the page (that are not in the
+      // shortcutsNav <div>), and will set a `current`, and `is-active` CSS
+      // class on those if it's the current page.
       for (var i = 0; i < document.links.length; i++) {
         if (document.links[i].href === document.URL) {
           if (document.links[i].classList.contains('navigation-link')) {
@@ -357,6 +461,7 @@
         }
       });
 
+      // Note his load event fires twice.
       window.addEventListener("load", () => {
          // if not already set, sidebar state should default to expanded
          const sidebarExpanded = localStorage.getItem('Drupal.navigation.sidebarExpanded') !== null ? localStorage.getItem('Drupal.navigation.sidebarExpanded') : 'true';
diff --git a/templates/navigation.html.twig b/templates/navigation.html.twig
index 58ef59b..5a22931 100644
--- a/templates/navigation.html.twig
+++ b/templates/navigation.html.twig
@@ -3,7 +3,7 @@
   <div class="navigation__displace-placeholder"></div>
   <div class="navigation__header">
     <a class="navigation__logo" href="/">
-      <img alt="Drupal logo" src="/{{ path }}/assets/images/logo.png" loading="lazy" width=" 32" height=" 32">
+      <img alt="Drupal logo" src="/{{ path }}/assets/images/logo.png" loading="eager" width=" 32" height="32">
     </a>
   </div>
   <nav id="menu-builder" class="navigation__sidebar--menu" aria-labelledby="menu--site-builder" role="navigation">