Spaces:
Sleeping
Sleeping
File size: 2,074 Bytes
3193174 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import { NavLink } from "react-router-dom";
import {
LayoutDashboard,
Users,
GitBranch,
Settings,
History,
Moon,
Sun,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { useConfigStore } from "@/stores/configStore";
import { cn } from "@/lib/utils";
const navItems = [
{ to: "/", icon: LayoutDashboard, label: "Dashboard" },
{ to: "/agents", icon: Users, label: "Agents" },
{ to: "/workflow", icon: GitBranch, label: "Workflow" },
{ to: "/history", icon: History, label: "History" },
{ to: "/config", icon: Settings, label: "Settings" },
];
export function Sidebar() {
const { darkMode, toggleDarkMode } = useConfigStore();
return (
<div className="flex h-full w-56 flex-col border-r bg-card">
<div className="flex h-14 items-center gap-2 px-4">
<GitBranch className="h-6 w-6 text-primary" />
<span className="text-lg font-bold">gMAS</span>
</div>
<Separator />
<nav className="flex-1 space-y-1 p-2">
{navItems.map((item) => (
<NavLink
key={item.to}
to={item.to}
end={item.to === "/"}
className={({ isActive }) =>
cn(
"flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
isActive
? "bg-primary text-primary-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)
}
>
<item.icon className="h-4 w-4" />
{item.label}
</NavLink>
))}
</nav>
<Separator />
<div className="p-2">
<Button
variant="ghost"
size="sm"
className="w-full justify-start gap-2"
onClick={toggleDarkMode}
>
{darkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
{darkMode ? "Light Mode" : "Dark Mode"}
</Button>
</div>
</div>
);
}
|