blob: acbec40547387695762912313a9e31c82b1627bd (
plain)
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
59
60
61
62
63
64
65
66
67
68
69
70
|
import { CSSProperties, ReactNode } from 'react';
import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
import MenuIcon from '@material-ui/icons/Menu';
import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
export function NavbarItem(props: {
icon?: ReactNode;
title: string;
href?: string;
active?: boolean;
children?: ReactNode;
classList?: Array<string>;
style?: CSSProperties;
outerStyle?: CSSProperties;
onIconClick?: () => void;
onClick?: () => void;
}) {
var classes = props.classList || [];
classes.push('navbarItem');
props.active && classes.push('active');
return <a href={props.href} className={classes.join(' ')} style={props.outerStyle}>
<div className='inner' style={props.style}>
<div className='icon' onClick={props.onIconClick}>{props.icon}</div>
<span className='title' onClick={props.onClick}>{props.title}</span>
</div>
{props.children}
</a>;
}
export default function Navbar(props: {
page?: string;
}) {
return <div className='globalLinks' style={{ marginBottom: 24 }}>
<NavbarItem
active={props.page == 'home'}
icon={<HomeRoundedIcon />}
title='Home'
href='/'
classList={['indentLevel0', 'link']}
/>
<NavbarItem
active={props.page == 'search'}
icon={<SearchRoundedIcon />}
title='Search for posts'
href='/search'
classList={['indentLevel0', 'link']}
/>
</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>;
}
|