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); |
