poyrazavsever/neta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: implement slide-in transition for mobile sidebars and update auth layout visibility responsiveness

Browse Source
This commit is contained in:
poyrazavsever
2026-06-09 15:32:31 +03:00
parent 2936bbb4ef
commit f69c4a68ba
3 changed files with 42 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/dashboard-shell.tsx
+20 -17
View File
@@ -52,23 +52,26 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
<AppSidebar pathname={pathname} user={user} />
</aside>
{isMobileSidebarOpen ? (
<div className="fixed inset-0 z-50 lg:hidden">
<button
type="button"
aria-label="Menuyu kapat"
className="absolute inset-0 bg-overlay"
onClick={() => setIsMobileSidebarOpen(false)}
/>
<aside className="relative h-dvh border-r border-border bg-background">
<AppSidebar
pathname={pathname}
user={user}
onNavigate={() => setIsMobileSidebarOpen(false)}
/>
</aside>
</div>
) : null}
{/* Mobile Sidebar Overlay */}
{isMobileSidebarOpen && (
<div
className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity"
onClick={() => setIsMobileSidebarOpen(false)}
/>
)}
{/* Mobile Sidebar Drawer */}
<aside
className={`fixed inset-y-0 left-0 z-50 w-72 transform border-r border-border bg-background transition-transform duration-300 ease-in-out lg:hidden ${
isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<AppSidebar
pathname={pathname}
user={user}
onNavigate={() => setIsMobileSidebarOpen(false)}
/>
</aside>
<div className="flex flex-1 flex-col min-w-0">
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur lg:hidden">
components/layout/portal-shell.tsx
+21 -18
View File
@@ -53,24 +53,27 @@ export function PortalShell({ children, user, progress }: PortalShellProps) {
<AppSidebar pathname={pathname} user={user} progress={progress} />
</aside>
{isMobileSidebarOpen ? (
<div className="fixed inset-0 z-50 lg:hidden">
<button
type="button"
aria-label="Menuyu kapat"
className="absolute inset-0 bg-overlay"
onClick={() => setIsMobileSidebarOpen(false)}
/>
<aside className="relative h-dvh border-r border-border bg-background">
<AppSidebar
pathname={pathname}
user={user}
progress={progress}
onNavigate={() => setIsMobileSidebarOpen(false)}
/>
</aside>
</div>
) : null}
{/* Mobile Sidebar Overlay */}
{isMobileSidebarOpen && (
<div
className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity"
onClick={() => setIsMobileSidebarOpen(false)}
/>
)}
{/* Mobile Sidebar Drawer */}
<aside
className={`fixed inset-y-0 left-0 z-50 w-72 transform border-r border-border bg-background transition-transform duration-300 ease-in-out lg:hidden ${
isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<AppSidebar
pathname={pathname}
user={user}
progress={progress}
onNavigate={() => setIsMobileSidebarOpen(false)}
/>
</aside>
<div className="flex flex-1 flex-col min-w-0">
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur lg:hidden">