fix: bump mobile sidebar z-index above sticky page headers
Sidebar and backdrop were z-30, same as sticky page headers (live feed, boards, etc.), causing the hamburger menu to render behind page content. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -58,7 +58,7 @@ export function DashboardSidebar() {
|
||||
: "System degraded";
|
||||
|
||||
return (
|
||||
<aside className="fixed inset-y-0 left-0 z-30 flex w-[280px] -translate-x-full flex-col border-r border-slate-200 bg-white pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-64 md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
|
||||
<aside className="fixed inset-y-0 left-0 z-40 flex w-[280px] -translate-x-full flex-col border-r border-slate-200 bg-white pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-64 md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
|
||||
<div className="flex-1 px-3 py-4">
|
||||
<p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Navigation
|
||||
|
||||
@@ -116,7 +116,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
|
||||
{/* Mobile sidebar overlay */}
|
||||
{sidebarOpen ? (
|
||||
<div
|
||||
className="fixed inset-0 z-30 bg-black/30 md:hidden"
|
||||
className="fixed inset-0 z-40 bg-black/30 md:hidden"
|
||||
onClick={toggleSidebar}
|
||||
onKeyDown={(e) => e.key === "Escape" && toggleSidebar()}
|
||||
role="button"
|
||||
|
||||
Reference in New Issue
Block a user