design: improve design of sidebar, fix margin

src/components/Drawer/styles.ts

@@ -1,11 +1,13 @@
 import styled from "styled-components";
 
+{/* this is misaligned */}
 export const Drawer = styled.button`
 all: unset;
 color: white;
 cursor: pointer;
 transition: color 0.3s;
 display: none;
+font-size: 1.5rem;
 
 &:hover {
     color: ${props => props.theme.cream}
@@ -63,4 +65,23 @@ animation-duration: 0.5s;
 &:hover {
     color: ${props => props.theme.cream}
 }
+`
+
+export const DrawerTitle = styled.h4`
+  text-align: center;
+  margin-top: 1rem;
+  color: white;
+  animation-name: slideIn;
+  animation-duration: 0.5s;
+
+  @keyframes slideIn {
+    0% {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
 `

src/components/Header/index.tsx

@@ -2,7 +2,7 @@ import { HashRouter } from "react-router-dom";
 import { HeaderContainer, NavLink, HomeLink, LanguageSelector } from "./styles";
 import { AvatarHeader } from "../Avatar/avatar";
 import i18n from "../../utils/i18n";
-import { Drawer, DrawerContainer, DrawerItem } from "../Drawer/styles";
+import { Drawer, DrawerContainer, DrawerItem, DrawerTitle } from "../Drawer/styles";
 import useDrawerVisible from "../../hooks/useDrawerVisible";
 import { useTranslation } from "react-i18next";
 
@@ -13,6 +13,7 @@ export default function Header() {
     localStorage.setItem("language", event.target.value);
   };
   const { ref, openDrawer, setOpenDrawer } = useDrawerVisible();
+  
   return (
     <>
       <HashRouter>
@@ -38,7 +39,7 @@ export default function Header() {
         </HeaderContainer>
         {openDrawer &&
           <DrawerContainer onClick={() => setOpenDrawer(false)}>
-            <DrawerItem>Giv's Website</DrawerItem>
+            <DrawerTitle>Giv's Website</DrawerTitle>
             <DrawerItem href="#about">{t("about")}</DrawerItem>
             <DrawerItem href="#skills">{t("skills")}</DrawerItem>
             <DrawerItem href="#contact">{t("contact")}</DrawerItem>

src/components/MainContent/styles.ts

@@ -6,6 +6,6 @@ export const MainContainer = styled.div`
     background-color: ${props => props.theme["gray-700"]};
     border-radius: 8px;
     @media(max-width: 640px){
-        margin: 0 0 3rem 0;
+        margin: 0.75rem 0 3rem 0;
     }
 `