aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/MainNav/MainNav.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-29 12:13:34 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-29 18:30:05 +0200
commit7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch)
treebfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/MainNav/MainNav.tsx
parent5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff)
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries so it is easier to start from scratch.
Diffstat (limited to 'src/components/MainNav/MainNav.tsx')
-rw-r--r--src/components/MainNav/MainNav.tsx155
1 files changed, 0 insertions, 155 deletions
diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
deleted file mode 100644
index 9cb6b4c..0000000
--- a/src/components/MainNav/MainNav.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import {
- BlogIcon,
- ContactIcon,
- CVIcon,
- HamburgerIcon,
- HomeIcon,
- ProjectsIcon,
-} from '@components/Icons';
-import { NavItem } from '@ts/types/nav';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { ForwardedRef, forwardRef, SetStateAction } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './MainNav.module.scss';
-
-const MainNav = (
- {
- isOpened,
- setIsOpened,
- }: {
- isOpened: boolean;
- setIsOpened: (value: SetStateAction<boolean>) => void;
- },
- ref: ForwardedRef<HTMLDivElement>
-) => {
- const intl = useIntl();
- const router = useRouter();
-
- const mainNavConfig: NavItem[] = [
- {
- id: 'home',
- name: intl.formatMessage({
- defaultMessage: 'Home',
- description: 'MainNav: home link',
- id: 'ZJMNRW',
- }),
- slug: '/',
- },
- {
- id: 'blog',
- name: intl.formatMessage({
- defaultMessage: 'Blog',
- description: 'MainNav: blog link',
- id: 'zPJifH',
- }),
- slug: '/blog',
- },
- {
- id: 'projects',
- name: intl.formatMessage({
- defaultMessage: 'Projects',
- description: 'MainNav: projects link',
- id: 'akSutM',
- }),
- slug: '/projets',
- },
- {
- id: 'cv',
- name: intl.formatMessage({
- defaultMessage: 'Resume',
- description: 'MainNav: resume link',
- id: 'jpv+Nz',
- }),
- slug: '/cv',
- },
- {
- id: 'contact',
- name: intl.formatMessage({
- defaultMessage: 'Contact',
- description: 'MainNav: contact link',
- id: 'c2NtPj',
- }),
- slug: '/contact',
- },
- ];
-
- const getIcon = (id: string) => {
- switch (id) {
- case 'home':
- return <HomeIcon />;
- case 'blog':
- return <BlogIcon />;
- case 'contact':
- return <ContactIcon />;
- case 'cv':
- return <CVIcon />;
- case 'projects':
- return <ProjectsIcon />;
- default:
- break;
- }
- };
-
- const navItems = mainNavConfig.map((item) => {
- const currentClass = router.asPath === item.slug ? styles.current : '';
-
- return (
- <li key={item.id}>
- <Link href={item.slug}>
- <a className={`${styles.link} ${currentClass}`}>
- {getIcon(item.id)}
- <span>{item.name}</span>
- </a>
- </Link>
- </li>
- );
- });
-
- return (
- <div id="main-nav" ref={ref} className={styles.wrapper}>
- <input
- type="checkbox"
- name="main-nav__checkbox"
- id="main-nav__checkbox"
- aria-labelledby="main-nav-toggle"
- className={styles.checkbox}
- checked={isOpened}
- onChange={() => setIsOpened(!isOpened)}
- autoComplete="off"
- />
- <label
- htmlFor="main-nav__checkbox"
- id="main-nav-toggle"
- className={styles.label}
- >
- <HamburgerIcon isActive={isOpened} />
- <span className="screen-reader-text">
- {isOpened
- ? intl.formatMessage({
- defaultMessage: 'Close menu',
- description: 'MainNav: close button',
- id: 'dE8xxV',
- })
- : intl.formatMessage({
- defaultMessage: 'Open menu',
- description: 'MainNav: open button',
- id: 'azc1GT',
- })}
- </span>
- </label>
- <nav
- className={styles.nav}
- aria-label={intl.formatMessage({
- defaultMessage: 'Primary',
- description: 'MainNav: aria-label',
- id: 'H7C5Bk',
- })}
- >
- <ul className={styles.list}>{navItems}</ul>
- </nav>
- </div>
- );
-};
-
-export default forwardRef(MainNav);