75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import {
|
|
VscAccount,
|
|
VscSettings,
|
|
VscMail,
|
|
VscGithubAlt,
|
|
VscCode,
|
|
VscFiles,
|
|
VscEdit,
|
|
} from 'react-icons/vsc';
|
|
|
|
import styles from '@/styles/Sidebar.module.css';
|
|
|
|
const sidebarTopItems = [
|
|
{ Icon: VscFiles, path: '/' },
|
|
{ Icon: VscGithubAlt, path: '/github' },
|
|
{ Icon: VscCode, path: '/projects' },
|
|
{ Icon: VscEdit, path: '/articles' },
|
|
{ Icon: VscMail, path: '/contact' },
|
|
];
|
|
|
|
const sidebarBottomItems = [
|
|
{ Icon: VscAccount, path: '/about' },
|
|
{ Icon: VscSettings, path: '/settings' },
|
|
];
|
|
|
|
const Sidebar = () => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<aside className={styles.sidebar}>
|
|
<div className={styles.sidebarTop}>
|
|
{sidebarTopItems.map(({ Icon, path }) => (
|
|
<Link href={path} key={path}>
|
|
<div
|
|
className={`${styles.iconContainer} ${
|
|
router.pathname === path && styles.active
|
|
}`}
|
|
>
|
|
<Icon
|
|
size={16}
|
|
fill={
|
|
router.pathname === path
|
|
? 'rgb(225, 228, 232)'
|
|
: 'rgb(106, 115, 125)'
|
|
}
|
|
className={styles.icon}
|
|
/>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className={styles.sidebarBottom}>
|
|
{sidebarBottomItems.map(({ Icon, path }) => (
|
|
<div className={styles.iconContainer} key={path}>
|
|
<Link href={path}>
|
|
<Icon
|
|
fill={
|
|
router.pathname === path
|
|
? 'rgb(225, 228, 232)'
|
|
: 'rgb(106, 115, 125)'
|
|
}
|
|
className={styles.icon}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|