Add responsive sidebar menu

webdevtalks · Jun 14, 2024 · 7809516 · 7809516
1 parent 47ee9f6
commit 7809516
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 10 deletions.
diff --git a/public/en.json b/public/en.json
@@ -2,7 +2,8 @@
   "navbar": {
       "sponsorship": "Are you interested in sponsoring?",
       "aboutUs": "About us",
-      "survey": "Survey"
+      "survey": "Survey",
+      "home": "Home"
   },
   "sponsorship": {
       "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.",

diff --git a/public/es.json b/public/es.json
@@ -2,7 +2,8 @@
   "navbar": {
       "sponsorship": "¿Te interesa patrocinar?",
       "aboutUs": "Acerca de nosotros",
-      "survey": "Encuesta"
+      "survey": "Encuesta",
+      "home": "Inicio"
   },
   "sponsorship": {
       "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.",

diff --git a/src/NavBar.tsx b/src/NavBar.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import { Link } from 'react-router-dom'
@@ -8,41 +9,70 @@ import {
   Toolbar,
   Typography,
   Container,
+  IconButton,
   Button,
-  Avatar
+  Avatar,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
 } from '@mui/material'
-import { LanguageSelector } from './LanguageSelector';
+import { LanguageSelector } from './LanguageSelector'
 import { ReactElement } from 'react'
+import MenuIcon from '@mui/icons-material/Menu'
+import { useTheme } from '@mui/material/styles'
 import logo from './assets/images/logo.png'
 
 const NavBar = (): ReactElement => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
   const location = useLocation()
   const { openSurvey } = useSurvey()
   const { t } = useTranslation()
+  const theme = useTheme()
+
+  const toggleDrawer = (newOpen: boolean) => () => {
+    setIsDrawerOpen(newOpen)
+  }
+
 
   const isActive = (path: string): boolean => {
-    return location.pathname.includes(path)
+    return location.pathname === path
   }
 
+  useEffect(() => {
+    return () => {
+      setIsDrawerOpen(false)
+    }
+  }, [])
+
   return (
     <>
       <AppBar position="sticky" color="default">
         <Container maxWidth="xl">
-          <Toolbar disableGutters>
-            <Link to="/" style={{ textDecoration: 'none', marginRight: '1rem' }}>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={toggleDrawer(true)}
+            sx={{ display: { xs: 'block', md: 'none' } }}
+            edge="start"
+          >
+            <MenuIcon />
+          </IconButton>
+          <Toolbar disableGutters sx={{ display: { xs: 'none', md: 'flex' } }}>
+            <Link to="/" style={{ textDecoration: 'none', marginRight: '1rem', flexShrink: 0, color: theme.palette.primary.main }}>
               <Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
             </Link>
-            <Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%' }}>
+            <Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
               <Button sx={{ height: '100%', backgroundColor: isActive('/sponsorship') ? '#c1c1c1' : 'transparent' }}>
                 <Typography>{t("navbar.sponsorship", "¿Te interesa patrocinar?")}</Typography>
               </Button>
             </Link>
-            <Link to="/about" style={{ textDecoration: 'none', height: '100%' }}>
+            <Link to="/about" style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
               <Button sx={{ height: '100%', backgroundColor: isActive('/about') ? '#c1c1c1' : 'transparent' }}>
                 <Typography>{t("navbar.aboutUs", "Acerca de nosotros")}</Typography>
               </Button>
             </Link>
-            <Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%' }}>
+            <Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
               <Button sx={{ height: '100%'}}>
                 <Typography>{t("navbar.survey", "Encuesta")}</Typography>
               </Button>
@@ -53,6 +83,40 @@ const NavBar = (): ReactElement => {
           </Toolbar>
         </Container>
       </AppBar>
+      <Drawer open={isDrawerOpen} onClose={toggleDrawer(false)}>
+        <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
+          <List>
+            <ListItem>
+              <Link to="/" style={{ textDecoration: 'none', height: '100%', width: '100%', color: theme.palette.primary.main }}>
+                <ListItemButton sx={{ height: '100%', color: '#000000', backgroundColor: isActive('/') ? '#c1c1c1' : 'transparent' }}>
+                  <Typography>{t("navbar.home", "Inicio")}</Typography>
+                </ListItemButton>
+              </Link>
+            </ListItem>
+            <ListItem>
+              <Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%', width: '100%', color: theme.palette.primary.main }}>
+                <ListItemButton sx={{ height: '100%', color: '#000000', backgroundColor: isActive('/sponsorship') ? '#c1c1c1' : 'transparent' }}>
+                  <Typography>{t("navbar.sponsorship", "¿Te interesa patrocinar?")}</Typography>
+                </ListItemButton>
+              </Link>
+            </ListItem>
+            <ListItem>
+              <Link to="/about" style={{ textDecoration: 'none', height: '100%', width: '100%', color: theme.palette.primary.main }}>
+                <ListItemButton sx={{ height: '100%', color: '#000000', backgroundColor: isActive('/about') ? '#c1c1c1' : 'transparent' }}>
+                  <Typography>{t("navbar.aboutUs", "Acerca de nosotros")}</Typography>
+                </ListItemButton>
+              </Link>
+            </ListItem>
+            <ListItem>
+              <Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%', width: '100%', color: theme.palette.primary.main }}>
+                <ListItemButton sx={{ height: '100%', color: theme.palette.primary.main }}>
+                  <Typography>{t("navbar.survey", "Encuesta")}</Typography>
+                </ListItemButton>
+              </Link>
+            </ListItem>
+          </List>
+        </Box>
+      </Drawer>
     </>
   )
 }