GivFNZ/my-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: animation for drawer

Browse Source
This commit is contained in:
GivFNZ 2025-02-22 12:21:07 -03:00
parent 7413338aba
commit 7a57574486
No known key found for this signature in database
GPG Key ID: 63DD92181B575322
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Drawer/styles.ts
View File

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