blob: 9183b3b5e89a569c3f66f4b0a9e5ce70452a5c6f (
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
|
import { ReactNode, CSSProperties } 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"]}/>
<NavbarItem
active={props.page == "search"}
icon={<SearchRoundedIcon/>}
title="Search for posts"
href="/search"
classList={["indentLevel0"]}/>
</div>
}
|