fix(bug-2): mobile hamburger — use CSS translate property to override Tailwind v4
Tailwind v4 compiles -translate-x-full to `translate: -100%` (CSS translate shorthand), not `transform`. The old :style set `transform: translateX(0)` — a different property — so the sidebar stayed hidden regardless of mobileOpen. Fix: use `translate: 0` in inline style so it overrides the same property. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>main
parent
b077c8652b
commit
90bf5a0c53
|
|
@ -100,7 +100,7 @@
|
||||||
x-data="{ wsOpen: false }"
|
x-data="{ wsOpen: false }"
|
||||||
:class="$store.sidebar.collapsed ? 'w-16' : 'w-60'"
|
:class="$store.sidebar.collapsed ? 'w-16' : 'w-60'"
|
||||||
class="fixed inset-y-0 left-0 h-screen flex flex-col bg-s1 border-r border-white/[.06] z-40 -translate-x-full md:translate-x-0 transition-[width,transform] duration-200 ease-in-out"
|
class="fixed inset-y-0 left-0 h-screen flex flex-col bg-s1 border-r border-white/[.06] z-40 -translate-x-full md:translate-x-0 transition-[width,transform] duration-200 ease-in-out"
|
||||||
:style="$store.sidebar?.mobileOpen ? 'transform: translateX(0)' : null"
|
:style="$store.sidebar?.mobileOpen ? 'translate: 0' : null"
|
||||||
>
|
>
|
||||||
<!-- Header: Logo + Workspace Switcher -->
|
<!-- Header: Logo + Workspace Switcher -->
|
||||||
<div class="flex-shrink-0 relative" @click.outside="wsOpen = false">
|
<div class="flex-shrink-0 relative" @click.outside="wsOpen = false">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue