From 7a575744864cb342107dbc5259226a65c00c217b Mon Sep 17 00:00:00 2001
From: GivFNZ <givfnz@p0ntus.com>
Date: Sat, 22 Feb 2025 12:21:07 -0300
Subject: [PATCH] style: animation for drawer

---
 src/components/Drawer/styles.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/Drawer/styles.ts b/src/components/Drawer/styles.ts
index e648135..c573469 100644
--- a/src/components/Drawer/styles.ts
+++ b/src/components/Drawer/styles.ts
@@ -28,6 +28,11 @@ export const DrawerContainer = styled.div`
   width: 200px;
   background-color: ${(props) => props.theme["gray-800"]};
   animation-name: drawerAnimation;
+  animation-duration: 0.3s;
+  @keyframes drawerAnimation {
+    0% {width: 0px};
+    100% {width: 200px};
+}
 `
 
 export const DrawerItem = styled.a`
@@ -36,6 +41,20 @@ padding: 1rem;
 display: block;
 color: white;
 cursor: pointer;
+animation-name: slideIn;
+animation-duration: 0.5s;
+
+@keyframes slideIn{
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+      }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
 &:hover {
     color: ${props => props.theme.cream}
 }