plane/apps/app/layouts/Navbar/settings-sidebar.tsx
2022-12-13 21:22:44 +05:30

42 lines
1.1 KiB
TypeScript

// next
import Link from "next/link";
import { useRouter } from "next/router";
type Props = {
links: Array<{
label: string;
href: string;
}>;
};
const SettingsSidebar: React.FC<Props> = ({ links }) => {
const router = useRouter();
return (
<nav className="h-screen w-72 border-r border-gray-200">
<div className="h-full p-2 pt-4">
<h2 className="text-lg font-medium leading-5">Settings</h2>
<div className="mt-3">
{links.map((link, index) => (
<h4 key={index}>
<Link href={link.href}>
<a
className={`${
link.href === router.asPath
? "bg-theme text-white"
: "hover:bg-indigo-100 focus:bg-indigo-100"
} flex items-center gap-3 p-2 text-xs font-medium rounded-md outline-none`}
>
{link.label}
</a>
</Link>
</h4>
))}
</div>
</div>
</nav>
);
};
export default SettingsSidebar;