diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 | 
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/MainNav | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (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')
| -rw-r--r-- | src/components/MainNav/MainNav.module.scss | 242 | ||||
| -rw-r--r-- | src/components/MainNav/MainNav.tsx | 155 | 
2 files changed, 0 insertions, 397 deletions
| 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); | 
