Skip to content

Commit 560adb2

Browse files
itsmeurbiitsmeurbi
committed
Add missing style on navbar
1 parent a9bb99d commit 560adb2

2 files changed

Lines changed: 78 additions & 49 deletions

File tree

‎src/NavBar.tsx‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,13 @@ import {
2020
import { LanguageSelector } from './LanguageSelector'
2121
import { ReactElement } from 'react'
2222
import MenuIcon from '@mui/icons-material/Menu'
23-
import { useTheme } from '@mui/material/styles'
2423
import logo from './assets/images/logo.png'
2524

2625
const NavBar = (): ReactElement => {
2726
const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
2827
const location = useLocation()
2928
const { openSurvey } = useSurvey()
3029
const { t } = useTranslation()
31-
const theme = useTheme()
3230

3331
const toggleDrawer = (newOpen: boolean) => () => {
3432
setIsDrawerOpen(newOpen)
@@ -49,35 +47,37 @@ const NavBar = (): ReactElement => {
4947
<>
5048
<AppBar position="sticky" color="default">
5149
<Container maxWidth="xl">
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 }}>
63-
<Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
64-
</Link>
65-
<Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
66-
<Button sx={{ height: '100%', backgroundColor: isActive('/sponsorship') ? '#c1c1c1' : 'transparent' }}>
67-
<Typography>{t("navbar.sponsorship", "¿Te interesa patrocinar?")}</Typography>
68-
</Button>
69-
</Link>
70-
<Link to="/about" style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
71-
<Button sx={{ height: '100%', backgroundColor: isActive('/about') ? '#c1c1c1' : 'transparent' }}>
72-
<Typography>{t("navbar.aboutUs", "Acerca de nosotros")}</Typography>
73-
</Button>
74-
</Link>
75-
<Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%', color: theme.palette.primary.main }}>
76-
<Button sx={{ height: '100%'}}>
77-
<Typography>{t("navbar.survey", "Encuesta")}</Typography>
78-
</Button>
79-
</Link>
80-
<Box sx={{ ml: 1 }}>
50+
<Toolbar variant="dense" sx={{ alignItems: 'stretch', justifyContent: 'space-between' }}>
51+
<IconButton
52+
color="inherit"
53+
aria-label="open drawer"
54+
onClick={toggleDrawer(true)}
55+
edge="start"
56+
sx={{ display: { xs: 'flex', md: 'none' } }}
57+
>
58+
<MenuIcon />
59+
</IconButton>
60+
<Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: 'center' } }>
61+
<Link to="/" style={{ textDecoration: 'none', marginRight: '1rem', flexShrink: 0 }}>
62+
<Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
63+
</Link>
64+
<Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%' }}>
65+
<Button className={isActive('/sponsorship') ? 'active' : '' } sx={{ height: '100%', borderRadius: '0' }}>
66+
<Typography>{t("navbar.sponsorship")}</Typography>
67+
</Button>
68+
</Link>
69+
<Link to="/about" style={{ textDecoration: 'none', height: '100%' }}>
70+
<Button className={isActive('/about') ? 'active' : '' } sx={{ height: '100%', borderRadius: '0' }}>
71+
<Typography>{t("navbar.aboutUs")}</Typography>
72+
</Button>
73+
</Link>
74+
<Link to="/" onClick={openSurvey} style={{ textDecoration: 'none', height: '100%' }}>
75+
<Button sx={{ height: '100%', borderRadius: '0' }}>
76+
<Typography>{t("navbar.survey")}</Typography>
77+
</Button>
78+
</Link>
79+
</Box>
80+
<Box sx={{ display: 'flex', alignItems: 'center' }}>
8181
<LanguageSelector/>
8282
</Box>
8383
</Toolbar>
@@ -86,31 +86,31 @@ const NavBar = (): ReactElement => {
8686
<Drawer open={isDrawerOpen} onClose={toggleDrawer(false)}>
8787
<Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
8888
<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>
89+
<ListItem sx={{ px: 0 }}>
90+
<Link to="/" style={{ textDecoration: 'none', width: '100%' }}>
91+
<ListItemButton className={isActive('/') ? 'active' : ''}>
92+
<Typography>{t("navbar.home")}</Typography>
9393
</ListItemButton>
9494
</Link>
9595
</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>
96+
<ListItem sx={{ px: 0 }}>
97+
<Link to="/sponsorship" style={{ textDecoration: 'none', width: '100%' }}>
98+
<ListItemButton className={isActive('/sponsorship') ? 'active' : ''}>
99+
<Typography>{t("navbar.sponsorship")}</Typography>
100100
</ListItemButton>
101101
</Link>
102102
</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>
103+
<ListItem sx={{ px: 0 }}>
104+
<Link to="/about" style={{ textDecoration: 'none', width: '100%' }}>
105+
<ListItemButton className={isActive('/about') ? 'active' : ''}>
106+
<Typography>{t("navbar.aboutUs")}</Typography>
107107
</ListItemButton>
108108
</Link>
109109
</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>
110+
<ListItem sx={{ px: 0 }}>
111+
<Link to="#" onClick={openSurvey} style={{ textDecoration: 'none', width: '100%' }}>
112+
<ListItemButton sx={{ height: '100%' }}>
113+
<Typography>{t("navbar.survey")}</Typography>
114114
</ListItemButton>
115115
</Link>
116116
</ListItem>

‎src/theme.ts‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,39 @@ const theme = createTheme({
99
main: '#3298cc',
1010
},
1111
background: {
12-
default: '#ffffff'
12+
default: 'rgba(51,152,203,.9)'
1313
}
1414
},
15-
typography: {
15+
components: {
16+
MuiButton: {
17+
styleOverrides: {
18+
root: {
19+
'&:hover': {
20+
backgroundColor: 'rgba(51,152,203,.9)',
21+
color: 'white',
22+
},
23+
'&.active': {
24+
backgroundColor: 'rgba(51,152,203,.9)',
25+
color: 'white',
26+
},
27+
},
28+
},
29+
},
30+
MuiListItemButton: {
31+
styleOverrides: {
32+
root: {
33+
color: '#1c1c17',
34+
'&:hover': {
35+
backgroundColor: 'rgba(51,152,203,.9)',
36+
color: 'white',
37+
},
38+
'&.active': {
39+
backgroundColor: 'rgba(51,152,203,.9)',
40+
color: 'white',
41+
},
42+
},
43+
},
44+
},
1645
},
1746
});
1847

0 commit comments

Comments
 (0)