hamburguer menu

.husky/pre-commit

@@ -40,3 +40,5 @@ yarn build ||
 
 # If everything passes... Now we can commit
 echo '✅✅✅✅ You win this time... I am committing this now. ✅✅✅✅'
+
+rm -rf .next

src/components/Header/index.tsx

@@ -2,21 +2,31 @@ import React from "react";
 
 import { NavLink } from "../NavLink";
 
-import { Container, ContentContainer, Navigation } from "./styles";
+import { Container, ContentContainer, Hamburger, Navigation } from "./styles";
 
 export function Header() {
+  const [menuOpen, setMenu] = React.useState(false);
+
   return (
     <Container>
       <ContentContainer>
         <a href="/" className="logo">
           <img src="/images/logo.png" alt="Logo Arthur Sena" />
         </a>
-        <Navigation>
+        <Navigation className={menuOpen ? "visible" : ""}>
           <NavLink href="/" label="HOME" />
           <NavLink href="/projetos" label="PROJETOS" />
           <NavLink href="/contato" label="CONTATO" />
           <NavLink href="/sobre" label="SOBRE" />
         </Navigation>
+        <Hamburger
+          className={menuOpen ? "close" : ""}
+          onClick={() => setMenu(!menuOpen)}
+        >
+          <span className="bar1" />
+          <span className="bar2" />
+          <span className="bar3" />
+        </Hamburger>
       </ContentContainer>
     </Container>
   );

src/components/Header/styles.ts

@@ -87,4 +87,94 @@ export const Navigation = styled.nav`
   button + button {
     margin-left: 0.5rem;
   }
+
+  @media (max-width: 720px) {
+    position: absolute;
+    top: 5rem;
+    right: -100%;
+    width: 70%;
+    max-width: 360px;
+
+    flex-direction: column;
+
+    background-color: rgba(17, 17, 17, 0.8);
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+    border-bottom: 1px solid #242424;
+    border-left: 1px solid #242424;
+
+    padding: 1rem 0;
+
+    button + button {
+      margin-left: 0;
+      margin-top: 0.5rem;
+    }
+
+    transition: right 0.6s;
+
+    &.visible {
+      right: 0;
+    }
+  }
+`;
+
+export const Hamburger = styled.button`
+  width: 2.5rem;
+  height: 2.25rem;
+  padding: 0.5rem;
+
+  background-color: transparent;
+  border: 0;
+  border-radius: 6px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    width: 100%;
+    height: 2px;
+    background-color: #b1b1b1;
+
+    span + span {
+      margin-top: 0.5rem;
+    }
+
+    &.bar1 {
+      transition: transform 0.6s;
+    }
+
+    &.bar2 {
+      transition: opacity 0.6s;
+    }
+
+    &.bar3 {
+      transition: transform 0.6s;
+    }
+  }
+
+  transition: background-color 0.3s !important;
+
+  &:hover {
+    background-color: #2e2e2e;
+    filter: brightness(1) !important;
+    cursor: pointer;
+  }
+
+  &.close {
+    span.bar1 {
+      transform: rotate(-45deg) translate(-6px, 7px);
+    }
+    span.bar2 {
+      opacity: 0;
+    }
+    span.bar3 {
+      transform: rotate(45deg) translate(-5px, -7px);
+    }
+  }
+
+  @media (min-width: 720px) {
+    display: none;
+  }
 `;