Browse Source

Add checks for if sidebar exists

Added checks to some scripting to check if a sidebar exists before trying to load some code that affects the sidebar and throws console errors because there was no sidebar on the page.
Walter Burditt 1 year ago
parent
commit
9625827c3a
2 changed files with 52 additions and 44 deletions
  1. 11 8
      src/html/components/_scripts.astro
  2. 41 36
      src/ts/push-menu.ts

+ 11 - 8
src/html/components/_scripts.astro

@@ -18,6 +18,7 @@ const distPath = (path != undefined) ? path : '../../../dist'
 
 <!-- OPTIONAL SCRIPTS -->
 <script is:inline>
+  const SELECTOR_APP_SIDEBAR = '.app-sidebar'
   const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
   const Default = {
     scrollbarTheme: 'os-theme-light',
@@ -25,14 +26,16 @@ const distPath = (path != undefined) ? path : '../../../dist'
   }
 
   document.addEventListener("DOMContentLoaded", function() {
-    if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
-      OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
-        scrollbars: {
-          theme: Default.scrollbarTheme,
-          autoHide: Default.scrollbarAutoHide,
-          clickScroll: true
-        }
-      })
+    if (document.querySelector(SELECTOR_APP_SIDEBAR)) {
+      if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
+        OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
+          scrollbars: {
+            theme: Default.scrollbarTheme,
+            autoHide: Default.scrollbarAutoHide,
+            clickScroll: true
+          }
+        })
+      }
     }
   })
 </script>

+ 41 - 36
src/ts/push-menu.ts

@@ -29,6 +29,7 @@ const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
 const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
 const CLASS_NAME_MENU_OPEN = 'menu-open'
 
+const SELECTOR_APP_SIDEBAR = '.app-sidebar'
 const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
 const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
 const SELECTOR_NAV_ITEM = '.nav-item'
@@ -151,49 +152,53 @@ class PushMenu {
  */
 
 domReady(() => {
-  const data = new PushMenu(document.body, Defaults)
-  data.init()
+  const sidebar = document.querySelector(SELECTOR_APP_SIDEBAR)
 
-  window.addEventListener('resize', () => {
+  if (sidebar) {
+    const data = new PushMenu(document.body, Defaults)
     data.init()
-  })
-
-  const sidebarOverlay = document.createElement('div')
-  sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
-  document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
-
-  sidebarOverlay.addEventListener('touchstart', event => {
-    event.preventDefault()
-    const target = event.currentTarget as HTMLElement
-    const data = new PushMenu(target, Defaults)
-    data.collapse()
-  })
-  sidebarOverlay.addEventListener('click', event => {
-    event.preventDefault()
-    const target = event.currentTarget as HTMLElement
-    const data = new PushMenu(target, Defaults)
-    data.collapse()
-  })
-
-  const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
-
-  fullBtn.forEach(btn => {
-    btn.addEventListener('click', event => {
+
+    window.addEventListener('resize', () => {
+      data.init()
+    })
+
+    const sidebarOverlay = document.createElement('div')
+    sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
+    document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
+
+    sidebarOverlay.addEventListener('touchstart', event => {
       event.preventDefault()
+      const target = event.currentTarget as HTMLElement
+      const data = new PushMenu(target, Defaults)
+      data.collapse()
+    })
+    sidebarOverlay.addEventListener('click', event => {
+      event.preventDefault()
+      const target = event.currentTarget as HTMLElement
+      const data = new PushMenu(target, Defaults)
+      data.collapse()
+    })
 
-      let button = event.currentTarget as HTMLElement | undefined
+    const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
 
-      if (button?.dataset.lteToggle !== 'sidebar') {
-        button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined
-      }
+    fullBtn.forEach(btn => {
+      btn.addEventListener('click', event => {
+        event.preventDefault()
 
-      if (button) {
-        event?.preventDefault()
-        const data = new PushMenu(button, Defaults)
-        data.toggle()
-      }
+        let button = event.currentTarget as HTMLElement | undefined
+
+        if (button?.dataset.lteToggle !== 'sidebar') {
+          button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined
+        }
+
+        if (button) {
+          event?.preventDefault()
+          const data = new PushMenu(button, Defaults)
+          data.toggle()
+        }
+      })
     })
-  })
+  }
 })
 
 export default PushMenu