Merge pull request #37 from gabrielduete/feat/create-navbar

feat: create navbar

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
 
   "editor.formatOnSave": true,

jest.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const nextJest = require('next/jest')
+const path = require('path')
 
 const createJestConfig = nextJest({
   dir: './',
@@ -9,8 +10,11 @@ const customJestConfig = {
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   moduleDirectories: ['node_modules', '<rootDir>/'],
   testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '^~/src/enums/medias$': path.resolve(__dirname, './src/enums/medias'),
+  },
 }
 
-module.exports = createJestConfig(customJestConfig)
+module.exports = createJestConfig({ ...customJestConfig })
 
 /** o/ font: https://fek.io/blog/add-jest-testing-framework-to-an-existing-next-js-app */

pages/index.page.tsx

@@ -19,13 +19,18 @@ const Home: NextPage = () => {
     return () => clearInterval(timer)
   }, [])
 
+  const redirectToAbout = () => {
+    SoundClickButton()
+    window.open('/about', '_self', 'noreferrer')
+  }
+
   return (
     <>
       <Sound playStatus='PLAYING' {...settingsSound} />
       <S.Wrapper>
         <S.Content>
           <S.Title ref={glitch.ref}>sandevistan</S.Title>
-          <S.Link onClick={() => SoundClickButton()}>
+          <S.Link onClick={redirectToAbout}>
             explore <ArrowRightAltIcon />
           </S.Link>
         </S.Content>

src/components/Footer/styles.ts

@@ -12,7 +12,6 @@ export const Footer = styled.footer`
   max-height: auto;
   min-height: 50px;
   background-color: var(--green);
-
   position: fixed;
   left: 0;
   bottom: 0;

src/components/Header/index.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router'
 
+import MobileNavBar from '../NavBar/Mobile'
 import { items } from './Header.data'
 import * as S from './styles'
 
@@ -8,15 +9,18 @@ const Header = () => {
 
   return (
     <S.Header>
-      {items.map(({ name, href }) => {
-        const isPath = router?.pathname === href
+      <S.WrapperLinks>
+        {items.map(({ name, href }) => {
+          const isPath = router?.pathname === href
 
-        return (
-          <S.Link href={href} key={name} isPath={isPath}>
-            {name}
-          </S.Link>
-        )
-      })}
+          return (
+            <S.Link href={href} key={name} isPath={isPath}>
+              {name}
+            </S.Link>
+          )
+        })}
+      </S.WrapperLinks>
+      <MobileNavBar />
     </S.Header>
   )
 }

src/components/Header/styles.ts

@@ -6,17 +6,24 @@ export const Header = styled.header`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--spacing-basic);
+  justify-content: space-between;
   width: 100%;
   height: 60px;
   background-color: var(--green);
-  padding-left: var(--spacing-basic);
+  padding: 0 var(--spacing-basic);
 
   position: fixed;
   top: 0;
   left: 0;
 `
 
+export const WrapperLinks = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-basic);
+`
+
 export const Link = styled.a<{ isPath: boolean }>`
   color: ${({ isPath }) =>
     isPath ? 'color: var(--white)' : 'var(--green-white)'};

src/components/NavBar/Desktop/index.spec.tsx

@@ -0,0 +1,5 @@
+describe('<MobileNavBar />', () => {
+  it.todo('render texts correctly')
+
+  it.todo('toggles the NavBar when BackIcon is clicked')
+})

src/components/NavBar/Desktop/index.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+
+import { SoundClickButton } from '../../../utils/Sounds/index'
+import Equalizer from '../../Equalizer'
+import { navBarMock } from '../Navbar.mock'
+import * as S from './styles'
+
+const DesktopNavBar = () => {
+  const [isOpen, setIsOpen] = useState(true)
+
+  const closeNavBar = () => {
+    SoundClickButton()
+    setIsOpen(!isOpen)
+  }
+
+  return (
+    <>
+      <S.Wrapper showNavBar={isOpen}>
+        <S.NavBar>
+          {navBarMock.map(({ name }, idx) => (
+            <S.Item key={idx}>
+              <S.Link>{name}</S.Link>
+            </S.Item>
+          ))}
+        </S.NavBar>
+        <S.RollbackContainer>
+          <Equalizer />
+          <S.BackIcon onClick={closeNavBar} />
+          <div />
+        </S.RollbackContainer>
+      </S.Wrapper>
+      <S.WrapperColapsed showNavBar={!isOpen}>
+        <S.GoIcon onClick={closeNavBar} />
+      </S.WrapperColapsed>
+    </>
+  )
+}
+
+export default DesktopNavBar

src/components/NavBar/Desktop/styles.ts

@@ -0,0 +1,113 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import { SvgIconProps } from '@mui/material'
+import React from 'react'
+import styled from 'styled-components'
+import medias from '~/src/enums/medias'
+
+const createIconStyles = (Icon: React.ComponentType<SvgIconProps>) => styled(
+  Icon
+)`
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  transition: 0.3s;
+  color: var(--green-white);
+
+  &:hover {
+    color: var(--white);
+  }
+`
+
+export const Wrapper = styled.nav<{ showNavBar: boolean }>`
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 120px);
+  margin-top: 70px;
+  overflow-y: auto;
+  display: ${({ showNavBar }) => !showNavBar && 'none'};
+
+  @media (max-width: ${medias.maxTablet}) {
+    display: none;
+  }
+`
+
+export const WrapperColapsed = styled.nav<{ showNavBar: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow-y: auto;
+  padding: calc(var(--spacing-basic-small) - 2px);
+  background-color: var(--green);
+  border: 1px solid var(--green-white);
+  display: ${({ showNavBar }) => !showNavBar && 'none'};
+
+  @media (max-width: ${medias.maxTablet}) {
+    display: none;
+  }
+`
+
+export const NavBar = styled.div`
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-basic-small);
+  overflow-y: auto;
+
+  ::-webkit-scrollbar {
+    width: 2px;
+  }
+
+  ::-webkit-scrollbar-button {
+    background-color: var(--black);
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    background-color: var(--black);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--white);
+  }
+`
+
+export const Item = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  transition: 0.3s;
+  padding: var(--spacing-basic-small) 0;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--green);
+
+    a {
+      color: var(--white);
+    }
+  }
+`
+
+export const Link = styled.a`
+  font-size: var(--font-small);
+  padding-left: var(--spacing-basic);
+`
+
+export const RollbackContainer = styled.div`
+  max-width: 280px;
+  height: 60px;
+  color: var(--green-white);
+  background-color: var(--green);
+  border: 1px solid var(--green-white);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 10px;
+`
+
+export const BackIcon = createIconStyles(ArrowBackIcon)
+
+export const GoIcon = createIconStyles(ArrowForwardIcon)

src/components/NavBar/Mobile/index.spec.tsx

@@ -0,0 +1,5 @@
+describe('<MobileNavBar />', () => {
+  it.todo('render texts correctly')
+
+  it.todo('toggles the NavBar when BackIcon is clicked')
+})

src/components/NavBar/Mobile/index.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import { navBarMock } from '../Navbar.mock'
+import * as S from './styles'
+
+const MobileNavBar = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <S.Container>
+      <S.IconOpen onClick={() => setIsOpen(true)} />
+      <S.WrapperContent isOpen={isOpen}>
+        <S.IconClose onClick={() => setIsOpen(false)} />
+        <S.WrapperLinks>
+          {navBarMock.map(({ name }, idx) => {
+            return <S.Link key={idx}>{name}</S.Link>
+          })}
+        </S.WrapperLinks>
+      </S.WrapperContent>
+    </S.Container>
+  )
+}
+
+export default MobileNavBar

src/components/NavBar/Mobile/styles.ts

@@ -0,0 +1,57 @@
+import CloseIcon from '@mui/icons-material/Close'
+import MenuIcon from '@mui/icons-material/Menu'
+import { SvgIconProps } from '@mui/material'
+import React from 'react'
+import styled from 'styled-components'
+import medias from '~/src/enums/medias'
+
+type addStyleIcon = {
+  Icon: React.ComponentType<SvgIconProps>
+  alignSelfEnd?: boolean
+}
+
+const addStyledIcon = ({ Icon, alignSelfEnd }: addStyleIcon) => styled(Icon)`
+  align-self: ${alignSelfEnd && 'flex-end'};
+  color: var(--green-white);
+  cursor: pointer;
+  transition: 0.1s;
+
+  &:active {
+    color: var(--white);
+  }
+`
+
+export const Container = styled.nav`
+  @media (min-width: ${medias.maxTablet}) {
+    display: none;
+  }
+`
+
+export const IconOpen = addStyledIcon({ Icon: MenuIcon })
+
+export const IconClose = addStyledIcon({ Icon: CloseIcon, alignSelfEnd: true })
+
+export const WrapperContent = styled.div<{ isOpen: boolean }>`
+  width: 100%;
+  height: 90vh;
+  background-color: var(--green-dark);
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
+  flex-direction: column;
+  align-items: center;
+  overflow-y: scroll;
+`
+
+export const WrapperLinks = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-basic);
+`
+
+export const Link = styled.a`
+  font-size: var(--font-medium);
+  padding-left: var(--spacing-basic);
+  cursor: pointer;
+`

src/components/NavBar/Navbar.mock.ts

@@ -0,0 +1,17 @@
+export const navBarMock = [
+  {
+    name: 'Go',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Vue',
+  },
+  {
+    name: 'React',
+  },
+]

src/enums/medias.ts

@@ -0,0 +1,5 @@
+export default {
+  minMobile: '360px',
+  maxMobile: '768px',
+  maxTablet: '992px',
+} as const