kbenestad/mdcms
1
0
Fork 0
mirror of https://github.com/kbenestad/mdcms.git synced 2026-06-18 15:24:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix hamburger hidden on iOS: hide sidebar with visibility on mobile

Browse source 
iOS Safari can fail to honour transform: translateX(-100%) on position:fixed
elements, leaving the sidebar sitting over the content at z-index 100 and
blocking the mobile-header (z-index 50) that contains the hamburger.

Add visibility: hidden to the closed mobile sidebar. A transition-delay of
0.3s (matching the transform duration) keeps the slide-out animation intact —
the sidebar slides away first, then disappears. The open state resets the
transition immediately so the sidebar becomes visible before sliding in.

https://claude.ai/code/session_017r3kqm4FgEGy2DPPzYcLYQ
This commit is contained in:
Claude 2026-05-19 07:22:06 +00:00
parent 3ac0a89be1
commit 283e0f8299
No known key found for this signature in database
1 changed files with 3 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/index.html
View file

@ -171,7 +171,7 @@ body {
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;
transition: background-color 0.2s ease, transform 0.3s ease; transition: background-color 0.2s ease, transform 0.3s ease, visibility 0s ease 0.3s;
} }
.layout-sidebar.nav-left .sidebar { left: 0; } .layout-sidebar.nav-left .sidebar { left: 0; }
@ -738,12 +738,13 @@ body {
.layout-sidebar .sidebar { .layout-sidebar .sidebar {
transform: translateX(-100%); transform: translateX(-100%);
visibility: hidden;
width: 80vw; width: 80vw;
max-width: 320px; max-width: 320px;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.layout-sidebar.nav-right .sidebar { transform: translateX(100%); } .layout-sidebar.nav-right .sidebar { transform: translateX(100%); }
.layout-sidebar .sidebar.open { transform: translateX(0); } .layout-sidebar .sidebar.open { transform: translateX(0); visibility: visible; transition: background-color 0.2s ease, transform 0.3s ease; }
.layout-sidebar .main-area { margin-left: 0 !important; margin-right: 0 !important; } .layout-sidebar .main-area { margin-left: 0 !important; margin-right: 0 !important; }
.main-content { padding: 1rem 1.25rem 3rem; } .main-content { padding: 1rem 1.25rem 3rem; }