From 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Apr 2022 12:13:34 +0200
Subject: 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.
---
 src/components/MainNav/MainNav.module.scss | 242 -----------------------------
 src/components/MainNav/MainNav.tsx         | 155 ------------------
 2 files changed, 397 deletions(-)
 delete mode 100644 src/components/MainNav/MainNav.module.scss
 delete mode 100644 src/components/MainNav/MainNav.tsx

(limited to 'src/components/MainNav')

diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
deleted file mode 100644
index f3e6c10..0000000
--- a/src/components/MainNav/MainNav.module.scss
+++ /dev/null
@@ -1,242 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
-  --icon-size: #{fun.convert-px(30)};
-
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  height: var(--btn-size);
-  width: calc(var(--btn-size) * 1.2);
-  background: var(--color-bg);
-  position: relative;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      background: inherit;
-    }
-
-    @include mix.dimensions("md") {
-      width: unset;
-      height: unset;
-    }
-  }
-}
-
-.label {
-  --draw-border-thickness: #{fun.convert-px(5)};
-  --draw-border-color1: var(--color-primary-light);
-  --draw-border-color2: var(--color-primary-lighter);
-
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  width: 100%;
-  padding: var(--spacing-2xs);
-
-  &:hover {
-    @extend %draw-borders;
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      display: none;
-    }
-  }
-}
-
-.checkbox {
-  position: absolute;
-
-  // centered checkbox = btn-size - approximated checkbox size / 2
-  top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
-  left: calc(((var(--btn-size) * 1.2) - #{fun.convert-px(14)}) / 2);
-  opacity: 0;
-  cursor: pointer;
-
-  &:hover {
-    ~ .label {
-      @extend %draw-borders;
-    }
-  }
-
-  &:focus {
-    ~ .label {
-      @extend %draw-borders;
-    }
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      display: none;
-    }
-  }
-}
-
-.nav {
-  display: flex;
-  flex-flow: column wrap;
-  place-content: center;
-  padding-bottom: var(--toolbar-size);
-  position: fixed;
-  bottom: 0;
-  z-index: -1;
-  background: var(--color-bg-opacity);
-  box-shadow: 0 0 fun.convert-px(3) 0 var(--color-shadow-dark);
-  text-align: center;
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-  transition: all 0.8s ease-in-out 0s;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      padding-bottom: 0;
-      position: absolute;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: calc(var(--btn-size) + var(--spacing-sm));
-      z-index: unset;
-      border-bottom-width: fun.convert-px(5);
-      transform-origin: 50% -100%;
-    }
-
-    @include mix.dimensions("md") {
-      background: transparent;
-      border: none;
-      box-shadow: none;
-      position: relative;
-      top: 0;
-    }
-  }
-}
-
-.list {
-  @extend %reset-list;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      display: grid;
-      grid-template-columns: min-content min-content;
-      max-height: calc(100vh - var(--toolbar-size));
-    }
-
-    @include mix.dimensions("md") {
-      display: flex;
-      flex-flow: row wrap;
-      align-items: center;
-      gap: var(--spacing-2xs);
-    }
-  }
-}
-
-.link {
-  --draw-border-thickness: #{fun.convert-px(4)};
-  --draw-border-color1: var(--color-primary-light);
-  --draw-border-color2: var(--color-primary-lighter);
-
-  display: block;
-  min-width: fun.convert-px(85);
-  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs);
-  background: var(--color-bg);
-  background-repeat: no-repeat;
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 600;
-  text-decoration: none;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      margin: 0;
-      background-color: inherit;
-      border-radius: 8%;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    @extend %draw-borders;
-  }
-
-  &:focus {
-    color: var(--color-primary-light);
-  }
-
-  &:active {
-    --draw-border-color1: var(--color-primary-dark);
-    --draw-border-color2: var(--color-primary-light);
-
-    @extend %draw-borders;
-  }
-
-  &.current {
-    background-image: linear-gradient(to right, transparent, transparent),
-      linear-gradient(to bottom, transparent, transparent),
-      linear-gradient(
-        to left,
-        var(--color-primary-lighter),
-        var(--color-primary-light)
-      ),
-      linear-gradient(to top, transparent, transparent);
-    background-position: top left, top right, bottom center, bottom left;
-    background-size: 0% var(--draw-border-thickness),
-      var(--draw-border-thickness) 0%, 60% var(--draw-border-thickness),
-      var(--draw-border-thickness) 0%;
-
-    &:hover,
-    &:focus {
-      --draw-border-color1: var(--color-primary-light);
-      --draw-border-color2: var(--color-primary-lighter);
-
-      @extend %draw-borders;
-    }
-
-    &:active {
-      --draw-border-color1: var(--color-primary-dark);
-      --draw-border-color2: var(--color-primary-light);
-
-      @extend %draw-borders;
-    }
-  }
-}
-
-.checkbox:not(:checked) {
-  ~ .nav {
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(100vw);
-
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        transform: perspective(20rem) translate3d(0, 100%, -20rem);
-      }
-
-      @include mix.dimensions("md") {
-        opacity: 1;
-        visibility: visible;
-        transform: none;
-      }
-    }
-  }
-}
-
-.checkbox:checked {
-  ~ .label:hover {
-    span {
-      background: none;
-      box-shadow: none;
-    }
-  }
-
-  &:hover {
-    ~ .label {
-      span {
-        background: none;
-        box-shadow: none;
-      }
-    }
-  }
-}
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);
-- 
cgit v1.2.3