refactor: enhance sidebar layout and responsiveness in Dashboard and Portal shells

This commit is contained in:
poyrazavsever
2026-06-09 16:40:46 +03:00
parent a2ac043aed
commit 7f1d01d65c
2 changed files with 14 additions and 12 deletions
+7 -6
View File
@@ -51,7 +51,7 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
<AppSidebar <AppSidebar
pathname={pathname} pathname={pathname}
user={user} user={user}
className="sticky top-0 hidden shrink-0 self-start lg:block" className="sticky top-0 hidden h-screen shrink-0 self-stretch lg:flex"
/> />
{/* Mobile Sidebar Overlay */} {/* Mobile Sidebar Overlay */}
@@ -116,7 +116,10 @@ function AppSidebar({
return ( return (
<Sidebar <Sidebar
variant="bordered" variant="bordered"
className={cn("flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-0", className)} className={cn(
"flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-y-0 border-l-0 border-r border-border",
className
)}
> >
<SidebarHeader className="shrink-0 border-b-0 px-6 py-3"> <SidebarHeader className="shrink-0 border-b-0 px-6 py-3">
<Link href="/" className="flex w-full items-center justify-center"> <Link href="/" className="flex w-full items-center justify-center">
@@ -174,9 +177,7 @@ function AppSidebar({
))} ))}
</SidebarContent> </SidebarContent>
<SidebarSeparator className="mx-0 my-0 w-full" /> <SidebarFooter className="mt-auto shrink-0 border-t border-border px-6 py-5">
<SidebarFooter className="shrink-0 border-t-0 px-6 py-5">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<button <button
@@ -199,7 +200,7 @@ function AppSidebar({
align="end" align="end"
side="top" side="top"
sideOffset={8} sideOffset={8}
className="w-64" className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-0"
> >
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
+7 -6
View File
@@ -53,7 +53,7 @@ export function PortalShell({ children, user, progress }: PortalShellProps) {
pathname={pathname} pathname={pathname}
user={user} user={user}
progress={progress} progress={progress}
className="sticky top-0 hidden shrink-0 self-start lg:block" className="sticky top-0 hidden h-screen shrink-0 self-stretch lg:flex"
/> />
{/* Mobile Sidebar Overlay */} {/* Mobile Sidebar Overlay */}
@@ -123,7 +123,10 @@ function AppSidebar({
return ( return (
<Sidebar <Sidebar
variant="bordered" variant="bordered"
className={cn("flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-0", className)} className={cn(
"flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-y-0 border-l-0 border-r border-border",
className
)}
> >
<SidebarHeader className="shrink-0 border-b-0 px-6 py-3"> <SidebarHeader className="shrink-0 border-b-0 px-6 py-3">
<Link href="/portal" className="flex w-full items-center justify-center"> <Link href="/portal" className="flex w-full items-center justify-center">
@@ -181,9 +184,7 @@ function AppSidebar({
))} ))}
</SidebarContent> </SidebarContent>
<SidebarSeparator className="mx-0 my-0 w-full" /> <SidebarFooter className="mt-auto flex shrink-0 flex-col gap-5 border-t border-border px-6 py-5">
<SidebarFooter className="shrink-0 border-t-0 px-6 py-5 flex flex-col gap-5">
<Card className="bg-primary/5 border-primary/10 shadow-none overflow-hidden relative"> <Card className="bg-primary/5 border-primary/10 shadow-none overflow-hidden relative">
<CardContent className="p-4 space-y-3"> <CardContent className="p-4 space-y-3">
<div className="text-sm font-semibold text-foreground relative z-10">Proje İlerlemesi</div> <div className="text-sm font-semibold text-foreground relative z-10">Proje İlerlemesi</div>
@@ -226,7 +227,7 @@ function AppSidebar({
align="end" align="end"
side="top" side="top"
sideOffset={8} sideOffset={8}
className="w-64" className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-0"
> >
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">