39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
|
import Link from "next/link"
|
||
|
|
import { Cog, LogOut, Gauge } from "lucide-react"
|
||
|
|
import { Flex, Card } from "@radix-ui/themes"
|
||
|
|
import { usePathname } from "next/navigation"
|
||
|
|
|
||
|
|
const Sidebar = () => {
|
||
|
|
const pathname = usePathname()
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{ href: "/account/dashboard", icon: Gauge, label: "Dashboard" },
|
||
|
|
{ href: "/account/settings", icon: Cog, label: "Settings" },
|
||
|
|
{ href: "/account/logout", icon: LogOut, label: "Logout" },
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="w-64 h-screen bg-gray-800 p-4">
|
||
|
|
<Flex direction="column" gap="2">
|
||
|
|
{navItems.map((item) => (
|
||
|
|
<Link
|
||
|
|
key={item.href}
|
||
|
|
href={item.href}
|
||
|
|
className={`
|
||
|
|
flex items-center px-4 py-2 rounded-md text-white
|
||
|
|
transition-colors duration-200
|
||
|
|
${pathname === item.href ? "bg-blue-600 hover:bg-blue-700" : "hover:bg-gray-700"}
|
||
|
|
`}
|
||
|
|
>
|
||
|
|
<item.icon className="w-5 h-5 mr-3" />
|
||
|
|
<span className="text-sm font-medium">{item.label}</span>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</Flex>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Sidebar
|
||
|
|
|