Fix sidebar dropdown direction and accidental mobile drawer opening
- CSS: When sidebar is collapsed, open user-menu dropdown to the right (left: 0, right: auto) via data-sidebar-expanded="false" selector. - JS: Guard drawerToggle change handler – prevent mobile drawer from opening on desktop viewports (window.innerWidth >= 1024). - HTML: Add phx-update="ignore" to mobile-drawer checkbox to prevent LiveView from resetting its checked state on DOM patches.
This commit is contained in:
parent
97fcae3e9d
commit
c637b6b84f
3 changed files with 20 additions and 1 deletions
|
|
@ -357,4 +357,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
Collapsed Sidebar: User Menu Dropdown Richtung
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* Bei eingeklappter Sidebar liegt der Avatar-Button am linken Rand.
|
||||||
|
dropdown-end würde das Menü nach links öffnen (off-screen).
|
||||||
|
Stattdessen nach rechts öffnen (in den Content-Bereich). */
|
||||||
|
#app-layout[data-sidebar-expanded="false"] .dropdown.dropdown-top > ul.dropdown-content {
|
||||||
|
right: auto !important;
|
||||||
|
left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* This file is for your main application CSS */
|
/* This file is for your main application CSS */
|
||||||
|
|
|
||||||
|
|
@ -228,6 +228,13 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
|
||||||
// Listen for changes to the drawer checkbox
|
// Listen for changes to the drawer checkbox
|
||||||
drawerToggle.addEventListener("change", () => {
|
drawerToggle.addEventListener("change", () => {
|
||||||
|
// On desktop (lg:drawer-open), the mobile drawer must never open.
|
||||||
|
// The hamburger label is lg:hidden, but guard here as a safety net
|
||||||
|
// against any accidental toggles (e.g. from overlapping elements or JS).
|
||||||
|
if (drawerToggle.checked && window.innerWidth >= 1024) {
|
||||||
|
drawerToggle.checked = false
|
||||||
|
return
|
||||||
|
}
|
||||||
const isOpen = drawerToggle.checked
|
const isOpen = drawerToggle.checked
|
||||||
updateAriaExpanded()
|
updateAriaExpanded()
|
||||||
updateSidebarTabIndex(isOpen)
|
updateSidebarTabIndex(isOpen)
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ defmodule MvWeb.Layouts do
|
||||||
data-sidebar-expanded="true"
|
data-sidebar-expanded="true"
|
||||||
phx-hook="SidebarState"
|
phx-hook="SidebarState"
|
||||||
>
|
>
|
||||||
<input id="mobile-drawer" type="checkbox" class="drawer-toggle" />
|
<input id="mobile-drawer" type="checkbox" class="drawer-toggle" phx-update="ignore" />
|
||||||
|
|
||||||
<div class="drawer-content flex flex-col relative z-0">
|
<div class="drawer-content flex flex-col relative z-0">
|
||||||
<!-- Mobile Header (only visible on mobile) -->
|
<!-- Mobile Header (only visible on mobile) -->
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue