SettingsSidebar.tsx

import { Users } from "lucide-react";
import { Link, useLocation } from "react-router";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

const sidebarItems = [
    {
        title: "User Management",
        icon: Users,
        href: "/settings/users",
        variant: "ghost"
    },
    // Add more items here in the future
];

export function SettingsSidebar() {
    const location = useLocation();

    return (
        <aside className="w-64 bg-white/50 backdrop-blur-md border-r border-sky-100 h-[calc(100vh-65px)] flex flex-col pt-4">
            <nav className="flex-1 px-4 space-y-2">
                <div className="mb-4">
                    <h3 className="px-2 text-xs font-semibold text-sky-500 uppercase tracking-wider">
                        Admin Settings
                    </h3>
                </div>
                {sidebarItems.map((item) => (
                    <Button
                        key={item.href}
                        variant="ghost"
                        asChild
                        className={cn(
                            "w-full justify-start",
                            location.pathname === item.href
                                ? "bg-sky-100 text-sky-900"
                                : "text-sky-700 hover:text-sky-900 hover:bg-sky-50"
                        )}
                    >
                        <Link to={item.href}>
                            <item.icon className="mr-2 h-4 w-4" />
                            {item.title}
                        </Link>
                    </Button>
                ))}
            </nav>
        </aside>
    );
}