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,33 +3,47 @@ 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="/">
-          <AvatarHeader src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
-          Giv's Website
-        </HomeLink>
-        <nav>
-          <NavLink href="#about">{t("about")}</NavLink>
-          <NavLink href="#contact">{t("contact")}</NavLink>
-          <NavLink href="#projects">{t("projects")}</NavLink>
-        <LanguageSelector onChange={changeLanguage}>
-          <option value="pt-br">
-            Português
-          </option>
-          <option value="en-us">
-            English
-          </option>
-        </LanguageSelector>
-        </nav>
-      </HeaderContainer>
-    </HashRouter>
+    <>
+      <HashRouter>
+        <HeaderContainer>
+          <HomeLink href="/">
+            <AvatarHeader src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
+            Giv's Website
+          </HomeLink>
+          <nav>
+            <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
+              </option>
+              <option value="en-us">
+                English
+              </option>
+            </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`