feat: create drawer for responsive

src/components/Drawer/styles.ts

@@ -0,0 +1,42 @@
+import styled, { keyframes } from "styled-components";
+
+export const Drawer = styled.button`
+all: unset;
+color: white;
+cursor: pointer;
+transition: color 0.3s;
+display: none;
+
+&:hover {
+    color: ${props => props.theme.cream}
+}
+&::after {
+    content: "☰";
+}
+@media(max-width: 640px){
+  display: block;
+}
+`
+
+export const DrawerContainer = styled.div`
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  border-radius: 8px;
+  width: 200px;
+  background-color: ${(props) => props.theme["gray-800"]};
+  animation-name: drawerAnimation;
+`
+
+export const DrawerItem = styled.a`
+text-decoration: none;
+padding: 1rem;
+display: block;
+color: white;
+cursor: pointer;
+&:hover {
+    color: ${props => props.theme.cream}
+}
+`

src/components/Header/index.tsx

@@ -3,13 +3,17 @@ import { HeaderContainer, NavLink, HomeLink, LanguageSelector } from "./styles";
 import { AvatarHeader } from "../Avatar/avatar";
 import i18n from "../../utils/i18n";
 import { t } from "i18next";
+import { Drawer, DrawerContainer, DrawerItem } from "../Drawer/styles";
+import { useState } from "react";
 
 export default function Header() {
   const changeLanguage = (event: React.ChangeEvent<HTMLSelectElement>) => {
     i18n.changeLanguage(event.target.value);
     localStorage.setItem("language", event.target.value);
   };
+  const [openDrawer, setOpenDrawer] = useState(false);
   return (
+    <>
       <HashRouter>
         <HeaderContainer>
           <HomeLink href="/">
@@ -20,6 +24,7 @@ export default function Header() {
             <NavLink href="#about">{t("about")}</NavLink>
             <NavLink href="#contact">{t("contact")}</NavLink>
             <NavLink href="#projects">{t("projects")}</NavLink>
+            <Drawer onClick={() => setOpenDrawer(!openDrawer)} />
             <LanguageSelector onChange={changeLanguage}>
               <option value="pt-br">
                 Português
@@ -30,6 +35,15 @@ export default function Header() {
             </LanguageSelector>
           </nav>
         </HeaderContainer>
+        {openDrawer &&
+          <DrawerContainer onClick={() => setOpenDrawer(false)}>
+            <DrawerItem>Giv's Website</DrawerItem>
+            <DrawerItem href="#about">{t("about")}</DrawerItem>
+            <DrawerItem href="#contact">{t("contact")}</DrawerItem>
+            <DrawerItem href="#projects">{t("projects")}</DrawerItem>
+          </DrawerContainer>
+        }
       </HashRouter>
+    </>
   )
 }

src/components/Header/styles.ts

@@ -23,6 +23,9 @@ export const NavLink = styled.a`
   &:hover {
     color: ${props => props.theme["cream"]};
   }
+  @media(max-width: 640px){
+    display: none;
+  }
 `;
 
 export const HeaderContainer = styled.div`