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

design: improve design of sidebar, fix margin

Browse Source
This commit is contained in:
Aidan 2025-04-23 08:36:03 -04:00
parent c663372fb3
commit 5a666c64d9
3 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,13 @@
import styled from "styled-components"; import styled from "styled-components";
{/* this is misaligned */}
export const Drawer = styled.button` export const Drawer = styled.button`
all: unset; all: unset;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: color 0.3s;
display: none; display: none;
font-size: 1.5rem;
&:hover { &:hover {
color: ${props => props.theme.cream} color: ${props => props.theme.cream}
@ -64,3 +66,22 @@ animation-duration: 0.5s;
color: ${props => props.theme.cream} 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;
}
}
`

5
src/components/Header/index.tsx
View File

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

2
src/components/MainContent/styles.ts
View File

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