admin-lte 4.0.1 → 4.0.4

package/src/ts/accessibility.ts

@@ -3,6 +3,8 @@
  * WCAG 2.1 AA Compliance Features
  */
 
+import { getLifecycleSignal } from './util/index'
+
 export interface AccessibilityConfig {
   announcements: boolean
   skipLinks: boolean
@@ -15,6 +17,9 @@ export class AccessibilityManager {
   private config: AccessibilityConfig
   private liveRegion: HTMLElement | null = null
   private focusHistory: HTMLElement[] = []
+  // Listeners bound to `document` survive Turbo's <body> swap, so they are
+  // registered with this signal and torn down before the next re-init.
+  private readonly signal: AbortSignal = getLifecycleSignal()
 
   constructor(config: Partial<AccessibilityConfig> = {}) {
     this.config = {
@@ -59,18 +64,34 @@ export class AccessibilityManager {
   private createLiveRegion(): void {
     if (this.liveRegion) return
 
+    // Adopt an existing region instead of appending a duplicate: Turbo caches
+    // the <body> including JS-injected nodes, so a region created before a
+    // navigation is restored along with the snapshot.
+    const existingRegion = document.getElementById('live-region')
+    if (existingRegion) {
+      this.liveRegion = existingRegion
+      return
+    }
+
     this.liveRegion = document.createElement('div')
     this.liveRegion.id = 'live-region'
     this.liveRegion.className = 'live-region'
     this.liveRegion.setAttribute('aria-live', 'polite')
     this.liveRegion.setAttribute('aria-atomic', 'true')
     this.liveRegion.setAttribute('role', 'status')
-    
+
     document.body.append(this.liveRegion)
   }
 
   // WCAG 2.4.1: Bypass Blocks
   private addSkipLinks(): void {
+    // Same Turbo snapshot concern as createLiveRegion: skip links restored
+    // with a cached <body> must not be injected a second time.
+    if (document.querySelector('.skip-links')) {
+      this.ensureSkipTargets()
+      return
+    }
+
     const skipLinksContainer = document.createElement('div')
     skipLinksContainer.className = 'skip-links'
     
@@ -113,51 +134,22 @@ export class AccessibilityManager {
 
   // WCAG 2.4.3: Focus Order & 2.4.7: Focus Visible
   private initFocusManagement(): void {
+    // Note: focus must never be wrapped at the document edges — trapping Tab
+    // inside the page prevents keyboard users from reaching browser chrome
+    // and is itself a WCAG 2.1.2 (No Keyboard Trap) failure. Focus trapping
+    // is only legitimate inside active modal dialogs, which Bootstrap already
+    // handles.
     document.addEventListener('keydown', (event) => {
-      if (event.key === 'Tab') {
-        this.handleTabNavigation(event)
-      }
       if (event.key === 'Escape') {
         this.handleEscapeKey(event)
       }
-    })
+    }, { signal: this.signal })
 
     // Focus management for modals and dropdowns
     this.initModalFocusManagement()
     this.initDropdownFocusManagement()
   }
 
-  private handleTabNavigation(event: KeyboardEvent): void {
-    const focusableElements = this.getFocusableElements()
-    const currentIndex = focusableElements.indexOf(document.activeElement as HTMLElement)
-    
-    if (event.shiftKey) {
-      // Shift+Tab (backward)
-      if (currentIndex <= 0) {
-        event.preventDefault()
-        focusableElements.at(-1)?.focus()
-      }
-    } else if (currentIndex >= focusableElements.length - 1) {
-      // Tab (forward)
-      event.preventDefault()
-      focusableElements[0]?.focus()
-    }
-  }
-
-  private getFocusableElements(): HTMLElement[] {
-    const selector = [
-      'a[href]',
-      'button:not([disabled])',
-      'input:not([disabled])',
-      'select:not([disabled])',
-      'textarea:not([disabled])',
-      '[tabindex]:not([tabindex="-1"])',
-      '[contenteditable="true"]'
-    ].join(', ')
-
-    return Array.from(document.querySelectorAll(selector)) as HTMLElement[]
-  }
-
   private handleEscapeKey(event: KeyboardEvent): void {
     // Close dropdowns, but let Bootstrap handle its own modal keyboard behavior
     const activeModal = document.querySelector('.modal.show')
@@ -181,18 +173,24 @@ export class AccessibilityManager {
     // Add keyboard support for custom components
     document.addEventListener('keydown', (event) => {
       const target = event.target as HTMLElement
-      
+
+      // Never intercept keys inside editable controls: arrow keys must keep
+      // moving the caret in e.g. a navbar search input.
+      if (target.matches('input, textarea, select, [contenteditable], [contenteditable] *')) {
+        return
+      }
+
       // Handle arrow key navigation for menus
       if (target.closest('.nav, .navbar-nav, .dropdown-menu')) {
         this.handleMenuNavigation(event)
       }
-      
+
       // Handle Enter and Space for custom buttons
       if ((event.key === 'Enter' || event.key === ' ') && target.hasAttribute('role') && target.getAttribute('role') === 'button' && !target.matches('button, input[type="button"], input[type="submit"]')) {
         event.preventDefault()
         target.click()
       }
-    })
+    }, { signal: this.signal })
   }
 
   private handleMenuNavigation(event: KeyboardEvent): void {
@@ -201,9 +199,18 @@ export class AccessibilityManager {
     }
 
     const currentElement = event.target as HTMLElement
-    const menuItems = Array.from(currentElement.closest('.nav, .navbar-nav, .dropdown-menu')?.querySelectorAll('a, button') || []) as HTMLElement[]
+    const menuItems = (Array.from(currentElement.closest('.nav, .navbar-nav, .dropdown-menu')?.querySelectorAll('a, button') || []) as HTMLElement[])
+      // Skip items hidden inside collapsed submenus or closed dropdowns.
+      .filter(item => item.offsetParent !== null)
     const currentIndex = menuItems.indexOf(currentElement)
-    
+
+    // Only take over navigation when focus is actually on a menu item;
+    // otherwise stealing the arrow keys would yank focus out of unrelated
+    // controls that merely sit inside a nav container.
+    if (currentIndex === -1) {
+      return
+    }
+
     let nextIndex: number
     
     switch (event.key) {
@@ -244,16 +251,20 @@ export class AccessibilityManager {
       // Disable smooth scrolling
       document.documentElement.style.scrollBehavior = 'auto'
       
-      // Reduce animation duration
-      const style = document.createElement('style')
-      style.textContent = `
-        *, *::before, *::after {
-          animation-duration: 0.01ms !important;
-          animation-iteration-count: 1 !important;
-          transition-duration: 0.01ms !important;
-        }
-      `
-      document.head.append(style)
+      // Reduce animation duration. The <head> survives Turbo navigations, so
+      // only inject the override stylesheet once to avoid stacking duplicates.
+      if (!document.getElementById('adminlte-reduce-motion')) {
+        const style = document.createElement('style')
+        style.id = 'adminlte-reduce-motion'
+        style.textContent = `
+          *, *::before, *::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+          }
+        `
+        document.head.append(style)
+      }
     }
   }
 
@@ -283,6 +294,11 @@ export class AccessibilityManager {
       childList: true,
       subtree: true
     })
+
+    // Stop observing the old <body> before Turbo swaps in a new one.
+    this.signal.addEventListener('abort', () => {
+      observer.disconnect()
+    }, { once: true })
   }
 
   // WCAG 1.3.1: Info and Relationships
@@ -351,6 +367,14 @@ export class AccessibilityManager {
   }
 
   private handleFormError(input: HTMLInputElement): void {
+    // Inputs lacking both an id and a name would otherwise collide on a
+    // single "-error" id. Assign a stable generated id once and persist it on
+    // the element so repeated `invalid` events reuse the same error node
+    // instead of appending a new orphaned one each time.
+    if (!input.id && !input.name) {
+      input.id = accessibilityUtils.generateId('field')
+    }
+
     const errorId = `${input.id || input.name}-error`
     let errorElement = document.getElementById(errorId)
     
@@ -368,7 +392,14 @@ export class AccessibilityManager {
     }
     
     errorElement.textContent = input.validationMessage
-    input.setAttribute('aria-describedby', errorId)
+    // Append to any existing aria-describedby (e.g. help text) instead of
+    // clobbering it.
+    const describedBy = (input.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean)
+    if (!describedBy.includes(errorId)) {
+      describedBy.push(errorId)
+    }
+
+    input.setAttribute('aria-describedby', describedBy.join(' '))
     input.classList.add('is-invalid')
     
     this.announce(`Error in ${input.labels?.[0]?.textContent || input.name}: ${input.validationMessage}`, 'assertive')
@@ -376,25 +407,33 @@ export class AccessibilityManager {
 
   // Modal focus management
   private initModalFocusManagement(): void {
+    // Capture the trigger on `show` — before Bootstrap (or the `shown`
+    // handler below) moves focus into the modal. Capturing on `shown` would
+    // store an element inside the modal itself, so closing it would "restore"
+    // focus to a now-hidden node and drop focus to <body>.
+    document.addEventListener('show.bs.modal', () => {
+      this.focusHistory.push(document.activeElement as HTMLElement)
+    }, { signal: this.signal })
+
     document.addEventListener('shown.bs.modal', (event) => {
       const modal = event.target as HTMLElement
-      const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
-      
-      if (focusableElements.length > 0) {
-        (focusableElements[0] as HTMLElement).focus()
-      }
-      
-      // Store previous focus
-      this.focusHistory.push(document.activeElement as HTMLElement)
-    })
+      // Respect an explicit [autofocus] before falling back to the first
+      // focusable control.
+      const autofocusElement = modal.querySelector('[autofocus]') as HTMLElement | null
+      const firstFocusable = autofocusElement ||
+        (modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') as HTMLElement | null)
+
+      firstFocusable?.focus()
+    }, { signal: this.signal })
 
     document.addEventListener('hidden.bs.modal', () => {
-      // Restore previous focus
+      // Restore previous focus, unless the trigger has since been removed
+      // from the document (e.g. a delete-confirmation modal removing its row).
       const previousElement = this.focusHistory.pop()
-      if (previousElement) {
+      if (previousElement?.isConnected) {
         previousElement.focus()
       }
-    })
+    }, { signal: this.signal })
   }
 
   // Dropdown focus management
@@ -407,7 +446,7 @@ export class AccessibilityManager {
       if (firstItem) {
         firstItem.focus()
       }
-    })
+    }, { signal: this.signal })
   }
 
   // Public API methods
@@ -460,7 +499,7 @@ export class AccessibilityManager {
           event.preventDefault()
         }
       }
-    })
+    }, { signal: this.signal })
   }
 
   public addLandmarks(): void {
@@ -470,7 +509,9 @@ export class AccessibilityManager {
       const appMain = document.querySelector('.app-main')
       if (appMain) {
         appMain.setAttribute('role', 'main')
-        appMain.id = 'main'
+        if (!appMain.id) {
+          appMain.id = 'main'
+        }
       }
     }
 
@@ -505,10 +546,29 @@ export const initAccessibility = (config?: Partial<AccessibilityConfig>): Access
   return new AccessibilityManager(config)
 }
 
+// Parse a CSS color into RGB channels. Supports rgb()/rgba() strings and
+// 3- or 6-digit hex notation; anything else falls back to black.
+const parseColorChannels = (color: string): number[] => {
+  const hexMatch = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(color.trim())
+  if (hexMatch) {
+    let hex = hexMatch[1]
+    if (hex.length === 3) {
+      hex = [...hex].map(character => character + character).join('')
+    }
+
+    return [
+      Number.parseInt(hex.slice(0, 2), 16),
+      Number.parseInt(hex.slice(2, 4), 16),
+      Number.parseInt(hex.slice(4, 6), 16)
+    ]
+  }
+
+  return color.match(/\d+/g)?.map(Number) || [0, 0, 0]
+}
+
 // Utility function for luminance calculation
 const getLuminance = (color: string): number => {
-  const rgb = color.match(/\d+/g)?.map(Number) || [0, 0, 0]
-  const [r, g, b] = rgb.map(c => {
+  const [r, g, b] = parseColorChannels(color).map(c => {
     c = c / 255
     return c <= 0.039_28 ? c / 12.92 : (c + 0.055) ** 2.4 / (1.055 ** 2.4)
   })

package/src/ts/adminlte.ts

@@ -8,7 +8,7 @@ import PushMenu from './push-menu.js'
 import { initAccessibility } from './accessibility.js'
 
 /**
- * AdminLTE v4.0.0
+ * AdminLTE v4.0.4
  * Author: Colorlib
  * Website: AdminLTE.io <https://adminlte.io>
  * License: Open source - MIT <https://opensource.org/licenses/MIT>

package/src/ts/card-widget.ts

@@ -75,6 +75,7 @@ class CardWidget {
 
     if (this._parent) {
       this._parent.classList.add(CLASS_NAME_COLLAPSING)
+      this._parent.classList.remove(CLASS_NAME_EXPANDING)
 
       // Only target direct children to avoid affecting nested cards
       const elm = this._parent?.querySelectorAll(`:scope > ${SELECTOR_CARD_BODY}, :scope > ${SELECTOR_CARD_FOOTER}`)
@@ -86,7 +87,9 @@ class CardWidget {
       })
 
       setTimeout(() => {
-        if (this._parent) {
+        // Guard against a stale timer: if expand() ran while this collapse
+        // was still animating, the card must not end up marked collapsed.
+        if (this._parent?.classList.contains(CLASS_NAME_COLLAPSING)) {
           this._parent.classList.add(CLASS_NAME_COLLAPSED)
           this._parent.classList.remove(CLASS_NAME_COLLAPSING)
         }
@@ -101,6 +104,7 @@ class CardWidget {
 
     if (this._parent) {
       this._parent.classList.add(CLASS_NAME_EXPANDING)
+      this._parent.classList.remove(CLASS_NAME_COLLAPSING, CLASS_NAME_COLLAPSED)
 
       // Only target direct children to avoid affecting nested cards
       const elm = this._parent?.querySelectorAll(`:scope > ${SELECTOR_CARD_BODY}, :scope > ${SELECTOR_CARD_FOOTER}`)
@@ -112,8 +116,9 @@ class CardWidget {
       })
 
       setTimeout(() => {
-        if (this._parent) {
-          this._parent.classList.remove(CLASS_NAME_COLLAPSED, CLASS_NAME_EXPANDING)
+        // Same stale-timer guard as collapse(), in the other direction.
+        if (this._parent?.classList.contains(CLASS_NAME_EXPANDING)) {
+          this._parent.classList.remove(CLASS_NAME_EXPANDING)
         }
       }, this._config.animationSpeed)
     }
@@ -125,14 +130,23 @@ class CardWidget {
     const event = new Event(EVENT_REMOVE)
 
     if (this._parent) {
-      slideUp(this._parent, this._config.animationSpeed)
+      const parent = this._parent
+      slideUp(parent, this._config.animationSpeed)
+
+      // Actually remove the card once the animation finishes — hiding it
+      // would keep its form fields submitting and its ids in the document.
+      setTimeout(() => {
+        parent.remove()
+      }, this._config.animationSpeed)
     }
 
     this._element?.dispatchEvent(event)
   }
 
   toggle() {
-    if (this._parent?.classList.contains(CLASS_NAME_COLLAPSED)) {
+    // A card mid-collapse counts as collapsed so a second click during the
+    // animation reverses it instead of being swallowed.
+    if (this._parent?.classList.contains(CLASS_NAME_COLLAPSED) || this._parent?.classList.contains(CLASS_NAME_COLLAPSING)) {
       this.expand()
       return
     }
@@ -189,6 +203,14 @@ class CardWidget {
           if (this._parent?.classList.contains(CLASS_NAME_WAS_COLLAPSED)) {
             this._parent.classList.remove(CLASS_NAME_WAS_COLLAPSED)
           }
+
+          // Drop the inline sizing/transition once the restore transition has
+          // finished so the card doesn't carry stale styles forever.
+          setTimeout(() => {
+            this._parent?.style.removeProperty('height')
+            this._parent?.style.removeProperty('width')
+            this._parent?.style.removeProperty('transition')
+          }, 150)
         }
       }, 10)
     }
@@ -215,10 +237,13 @@ class CardWidget {
 onDOMContentLoaded(() => {
   const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE)
 
+  // Use currentTarget (the [data-lte-toggle] button itself), not target:
+  // clicking the <i> icon inside the button would otherwise make the widget's
+  // events fire on the icon instead of the button.
   collapseBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
-      const target = event.target as HTMLElement
+      const target = event.currentTarget as HTMLElement
       const data = new CardWidget(target, Default)
       data.toggle()
     })
@@ -229,7 +254,7 @@ onDOMContentLoaded(() => {
   removeBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
-      const target = event.target as HTMLElement
+      const target = event.currentTarget as HTMLElement
       const data = new CardWidget(target, Default)
       data.remove()
     })
@@ -240,7 +265,7 @@ onDOMContentLoaded(() => {
   maxBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
-      const target = event.target as HTMLElement
+      const target = event.currentTarget as HTMLElement
       const data = new CardWidget(target, Default)
       data.toggleMaximize()
     })

package/src/ts/fullscreen.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  getLifecycleSignal,
   onDOMContentLoaded
 } from './util/index'
 
@@ -23,6 +24,34 @@ const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]'
 const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]'
 const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]'
 
+/**
+ * Keep the icons and custom events in sync with the browser's actual
+ * fullscreen state. Driving this from the `fullscreenchange` event (rather
+ * than from the request/exit calls) means the UI stays correct no matter how
+ * the transition happened — including the cases the imperative approach could
+ * never catch: a request that was denied (permissions policy, missing
+ * `allowfullscreen` on an iframe, lost user gesture) and an exit triggered by
+ * the user pressing ESC or F11.
+ */
+function syncFullScreenState(): void {
+  const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
+  const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
+  const isFullScreen = Boolean(document.fullscreenElement)
+
+  // Toggle Bootstrap's .d-none utility instead of hardcoding inline
+  // display:block. The previous approach overrode the icon library's
+  // natural display value (eg. some icon fonts use inline-block) and
+  // caused the icon to shift its position. Fixes #6021.
+  iconMaximize?.classList.toggle('d-none', isFullScreen)
+  iconMinimize?.classList.toggle('d-none', !isFullScreen)
+
+  const eventName = isFullScreen ? EVENT_MAXIMIZED : EVENT_MINIMIZED
+
+  document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE).forEach(button => {
+    button.dispatchEvent(new Event(eventName))
+  })
+}
+
 /**
  * Class Definition.
  * ============================================================================
@@ -37,54 +66,29 @@ class FullScreen {
   }
 
   inFullScreen(): void {
-    const event = new Event(EVENT_MAXIMIZED)
-
-    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
-    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
-
-    void document.documentElement.requestFullscreen()
-
-    // Toggle Bootstrap's .d-none utility instead of hardcoding inline
-    // display:block. The previous approach overrode the icon library's
-    // natural display value (eg. some icon fonts use inline-block) and
-    // caused the icon to shift its position. Fixes #6021.
-    if (iconMaximize) {
-      iconMaximize.classList.add('d-none')
-    }
-
-    if (iconMinimize) {
-      iconMinimize.classList.remove('d-none')
-    }
-
-    this._element.dispatchEvent(event)
+    // Fire-and-forget: the resulting `fullscreenchange` event updates the
+    // icons and dispatches `maximized.lte.fullscreen`. If the request is
+    // denied the event never fires, so the UI correctly stays untouched.
+    void document.documentElement.requestFullscreen().catch(() => {
+      // Request denied — nothing to undo.
+    })
   }
 
   outFullscreen(): void {
-    const event = new Event(EVENT_MINIMIZED)
-
-    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
-    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
-
-    void document.exitFullscreen()
-
-    if (iconMaximize) {
-      iconMaximize.classList.remove('d-none')
-    }
-
-    if (iconMinimize) {
-      iconMinimize.classList.add('d-none')
-    }
-
-    this._element.dispatchEvent(event)
+    void document.exitFullscreen().catch(() => {
+      // Exit failed — nothing to undo.
+    })
   }
 
   toggleFullScreen(): void {
-    if (document.fullscreenEnabled) {
-      if (document.fullscreenElement) {
-        this.outFullscreen()
-      } else {
-        this.inFullScreen()
-      }
+    if (!document.fullscreenEnabled) {
+      return
+    }
+
+    if (document.fullscreenElement) {
+      this.outFullscreen()
+    } else {
+      this.inFullScreen()
     }
   }
 }
@@ -94,6 +98,8 @@ class FullScreen {
  * ============================================================================
  */
 onDOMContentLoaded(() => {
+  document.addEventListener('fullscreenchange', syncFullScreenState, { signal: getLifecycleSignal() })
+
   const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
 
   buttons.forEach(btn => {

package/src/ts/layout.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  getLifecycleSignal,
   onDOMContentLoaded
 } from './util/index'
 
@@ -62,7 +63,7 @@ class Layout {
 
 onDOMContentLoaded(() => {
   const layout = new Layout(document.body)
-  window.addEventListener('resize', () => layout.holdTransition(200))
+  window.addEventListener('resize', () => layout.holdTransition(200), { signal: getLifecycleSignal() })
 
   setTimeout(() => {
     document.body.classList.add(CLASS_NAME_APP_LOADED)

package/src/ts/push-menu.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  getLifecycleSignal,
   onDOMContentLoaded
 } from './util/index'
 
@@ -55,7 +56,9 @@ type Config = {
 }
 
 const Defaults: Config = {
-  sidebarBreakpoint: 992,
+  // Matches the CSS convention (breakpoint-max = breakpoint - .02) so that a
+  // window of exactly 992px is classified as desktop by both JS and CSS.
+  sidebarBreakpoint: 991.98,
   enablePersistence: false
 }
 
@@ -360,18 +363,31 @@ onDOMContentLoaded(() => {
   const pushMenu = new PushMenu(sidebar, config)
   pushMenu.init()
 
-  // Update the sidebar state on window resize events.
+  // Update the sidebar state only when the viewport crosses the sidebar
+  // breakpoint. matchMedia fires exactly on crossings, so height-only resizes
+  // (mobile URL bar / keyboard show-hide) and same-side width changes never
+  // disturb a sidebar state the user chose. init() has already read the
+  // effective breakpoint from the CSS, so the query uses the final value.
 
-  window.addEventListener('resize', () => {
-    pushMenu.setupSidebarBreakPoint()
+  const breakpointQuery = globalThis.matchMedia(`(max-width: ${pushMenu._config.sidebarBreakpoint}px)`)
+
+  breakpointQuery.addEventListener('change', () => {
     pushMenu.updateStateByResponsiveLogic()
-  })
+  }, { signal: getLifecycleSignal() })
 
   // Create the sidebar overlay element and append it to the app wrapper.
+  // Reuse an existing overlay if present: Turbo restores cached <body>
+  // snapshots that already contain the injected node (listeners are gone
+  // after the restore — the snapshot is a clone — so they are rebound below).
 
-  const sidebarOverlay = document.createElement('div')
-  sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
-  document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
+  const appWrapper = document.querySelector(SELECTOR_APP_WRAPPER)
+  let sidebarOverlay = appWrapper?.querySelector(`:scope > .${CLASS_NAME_SIDEBAR_OVERLAY}`) as HTMLElement | null
+
+  if (!sidebarOverlay) {
+    sidebarOverlay = document.createElement('div')
+    sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
+    appWrapper?.append(sidebarOverlay)
+  }
 
   // Handle touch events on overlay (area outside sidebar), usually we want to
   // close the sidebar when the user taps outside the sidebar on mobile