blob: 35949f407c5b2f155a269e594201e375973ffae8 (
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
|
import { CSSProperties, ReactNode } from 'react';
import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
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 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>;
}
|