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

feat: create drawer for responsive

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

42
src/components/Drawer/styles.ts Normal file
View File

@ -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}
}
`

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

@ -3,33 +3,47 @@ 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 { t } from "i18next"; import { t } from "i18next";
import { Drawer, DrawerContainer, DrawerItem } from "../Drawer/styles";
import { useState } from "react";
export default function Header() { export default function Header() {
const changeLanguage = (event: React.ChangeEvent<HTMLSelectElement>) => { const changeLanguage = (event: React.ChangeEvent<HTMLSelectElement>) => {
i18n.changeLanguage(event.target.value); i18n.changeLanguage(event.target.value);
localStorage.setItem("language", event.target.value); localStorage.setItem("language", event.target.value);
}; };
const [openDrawer, setOpenDrawer] = useState(false);
return ( return (
<HashRouter> <>
<HeaderContainer> <HashRouter>
<HomeLink href="/"> <HeaderContainer>
<AvatarHeader src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" /> <HomeLink href="/">
Giv's Website <AvatarHeader src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
</HomeLink> Giv's Website
<nav> </HomeLink>
<NavLink href="#about">{t("about")}</NavLink> <nav>
<NavLink href="#contact">{t("contact")}</NavLink> <NavLink href="#about">{t("about")}</NavLink>
<NavLink href="#projects">{t("projects")}</NavLink> <NavLink href="#contact">{t("contact")}</NavLink>
<LanguageSelector onChange={changeLanguage}> <NavLink href="#projects">{t("projects")}</NavLink>
<option value="pt-br"> <Drawer onClick={() => setOpenDrawer(!openDrawer)} />
Português <LanguageSelector onChange={changeLanguage}>
</option> <option value="pt-br">
<option value="en-us"> Português
English </option>
</option> <option value="en-us">
</LanguageSelector> English
</nav> </option>
</HeaderContainer> </LanguageSelector>
</HashRouter> </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>
</>
) )
} }

3
src/components/Header/styles.ts
View File

@ -23,6 +23,9 @@ export const NavLink = styled.a`
&:hover { &:hover {
color: ${props => props.theme["cream"]}; color: ${props => props.theme["cream"]};
} }
@media(max-width: 640px){
display: none;
}
`; `;
export const HeaderContainer = styled.div` export const HeaderContainer = styled.div`