You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.2 KiB
51 lines
1.2 KiB
import { useTheme } from 'next-themes';
|
|
import Link from 'next/link';
|
|
|
|
import { useTranslation } from 'next-i18next';
|
|
|
|
import React, { FC } from 'react';
|
|
|
|
import { BiMoon } from 'react-icons/bi';
|
|
import { ImSun } from 'react-icons/im';
|
|
|
|
import styles from './Navbar.module.scss';
|
|
|
|
import { ProfileImage } from '@svg/index';
|
|
|
|
const Navbar: FC = () => {
|
|
const { theme, setTheme } = useTheme();
|
|
const switchTheme = (): void => setTheme(theme == 'dark' ? 'light' : 'dark');
|
|
|
|
return (
|
|
<nav className={styles.bar}>
|
|
<div className="container">
|
|
<div className={styles.content}>
|
|
<div className={styles.header}>
|
|
<Link href="/">
|
|
<a>
|
|
<ProfileImage className="profile" width={32} height={32} />
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<div className={styles.items}>
|
|
<Link href="/#projects">
|
|
<a>Projects</a>
|
|
</Link>
|
|
<Link href="/blog">
|
|
<a>Contact</a>
|
|
</Link>
|
|
<Link href="https://github.com/guusvanmeerveld/portfolio">
|
|
<a>Github</a>
|
|
</Link>
|
|
|
|
<BiMoon onClick={switchTheme} className={styles.moon} />
|
|
<ImSun onClick={switchTheme} className={styles.sun} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|