Do not initialize sidebar multiple times

Author: josevalim

assets/css/sidebar.css

@@ -109,25 +109,25 @@
   display: none;
 }
 
-.sidebar .sidebar-listNav {
+.sidebar .sidebar-list-nav {
   display: flex;
   margin: 0;
   padding: 4px 4px 0 4px;
 }
 
-.sidebar .sidebar-listNav :is(li, li button) {
+.sidebar .sidebar-list-nav :is(li, li button) {
   text-transform: uppercase;
   letter-spacing: 0.02em;
   font-size: 14px;
   color: var(--sidebarMuted);
 }
 
-.sidebar .sidebar-listNav li {
+.sidebar .sidebar-list-nav li {
   display: inline-block;
   padding: 0;
 }
 
-.sidebar .sidebar-listNav li button {
+.sidebar .sidebar-list-nav li button {
   background: none;
   border: 0;
   border-radius: 0;
@@ -142,16 +142,16 @@
   transition: all 150ms;
 }
 
-.sidebar .sidebar-listNav li:is(.selected) button {
+.sidebar .sidebar-list-nav li:is(.selected) button {
   background-color: var(--sidebarBackground);
   border-top: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
 }
 
-.sidebar .sidebar-listNav li:not(.selected) button {
+.sidebar .sidebar-list-nav li:not(.selected) button {
   border-top: var(--navTabBorderWidth) solid var(--sidebarHeader);
 }
 
-.sidebar .sidebar-listNav li:is(:hover):not(.selected) button {
+.sidebar .sidebar-list-nav li:is(:hover):not(.selected) button {
   background-color: var(--sidebarInactiveItemMarker);
   border-top: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
   color: var(--sidebarAccentMain);

assets/js/sidebar/sidebar-list.js

@@ -8,8 +8,9 @@ const SIDEBAR_TYPE = {
   tasks: 'tasks'
 }
 
-const SIDEBAR_TAB_TYPES = [SIDEBAR_TYPE.extras, SIDEBAR_TYPE.modules, SIDEBAR_TYPE.tasks]
+let sidebarInitialized = false
 
+const SIDEBAR_TAB_TYPES = [SIDEBAR_TYPE.extras, SIDEBAR_TYPE.modules, SIDEBAR_TYPE.tasks]
 const sidebarNodeListSelector = type => `#${type}-full-list`
 
 /**
@@ -19,9 +20,13 @@ export function initialize () {
   SIDEBAR_TAB_TYPES.forEach(type => {
     renderSidebarNodeList(getSidebarNodes(), type)
   })
+
   markActiveSidebarTab(getCurrentPageSidebarType())
   markCurrentHashInSidebar()
   scrollNodeListToCurrentCategory()
+
+  if (sidebarInitialized) return
+  sidebarInitialized = true
   addEventListeners()
 }
 
@@ -191,7 +196,7 @@ function addEventListeners () {
   })
 
   // provide left/right arrow navigation for tablist, as required by ARIA authoring practices guide
-  const tabList = qs('#sidebar-listNav')
+  const tabList = qs('#sidebar-list-nav')
   tabList.addEventListener('keydown', (e) => {
     if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') { return }
 

formatters/html/dist/html-MQUHN72N.js

@@ -22,7 +22,7 @@
         </div>
       </div>
     </div>
-    <ul id="sidebar-listNav" class="sidebar-listNav" role="tablist">
+    <ul id="sidebar-list-nav" class="sidebar-list-nav" role="tablist">
       <li>
         <button id="extras-list-tab-button" role="tab" data-type="extras" aria-controls="extras-tab-panel" aria-selected="true" tabindex="0">
           <%= config.extra_section || "Pages" %>