diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/navbar.tsx | 27 |
1 files changed, 17 insertions, 10 deletions
diff --git a/components/navbar.tsx b/components/navbar.tsx index b5549c0..acbec40 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -1,8 +1,8 @@ import { CSSProperties, ReactNode } from 'react'; import HomeRoundedIcon from '@material-ui/icons/HomeRounded'; -import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; import MenuIcon from '@material-ui/icons/Menu'; +import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; export function NavbarItem(props: { icon?: ReactNode; @@ -31,7 +31,7 @@ export function NavbarItem(props: { export default function Navbar(props: { page?: string; }) { - return <div className="globalLinks" style={{ marginBottom: 24 }}> + return <div className='globalLinks' style={{ marginBottom: 24 }}> <NavbarItem active={props.page == 'home'} icon={<HomeRoundedIcon />} @@ -50,14 +50,21 @@ export default function Navbar(props: { } export function MobileNavbar() { - return <div className="mobileNav"> - <a className="home button small" href="/"><HomeRoundedIcon /></a> - <a className="search button small" href="/search"><SearchRoundedIcon/></a> - <div className="mainButton button" onClick={() => { - document.getElementsByClassName("mobileNav")[0].classList.toggle("open"); - document.getElementsByClassName("navAreaWrapper")[0].classList.toggle("navVisible"); - }}> - <MenuIcon style={{ "fill": "var(--oxford-blue)" }} /> + return <div className='mobileNav'> + <a className='home button small' href='/'> + <HomeRoundedIcon /> + </a> + <a className='search button small' href='/search'> + <SearchRoundedIcon /> + </a> + <div + className='mainButton button' + onClick={() => { + document.getElementsByClassName('mobileNav')[0].classList.toggle('open'); + document.getElementsByClassName('navAreaWrapper')[0].classList.toggle('navVisible'); + }} + > + <MenuIcon style={{ 'fill': 'var(--oxford-blue)' }} /> </div> </div>; } |