diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/navbar.tsx | 16 |
1 files changed, 15 insertions, 1 deletions
diff --git a/components/navbar.tsx b/components/navbar.tsx index 35949f4..b5549c0 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -2,6 +2,7 @@ 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'; export function NavbarItem(props: { icon?: ReactNode; @@ -30,7 +31,7 @@ export function NavbarItem(props: { export default function Navbar(props: { page?: string; }) { - return <div style={{ marginBottom: 24 }}> + return <div className="globalLinks" style={{ marginBottom: 24 }}> <NavbarItem active={props.page == 'home'} icon={<HomeRoundedIcon />} @@ -47,3 +48,16 @@ export default function Navbar(props: { /> </div>; } + +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)" }} /> + </div> + </div>; +} |