|
|
|
@ -1,22 +1,26 @@
@@ -1,22 +1,26 @@
|
|
|
|
|
import * as History from "history"; |
|
|
|
|
import * as React from "react"; |
|
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
import { Menu } from "semantic-ui-react"; |
|
|
|
|
|
|
|
|
|
import { AppState, injectState } from "@app/state"; |
|
|
|
|
import { AppState, ConsumeState, injectState } from "@app/state"; |
|
|
|
|
import { observer } from "mobx-react"; |
|
|
|
|
|
|
|
|
|
interface NavItemProps { |
|
|
|
|
to: string; |
|
|
|
|
children: React.ReactNode; |
|
|
|
|
location: History.Location; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@observer |
|
|
|
|
function NavItem({ to, children, location }: NavItemProps) { |
|
|
|
|
return <Menu.Item as={Link} to={to} active={location.pathname.startsWith(to)}>{children}</Menu.Item>; |
|
|
|
|
const NavItem = observer(({ to, children }: NavItemProps) => { |
|
|
|
|
function consumeState(appState: AppState) { |
|
|
|
|
const { location } = appState.routerStore; |
|
|
|
|
return ( |
|
|
|
|
<Menu.Item as={Link} to={to} active={location.pathname.startsWith(to)}>{children}</Menu.Item> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return (<ConsumeState>{consumeState}</ConsumeState>); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
function NavBar({ appState }: { appState: AppState }) { |
|
|
|
|
let loginMenu; |
|
|
|
|
if (appState.isLoggedIn) { |
|
|
|
|