Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 61x 4x 4x 4x 1x 4x 16x | import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import clsx from 'clsx';
import IconButton from '@material-ui/core/IconButton';
import ClearRounded from '@material-ui/icons/ClearRounded';
import MenuRounded from '@material-ui/icons/MenuRounded';
import DropdownList from './DropdownList';
import SearchContainer from './SearchContainer';
import useStyles from './styles';
import { navigation } from '../../navigation';
const HeaderSmall = () => {
const classes = useStyles();
const [isBurgerOpen, setIsBurgerOpen] = useState(null);
const toggleBurger = () => {
setIsBurgerOpen((prevOpen) => !prevOpen);
};
return (
<nav className={classes.nav}>
<Link to='/home'>
<img className={classes.logo} src='/images/cti-logo.svg' alt='civic logo' />
</Link>
<div
className={clsx(classes.flexContainer, {
[classes.showMobileNav]: isBurgerOpen,
[classes.hideMobileNav]: !isBurgerOpen,
})}
>
{navigation.map((nav) => {
return (
<DropdownList
key={nav.id}
header={nav.header}
route={nav.route}
links={nav.subNavigation}
linkClickHandler={toggleBurger}
/>
);
})}
<SearchContainer />
</div>
<div onClick={toggleBurger} className={classes.mobileContainer}>
<IconButton>
{!isBurgerOpen ? (
<MenuRounded data-cy='menuIcon' fontSize='large' />
) : (
<ClearRounded data-cy='menuIcon' fontSize='large' />
)}
</IconButton>
</div>
</nav>
);
};
export default HeaderSmall;
|