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/auth/auth-page-shell.tsx
+1 -1
View File
@@ -161,7 +161,7 @@ export function AuthPageShell({
/> />
</div> </div>
<div className="hidden space-y-2 text-center lg:block lg:text-left"> <div className="space-y-2 text-center lg:text-left">
<Typography variant="h2" className="text-3xl"> <Typography variant="h2" className="text-3xl">
{title} {title}
</Typography> </Typography>
components/layout/dashboard-shell.tsx
+20 -17
View File
@@ -52,23 +52,26 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
<AppSidebar pathname={pathname} user={user} /> <AppSidebar pathname={pathname} user={user} />
</aside> </aside>
{isMobileSidebarOpen ? ( {/* Mobile Sidebar Overlay */}
<div className="fixed inset-0 z-50 lg:hidden"> {isMobileSidebarOpen && (
<button <div
type="button" className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity"
aria-label="Menuyu kapat" onClick={() => setIsMobileSidebarOpen(false)}
className="absolute inset-0 bg-overlay" />
onClick={() => setIsMobileSidebarOpen(false)} )}
/>
<aside className="relative h-dvh border-r border-border bg-background"> {/* Mobile Sidebar Drawer */}
<AppSidebar <aside
pathname={pathname} 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 ${
user={user} isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
onNavigate={() => setIsMobileSidebarOpen(false)} }`}
/> >
</aside> <AppSidebar
</div> pathname={pathname}
) : null} user={user}
onNavigate={() => setIsMobileSidebarOpen(false)}
/>
</aside>
<div className="flex flex-1 flex-col min-w-0"> <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"> <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} /> <AppSidebar pathname={pathname} user={user} progress={progress} />
</aside> </aside>
{isMobileSidebarOpen ? ( {/* Mobile Sidebar Overlay */}
<div className="fixed inset-0 z-50 lg:hidden"> {isMobileSidebarOpen && (
<button <div
type="button" className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-opacity"
aria-label="Menuyu kapat" onClick={() => setIsMobileSidebarOpen(false)}
className="absolute inset-0 bg-overlay" />
onClick={() => setIsMobileSidebarOpen(false)} )}
/>
<aside className="relative h-dvh border-r border-border bg-background"> {/* Mobile Sidebar Drawer */}
<AppSidebar <aside
pathname={pathname} 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 ${
user={user} isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
progress={progress} }`}
onNavigate={() => setIsMobileSidebarOpen(false)} >
/> <AppSidebar
</aside> pathname={pathname}
</div> user={user}
) : null} progress={progress}
onNavigate={() => setIsMobileSidebarOpen(false)}
/>
</aside>
<div className="flex flex-1 flex-col min-w-0"> <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"> <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">