From da68a3848c319ced47ba0c13e1dcd4540044446b Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Fri, 3 Nov 2023 19:25:18 -0300
Subject: [PATCH 1/8] feat: create intiial structure

---
 src/components/NavBar/Navbar.mock.ts | 107 +++++++++++++++++++++++++++
 src/components/NavBar/index.tsx      |   4 +-
 src/components/NavBar/styles.ts      |   6 ++
 3 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/components/NavBar/Navbar.mock.ts
 create mode 100644 src/components/NavBar/styles.ts

diff --git a/src/components/NavBar/Navbar.mock.ts b/src/components/NavBar/Navbar.mock.ts
new file mode 100644
index 0000000..e09a8e2
--- /dev/null
+++ b/src/components/NavBar/Navbar.mock.ts
@@ -0,0 +1,107 @@
+export const navBarMock = [
+  {
+    name: 'About',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Lorem ipsum',
+    subitems: ['About', 'React'],
+  },
+  {
+    name: 'About',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Lorem ipsum',
+    subitems: ['About', 'React'],
+  },
+  {
+    name: 'About',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Lorem ipsum',
+    subitems: ['About', 'React'],
+  },
+  {
+    name: 'About',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Lorem ipsum',
+    subitems: ['About', 'React'],
+  },
+  {
+    name: 'About',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Lorem ipsum',
+    subitems: ['About', 'React'],
+  },
+  {
+    name: 'About',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Lorem ipsum',
+    subitems: ['About', 'React'],
+  },
+
+  {
+    name: 'About',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Lorem ipsum',
+    subitems: ['About', 'React'],
+  },
+  {
+    name: 'About',
+  },
+  {
+    name: 'React',
+  },
+  {
+    name: 'Nextjs',
+  },
+  {
+    name: 'Lorem ipsum',
+    subitems: ['About', 'React'],
+  },
+]
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 52741f7..0761e64 100644
--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/index.tsx
@@ -1,5 +1,7 @@
+import * as S from './styles'
+
 const NavBar = () => {
-  return <nav>nav bar</nav>
+  return <S.Wrapper>aSDPLDFLDFPOPDFKOPDFKOP</S.Wrapper>
 }
 
 export default NavBar
diff --git a/src/components/NavBar/styles.ts b/src/components/NavBar/styles.ts
new file mode 100644
index 0000000..39f3ec0
--- /dev/null
+++ b/src/components/NavBar/styles.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.nav`
+  position: absolute;
+  left: 0;
+`

From 5b0efa0025b0a85fda1deb878b67ba36f523601b Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Mon, 20 Nov 2023 21:01:19 -0300
Subject: [PATCH 2/8] feat: create navbar in desktop

---
 pages/index.page.tsx                 |   7 +-
 src/components/NavBar/Navbar.mock.ts | 290 ++++++++++++++++++---------
 src/components/NavBar/index.tsx      |  29 ++-
 src/components/NavBar/styles.ts      |  82 +++++++-
 src/layout/index.tsx                 |   6 +-
 src/layout/styles.ts                 |  13 +-
 src/styles/GlobalStyle.ts            |   1 +
 7 files changed, 324 insertions(+), 104 deletions(-)

diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index e02366a..2dd16fd 100644
--- a/pages/index.page.tsx
+++ b/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>
diff --git a/src/components/NavBar/Navbar.mock.ts b/src/components/NavBar/Navbar.mock.ts
index e09a8e2..616449f 100644
--- a/src/components/NavBar/Navbar.mock.ts
+++ b/src/components/NavBar/Navbar.mock.ts
@@ -8,100 +8,200 @@ export const navBarMock = [
   {
     name: 'Nextjs',
   },
-  {
-    name: 'Lorem ipsum',
-    subitems: ['About', 'React'],
-  },
-  {
-    name: 'About',
-  },
-  {
-    name: 'React',
-  },
-  {
-    name: 'Nextjs',
-  },
-  {
-    name: 'Lorem ipsum',
-    subitems: ['About', 'React'],
-  },
-  {
-    name: 'About',
-  },
-  {
-    name: 'React',
-  },
-  {
-    name: 'Nextjs',
-  },
-  {
-    name: 'Lorem ipsum',
-    subitems: ['About', 'React'],
-  },
-  {
-    name: 'About',
-  },
-  {
-    name: 'React',
-  },
-  {
-    name: 'Nextjs',
-  },
-  {
-    name: 'Lorem ipsum',
-    subitems: ['About', 'React'],
-  },
-  {
-    name: 'About',
-  },
-  {
-    name: 'React',
-  },
-  {
-    name: 'Nextjs',
-  },
-  {
-    name: 'Lorem ipsum',
-    subitems: ['About', 'React'],
-  },
-  {
-    name: 'About',
-  },
-  {
-    name: 'React',
-  },
-  {
-    name: 'Nextjs',
-  },
-  {
-    name: 'Lorem ipsum',
-    subitems: ['About', 'React'],
-  },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'About',
+  // },
+  // {
+  //   name: 'React',
+  // },
+  // {
+  //   name: 'Nextjs',
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'About',
+  // },
+  // {
+  //   name: 'React',
+  // },
+  // {
+  //   name: 'Nextjs',
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'About',
+  // },
+  // {
+  //   name: 'React',
+  // },
+  // {
+  //   name: 'Nextjs',
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'About',
+  // },
+  // {
+  //   name: 'React',
+  // },
+  // {
+  //   name: 'Nextjs',
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'About',
+  // },
+  // {
+  //   name: 'React',
+  // },
+  // {
+  //   name: 'Nextjs',
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
 
-  {
-    name: 'About',
-  },
-  {
-    name: 'React',
-  },
-  {
-    name: 'Nextjs',
-  },
-  {
-    name: 'Lorem ipsum',
-    subitems: ['About', 'React'],
-  },
-  {
-    name: 'About',
-  },
-  {
-    name: 'React',
-  },
-  {
-    name: 'Nextjs',
-  },
-  {
-    name: 'Lorem ipsum',
-    subitems: ['About', 'React'],
-  },
+  // {
+  //   name: 'About',
+  // },
+  // {
+  //   name: 'React',
+  // },
+  // {
+  //   name: 'Nextjs',
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'About',
+  // },
+  // {
+  //   name: 'React',
+  // },
+  // {
+  //   name: 'Nextjs',
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum',
+  //   subitems: ['About', 'React'],
+  // },
+  // {
+  //   name: 'Lorem ipsum cabo',
+  //   subitems: ['About', 'React'],
+  // },
 ]
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 0761e64..c18d10c 100644
--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/index.tsx
@@ -1,7 +1,34 @@
+import { useState } from 'react'
+import { SoundClickButton } from '~/src/utils/Sounds'
+
+import Equalizer from '../Equalizer'
+import { navBarMock } from './Navbar.mock'
 import * as S from './styles'
 
 const NavBar = () => {
-  return <S.Wrapper>aSDPLDFLDFPOPDFKOPDFKOP</S.Wrapper>
+  const [isOpen, setIsOpen] = useState(true)
+
+  const closeNavBar = () => {
+    SoundClickButton()
+    setIsOpen(false)
+  }
+
+  return (
+    <S.Wrapper showNavBar={isOpen}>
+      <S.NavBar>
+        {navBarMock.map(({ name }) => (
+          <S.Item key={name}>
+            <S.Link>{name}</S.Link>
+          </S.Item>
+        ))}
+      </S.NavBar>
+      <S.RollbackContainer>
+        <Equalizer />
+        <S.BackIcon onClick={closeNavBar} />
+        <div />
+      </S.RollbackContainer>
+    </S.Wrapper>
+  )
 }
 
 export default NavBar
diff --git a/src/components/NavBar/styles.ts b/src/components/NavBar/styles.ts
index 39f3ec0..2d3c127 100644
--- a/src/components/NavBar/styles.ts
+++ b/src/components/NavBar/styles.ts
@@ -1,6 +1,82 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import styled from 'styled-components'
 
-export const Wrapper = styled.nav`
-  position: absolute;
-  left: 0;
+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'};
+`
+
+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: 16px;
+  padding-left: var(--spacing-basic);
+`
+
+export const RollbackContainer = styled.div`
+  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 = styled(ArrowBackIcon)`
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--white);
+  }
 `
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 7f87789..a1e0518 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -12,8 +12,10 @@ type LayoutProps = {
 const Layout = ({ children }: LayoutProps) => (
   <S.Container>
     <Header />
-    <NavBar />
-    <S.WrapperContent>{children}</S.WrapperContent>
+    <S.WrapperContent>
+      <NavBar />
+      <S.Content>{children}</S.Content>
+    </S.WrapperContent>
     <Footer />
   </S.Container>
 )
diff --git a/src/layout/styles.ts b/src/layout/styles.ts
index e1f376d..42bb911 100644
--- a/src/layout/styles.ts
+++ b/src/layout/styles.ts
@@ -7,11 +7,20 @@ export const Container = styled.main`
   background-color: var(--green-dark);
 `
 
-export const WrapperContent = styled.main`
+export const WrapperContent = styled.section`
+  width: 100%;
+  display: flex;
+
+  @media (max-width: ${breakpoints.Tablet}) {
+    padding: 0 var(--spacing-basic);
+  }
+`
+
+export const Content = styled.div`
   width: 100%;
   max-width: ${breakpoints.Desktop};
-  margin: 70px auto;
   word-wrap: break-word;
+  margin: 70px auto;
 
   @media (max-width: ${breakpoints.Tablet}) {
     padding: 0 var(--spacing-basic);
diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
index bf28ad4..32e36cc 100644
--- a/src/styles/GlobalStyle.ts
+++ b/src/styles/GlobalStyle.ts
@@ -29,6 +29,7 @@ const GlobalStyle = createGlobalStyle`
     --white: #FFFFFF;
 
     // Spacings
+    --spacing-basic-small: 6px;
     --spacing-basic: 16px;
     --spacing-medium: 24px;
     --spacing-xmedium: 36px;

From 3e49941e363b532ae4e8d6d9cbc72f286bcc058f Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Tue, 2 Jan 2024 22:36:09 -0300
Subject: [PATCH 3/8] feat: finalize navbar desktop

---
 src/components/NavBar/index.tsx | 37 ++++++++++++++++++--------------
 src/components/NavBar/styles.ts | 38 ++++++++++++++++++++++++---------
 2 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index c18d10c..5ecda85 100644
--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { SoundClickButton } from '~/src/utils/Sounds'
 
+import { SoundClickButton } from '../../../src/utils/Sounds/index'
 import Equalizer from '../Equalizer'
 import { navBarMock } from './Navbar.mock'
 import * as S from './styles'
@@ -10,24 +10,29 @@ const NavBar = () => {
 
   const closeNavBar = () => {
     SoundClickButton()
-    setIsOpen(false)
+    setIsOpen(!isOpen)
   }
 
   return (
-    <S.Wrapper showNavBar={isOpen}>
-      <S.NavBar>
-        {navBarMock.map(({ name }) => (
-          <S.Item key={name}>
-            <S.Link>{name}</S.Link>
-          </S.Item>
-        ))}
-      </S.NavBar>
-      <S.RollbackContainer>
-        <Equalizer />
-        <S.BackIcon onClick={closeNavBar} />
-        <div />
-      </S.RollbackContainer>
-    </S.Wrapper>
+    <>
+      <S.Wrapper showNavBar={isOpen}>
+        <S.NavBar>
+          {navBarMock.map(({ name }) => (
+            <S.Item key={name}>
+              <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>
+    </>
   )
 }
 
diff --git a/src/components/NavBar/styles.ts b/src/components/NavBar/styles.ts
index 2d3c127..cf35f11 100644
--- a/src/components/NavBar/styles.ts
+++ b/src/components/NavBar/styles.ts
@@ -1,13 +1,38 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import styled from 'styled-components'
 
+const createIconStyles = Icon => 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'};
+`
 
+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'};
 `
 
@@ -58,7 +83,7 @@ export const Link = styled.a`
 `
 
 export const RollbackContainer = styled.div`
-  width: 280px;
+  max-width: 280px;
   height: 60px;
   color: var(--green-white);
   background-color: var(--green);
@@ -70,13 +95,6 @@ export const RollbackContainer = styled.div`
   padding: 0 10px;
 `
 
-export const BackIcon = styled(ArrowBackIcon)`
-  width: 35px;
-  height: 35px;
-  cursor: pointer;
-  transition: 0.3s;
+export const BackIcon = createIconStyles(ArrowBackIcon)
 
-  &:hover {
-    color: var(--white);
-  }
-`
+export const GoIcon = createIconStyles(ArrowForwardIcon)

From 51f378adc1109ade283471098cf82e273b7fc845 Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Sun, 17 Mar 2024 22:47:13 -0300
Subject: [PATCH 4/8] feat: adjust navbar desktop

---
 .vscode/settings.json                         |   2 +-
 src/components/NavBar/{ => Desktop}/index.tsx |  10 +-
 src/components/NavBar/{ => Desktop}/styles.ts |   5 +
 src/components/NavBar/Navbar.mock.ts          | 196 ------------------
 src/enums/medias.ts                           |   5 +
 src/layout/index.tsx                          |   4 +-
 6 files changed, 18 insertions(+), 204 deletions(-)
 rename src/components/NavBar/{ => Desktop}/index.tsx (78%)
 rename src/components/NavBar/{ => Desktop}/styles.ts (95%)
 create mode 100644 src/enums/medias.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 262bd52..5716e15 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
 
   "editor.formatOnSave": true,
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/Desktop/index.tsx
similarity index 78%
rename from src/components/NavBar/index.tsx
rename to src/components/NavBar/Desktop/index.tsx
index 5ecda85..8fc4427 100644
--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/Desktop/index.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
 
-import { SoundClickButton } from '../../../src/utils/Sounds/index'
-import Equalizer from '../Equalizer'
-import { navBarMock } from './Navbar.mock'
+import { SoundClickButton } from '../../../utils/Sounds/index'
+import Equalizer from '../../Equalizer'
+import { navBarMock } from '../Navbar.mock'
 import * as S from './styles'
 
-const NavBar = () => {
+const DesktopNavBar = () => {
   const [isOpen, setIsOpen] = useState(true)
 
   const closeNavBar = () => {
@@ -36,4 +36,4 @@ const NavBar = () => {
   )
 }
 
-export default NavBar
+export default DesktopNavBar
diff --git a/src/components/NavBar/styles.ts b/src/components/NavBar/Desktop/styles.ts
similarity index 95%
rename from src/components/NavBar/styles.ts
rename to src/components/NavBar/Desktop/styles.ts
index cf35f11..dad6ce3 100644
--- a/src/components/NavBar/styles.ts
+++ b/src/components/NavBar/Desktop/styles.ts
@@ -1,6 +1,7 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import styled from 'styled-components'
+import medias from '~/src/enums/medias'
 
 const createIconStyles = Icon => styled(Icon)`
   width: 35px;
@@ -21,6 +22,10 @@ export const Wrapper = styled.nav<{ showNavBar: boolean }>`
   margin-top: 70px;
   overflow-y: auto;
   display: ${({ showNavBar }) => !showNavBar && 'none'};
+
+  @media (max-width: ${medias.maxTablet}) {
+    display: none;
+  }
 `
 
 export const WrapperColapsed = styled.nav<{ showNavBar: boolean }>`
diff --git a/src/components/NavBar/Navbar.mock.ts b/src/components/NavBar/Navbar.mock.ts
index 616449f..4f40016 100644
--- a/src/components/NavBar/Navbar.mock.ts
+++ b/src/components/NavBar/Navbar.mock.ts
@@ -8,200 +8,4 @@ export const navBarMock = [
   {
     name: 'Nextjs',
   },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'About',
-  // },
-  // {
-  //   name: 'React',
-  // },
-  // {
-  //   name: 'Nextjs',
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'About',
-  // },
-  // {
-  //   name: 'React',
-  // },
-  // {
-  //   name: 'Nextjs',
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'About',
-  // },
-  // {
-  //   name: 'React',
-  // },
-  // {
-  //   name: 'Nextjs',
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'About',
-  // },
-  // {
-  //   name: 'React',
-  // },
-  // {
-  //   name: 'Nextjs',
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'About',
-  // },
-  // {
-  //   name: 'React',
-  // },
-  // {
-  //   name: 'Nextjs',
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-
-  // {
-  //   name: 'About',
-  // },
-  // {
-  //   name: 'React',
-  // },
-  // {
-  //   name: 'Nextjs',
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'About',
-  // },
-  // {
-  //   name: 'React',
-  // },
-  // {
-  //   name: 'Nextjs',
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum',
-  //   subitems: ['About', 'React'],
-  // },
-  // {
-  //   name: 'Lorem ipsum cabo',
-  //   subitems: ['About', 'React'],
-  // },
 ]
diff --git a/src/enums/medias.ts b/src/enums/medias.ts
new file mode 100644
index 0000000..e88997e
--- /dev/null
+++ b/src/enums/medias.ts
@@ -0,0 +1,5 @@
+export default {
+  minMobile: '360px',
+  maxMobile: '768px',
+  maxTablet: '992px',
+} as const
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index a1e0518..df0c647 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 
 import Footer from '../components/Footer'
 import Header from '../components/Header'
-import NavBar from '../components/NavBar'
+import DesktopNavbar from '../components/NavBar/Desktop'
 import * as S from './styles'
 
 type LayoutProps = {
@@ -13,7 +13,7 @@ const Layout = ({ children }: LayoutProps) => (
   <S.Container>
     <Header />
     <S.WrapperContent>
-      <NavBar />
+      <DesktopNavbar />
       <S.Content>{children}</S.Content>
     </S.WrapperContent>
     <Footer />

From cf6fba5a09d57f377eaced549a1ad60052e4900d Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Sun, 17 Mar 2024 23:55:44 -0300
Subject: [PATCH 5/8] feat: create navbar mobile

---
 src/components/Footer/styles.ts         |  1 -
 src/components/Header/index.tsx         | 20 +++++----
 src/components/Header/styles.ts         | 11 ++++-
 src/components/NavBar/Desktop/index.tsx |  4 +-
 src/components/NavBar/Desktop/styles.ts |  8 +++-
 src/components/NavBar/Mobile/index.tsx  | 24 +++++++++++
 src/components/NavBar/Mobile/styles.ts  | 57 +++++++++++++++++++++++++
 src/components/NavBar/Navbar.mock.ts    |  8 +++-
 src/styles/GlobalStyle.ts               |  1 +
 9 files changed, 118 insertions(+), 16 deletions(-)
 create mode 100644 src/components/NavBar/Mobile/index.tsx
 create mode 100644 src/components/NavBar/Mobile/styles.ts

diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts
index bb5ad65..d0865c2 100644
--- a/src/components/Footer/styles.ts
+++ b/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;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index e6419a4..87f148e 100644
--- a/src/components/Header/index.tsx
+++ b/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>
   )
 }
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
index 3c7aa60..b7571ff 100644
--- a/src/components/Header/styles.ts
+++ b/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)'};
diff --git a/src/components/NavBar/Desktop/index.tsx b/src/components/NavBar/Desktop/index.tsx
index 8fc4427..0421254 100644
--- a/src/components/NavBar/Desktop/index.tsx
+++ b/src/components/NavBar/Desktop/index.tsx
@@ -17,8 +17,8 @@ const DesktopNavBar = () => {
     <>
       <S.Wrapper showNavBar={isOpen}>
         <S.NavBar>
-          {navBarMock.map(({ name }) => (
-            <S.Item key={name}>
+          {navBarMock.map(({ name }, idx) => (
+            <S.Item key={idx}>
               <S.Link>{name}</S.Link>
             </S.Item>
           ))}
diff --git a/src/components/NavBar/Desktop/styles.ts b/src/components/NavBar/Desktop/styles.ts
index dad6ce3..a43f56e 100644
--- a/src/components/NavBar/Desktop/styles.ts
+++ b/src/components/NavBar/Desktop/styles.ts
@@ -1,9 +1,13 @@
 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 => styled(Icon)`
+const createIconStyles = (Icon: React.ComponentType<SvgIconProps>) => styled(
+  Icon
+)`
   width: 35px;
   height: 35px;
   cursor: pointer;
@@ -83,7 +87,7 @@ export const Item = styled.div`
 `
 
 export const Link = styled.a`
-  font-size: 16px;
+  font-size: var(--font-small);
   padding-left: var(--spacing-basic);
 `
 
diff --git a/src/components/NavBar/Mobile/index.tsx b/src/components/NavBar/Mobile/index.tsx
new file mode 100644
index 0000000..a72dd61
--- /dev/null
+++ b/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
diff --git a/src/components/NavBar/Mobile/styles.ts b/src/components/NavBar/Mobile/styles.ts
new file mode 100644
index 0000000..8a13e6b
--- /dev/null
+++ b/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;
+`
diff --git a/src/components/NavBar/Navbar.mock.ts b/src/components/NavBar/Navbar.mock.ts
index 4f40016..77480d0 100644
--- a/src/components/NavBar/Navbar.mock.ts
+++ b/src/components/NavBar/Navbar.mock.ts
@@ -1,6 +1,6 @@
 export const navBarMock = [
   {
-    name: 'About',
+    name: 'Go',
   },
   {
     name: 'React',
@@ -8,4 +8,10 @@ export const navBarMock = [
   {
     name: 'Nextjs',
   },
+  {
+    name: 'Vue',
+  },
+  {
+    name: 'React',
+  },
 ]
diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
index 32e36cc..ed67d3c 100644
--- a/src/styles/GlobalStyle.ts
+++ b/src/styles/GlobalStyle.ts
@@ -35,6 +35,7 @@ const GlobalStyle = createGlobalStyle`
     --spacing-xmedium: 36px;
 
     // Fonts
+    --font-small: 16px;
     --font-medium: 24px;
     --font-large: 96px;
   }

From 806a21dd91addfeebf8fb19a1a9702cff7b5e52a Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Sun, 17 Mar 2024 23:55:59 -0300
Subject: [PATCH 6/8] feat: configure path jest

---
 jest.config.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/jest.config.js b/jest.config.js
index 6941562..6cd2aa1 100644
--- a/jest.config.js
+++ b/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 */

From 55e327f94630ebe6ba1e1a41beca3ff37cb52735 Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Mon, 18 Mar 2024 00:02:18 -0300
Subject: [PATCH 7/8] test: create todo tests

---
 src/components/NavBar/Desktop/index.spec.tsx | 5 +++++
 src/components/NavBar/Mobile/index.spec.tsx  | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 src/components/NavBar/Desktop/index.spec.tsx
 create mode 100644 src/components/NavBar/Mobile/index.spec.tsx

diff --git a/src/components/NavBar/Desktop/index.spec.tsx b/src/components/NavBar/Desktop/index.spec.tsx
new file mode 100644
index 0000000..a8d0ff9
--- /dev/null
+++ b/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')
+})
diff --git a/src/components/NavBar/Mobile/index.spec.tsx b/src/components/NavBar/Mobile/index.spec.tsx
new file mode 100644
index 0000000..a8d0ff9
--- /dev/null
+++ b/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')
+})

From e876f65c3ebc3ce3b22f912bc240a3a32e658d27 Mon Sep 17 00:00:00 2001
From: Gabriel <gabrielmonteiroduete@gmail.com>
Date: Mon, 18 Mar 2024 00:10:38 -0300
Subject: [PATCH 8/8] feat: remove navbark desktop colapsed in mobile and
 tablet resolutions

---
 src/components/NavBar/Desktop/styles.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/NavBar/Desktop/styles.ts b/src/components/NavBar/Desktop/styles.ts
index a43f56e..4f0dc88 100644
--- a/src/components/NavBar/Desktop/styles.ts
+++ b/src/components/NavBar/Desktop/styles.ts
@@ -43,6 +43,10 @@ export const WrapperColapsed = styled.nav<{ showNavBar: boolean }>`
   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`