Make sidebar toggle button more visible - blue with white chevron
This commit is contained in:
parent
246ebd8e65
commit
3194737499
@ -124,21 +124,20 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{/* Collapse Toggle Button */}
|
{/* Collapse Toggle Button */}
|
||||||
<Button
|
<button
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => setCollapsed(!collapsed)}
|
onClick={() => setCollapsed(!collapsed)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute -right-3 top-6 w-6 h-6 rounded-full border border-border bg-card shadow-sm",
|
"absolute -right-4 top-8 w-8 h-8 rounded-full border-2 border-blue-500 bg-blue-500 text-white shadow-lg",
|
||||||
"hover:bg-accent z-50"
|
"hover:bg-blue-600 hover:scale-110 transition-all z-50 flex items-center justify-center"
|
||||||
)}
|
)}
|
||||||
|
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||||
>
|
>
|
||||||
{collapsed ? (
|
{collapsed ? (
|
||||||
<ChevronRight className="w-3 h-3" />
|
<ChevronRight className="w-5 h-5" />
|
||||||
) : (
|
) : (
|
||||||
<ChevronLeft className="w-3 h-3" />
|
<ChevronLeft className="w-5 h-5" />
|
||||||
)}
|
)}
|
||||||
</Button>
|
</button>
|
||||||
|
|
||||||
<SidebarContent pathname={pathname} collapsed={collapsed} />
|
<SidebarContent pathname={pathname} collapsed={collapsed} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user