diff --git a/assets/css/app.css b/assets/css/app.css index 0149c5d..21b1b25 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -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 */ diff --git a/assets/js/app.js b/assets/js/app.js index 267ae05..b7168c4 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -228,6 +228,13 @@ document.addEventListener("DOMContentLoaded", () => { // Listen for changes to the drawer checkbox 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 updateAriaExpanded() updateSidebarTabIndex(isOpen) diff --git a/lib/mv_web/components/layouts.ex b/lib/mv_web/components/layouts.ex index 0a0da4c..89e3549 100644 --- a/lib/mv_web/components/layouts.ex +++ b/lib/mv_web/components/layouts.ex @@ -54,7 +54,7 @@ defmodule MvWeb.Layouts do data-sidebar-expanded="true" phx-hook="SidebarState" > - +