Skip to content

Commit 7809516

Browse files
itsmeurbiitsmeurbi
committed
Add responsive sidebar menu
1 parent 47ee9f6 commit 7809516

File tree

3 files changed

+76
-10
lines changed

3 files changed

+76
-10
lines changed

‎public/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"navbar": {
33
"sponsorship": "Are you interested in sponsoring?",
44
"aboutUs": "About us",
5-
"survey": "Survey"
5+
"survey": "Survey",
6+
"home": "Home"
67
},
78
"sponsorship": {
89
"description1": "WebDevTalks is a community of development and technology that began over 10 years ago with the aim of bringing developers closer to various topics within the field of software development, web, mobile, IoT, project management, design, and more.",

‎public/es.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"navbar": {
33
"sponsorship": "¿Te interesa patrocinar?",
44
"aboutUs": "Acerca de nosotros",
5-
"survey": "Encuesta"
5+
"survey": "Encuesta",
6+
"home": "Inicio"
67
},
78
"sponsorship": {
89
"description1": "WebDevTalks es una comunidad de desarrollo y tecnología, que inició hace más de 10 años con la finalidad de acercar desarrolladores a diversos temas dentro del área del desarrollo de software, web, móvil, IoT, manejo de proyectos, diseño y más.",

‎src/NavBar.tsx

Lines changed: 72 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useState, useEffect } from 'react'
12
import { useTranslation } from 'react-i18next'
23
import { useLocation } from 'react-router-dom'
34
import { Link } from 'react-router-dom'
@@ -8,41 +9,70 @@ import {
89
Toolbar,
910
Typography,
1011
Container,
12+
IconButton,
1113
Button,
12-
Avatar
14+
Avatar,
15+
Drawer,
16+
List,
17+
ListItem,
18+
ListItemButton,
1319
} from '@mui/material'
14-
import { LanguageSelector } from './LanguageSelector';
20+
import { LanguageSelector } from './LanguageSelector'
1521
import { ReactElement } from 'react'
22+
import MenuIcon from '@mui/icons-material/Menu'
23+
import { useTheme } from '@mui/material/styles'
1624
import logo from './assets/images/logo.png'
1725

1826
const NavBar = (): ReactElement => {
27+
const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
1928
const location = useLocation()
2029
const { openSurvey } = useSurvey()
2130
const { t } = useTranslation()
31+
const theme = useTheme()
32+
33+
const toggleDrawer = (newOpen: boolean) => () => {
34+
setIsDrawerOpen(newOpen)
35+
}
36+
2237

2338
const isActive = (path: string): boolean => {
24-
return location.pathname.includes(path)
39+
return location.pathname === path
2540
}
2641

42+
useEffect(() => {
43+
return () => {
44+
setIsDrawerOpen(false)
45+
}
46+
}, [])
47+
2748
return (
2849
<>
2950
<AppBar position="sticky" color="default">
3051
<Container maxWidth="xl">
31-
<Toolbar disableGutters>
32-
<Link to="/" style={{ textDecoration: 'none', marginRight: '1rem' }}>
52+
<IconButton
53+
color="inherit"
54+
aria-label="open drawer"
55+
onClick={toggleDrawer(true)}
56+
sx={{ display: { xs: 'block', md: 'none' } }}
57+
edge="start"
58+
>
59+
<MenuIcon />
60+
</IconButton>
61+
<Toolbar disableGutters sx={{ display: { xs: 'none', md: 'flex' } }}>
62+
<Link to="/" style={{ textDecoration: 'none', marginRight: '1rem', flexShrink: 0, color: theme.palette.primary.main }}>
3363
<Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
3464
</Link>
35-
<Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%' }}>
65+
<Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
3666
<Button sx={{ height: '100%', backgroundColor: isActive('/sponsorship') ? '#c1c1c1' : 'transparent' }}>
3767
<Typography>{t("navbar.sponsorship", "¿Te interesa patrocinar?")}</Typography>
3868
</Button>
3969
</Link>
40-
<Link to="/about" style={{ textDecoration: 'none', height: '100%' }}>
70+
<Link to="/about" style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
4171
<Button sx={{ height: '100%', backgroundColor: isActive('/about') ? '#c1c1c1' : 'transparent' }}>
4272
<Typography>{t("navbar.aboutUs", "Acerca de nosotros")}</Typography>
4373
</Button>
4474
</Link>
45-
<Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%' }}>
75+
<Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
4676
<Button sx={{ height: '100%'}}>
4777
<Typography>{t("navbar.survey", "Encuesta")}</Typography>
4878
</Button>
@@ -53,6 +83,40 @@ const NavBar = (): ReactElement => {
5383
</Toolbar>
5484
</Container>
5585
</AppBar>
86+
<Drawer open={isDrawerOpen} onClose={toggleDrawer(false)}>
87+
<Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
88+
<List>
89+
<ListItem>
90+
<Link to="/" style={{ textDecoration: 'none', height: '100%', width: '100%', color: theme.palette.primary.main }}>
91+
<ListItemButton sx={{ height: '100%', color: '#000000', backgroundColor: isActive('/') ? '#c1c1c1' : 'transparent' }}>
92+
<Typography>{t("navbar.home", "Inicio")}</Typography>
93+
</ListItemButton>
94+
</Link>
95+
</ListItem>
96+
<ListItem>
97+
<Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%', width: '100%', color: theme.palette.primary.main }}>
98+
<ListItemButton sx={{ height: '100%', color: '#000000', backgroundColor: isActive('/sponsorship') ? '#c1c1c1' : 'transparent' }}>
99+
<Typography>{t("navbar.sponsorship", "¿Te interesa patrocinar?")}</Typography>
100+
</ListItemButton>
101+
</Link>
102+
</ListItem>
103+
<ListItem>
104+
<Link to="/about" style={{ textDecoration: 'none', height: '100%', width: '100%', color: theme.palette.primary.main }}>
105+
<ListItemButton sx={{ height: '100%', color: '#000000', backgroundColor: isActive('/about') ? '#c1c1c1' : 'transparent' }}>
106+
<Typography>{t("navbar.aboutUs", "Acerca de nosotros")}</Typography>
107+
</ListItemButton>
108+
</Link>
109+
</ListItem>
110+
<ListItem>
111+
<Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%', width: '100%', color: theme.palette.primary.main }}>
112+
<ListItemButton sx={{ height: '100%', color: theme.palette.primary.main }}>
113+
<Typography>{t("navbar.survey", "Encuesta")}</Typography>
114+
</ListItemButton>
115+
</Link>
116+
</ListItem>
117+
</List>
118+
</Box>
119+
</Drawer>
56120
</>
57121
)
58122
}

0 commit comments

Comments
 (0)