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
+12 -9
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"
className="absolute inset-0 bg-overlay"
onClick={() => setIsMobileSidebarOpen(false)} onClick={() => setIsMobileSidebarOpen(false)}
/> />
<aside className="relative h-dvh border-r border-border bg-background"> )}
{/* 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 <AppSidebar
pathname={pathname} pathname={pathname}
user={user} user={user}
onNavigate={() => setIsMobileSidebarOpen(false)} onNavigate={() => setIsMobileSidebarOpen(false)}
/> />
</aside> </aside>
</div>
) : null}
<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
+12 -9
View File
@@ -53,15 +53,20 @@ 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"
className="absolute inset-0 bg-overlay"
onClick={() => setIsMobileSidebarOpen(false)} onClick={() => setIsMobileSidebarOpen(false)}
/> />
<aside className="relative h-dvh border-r border-border bg-background"> )}
{/* 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 <AppSidebar
pathname={pathname} pathname={pathname}
user={user} user={user}
@@ -69,8 +74,6 @@ export function PortalShell({ children, user, progress }: PortalShellProps) {
onNavigate={() => setIsMobileSidebarOpen(false)} onNavigate={() => setIsMobileSidebarOpen(false)}
/> />
</aside> </aside>
</div>
) : null}
<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">