You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.1 KiB
63 lines
2.1 KiB
import React, { FC } from 'react'
|
|
import { HashRouter as Router, Route, Link } from 'react-router-dom'
|
|
|
|
import Spinner from '../spinner'
|
|
import UserInfo from '../user-info'
|
|
|
|
import Home from '../pages/home'
|
|
import Register from '../pages/register'
|
|
import Directory from '../pages/directory'
|
|
|
|
import './app.scss'
|
|
|
|
interface Props {
|
|
menuCollapsed: boolean
|
|
fetching: boolean
|
|
}
|
|
|
|
const App: FC<Props> = ({ menuCollapsed, fetching }) => {
|
|
const mainMenuWidth = 300
|
|
const mainColumnLeftMargin = menuCollapsed ? 0 : mainMenuWidth
|
|
|
|
return (
|
|
<Router>
|
|
<div>
|
|
<div id="main-menu" style={{ width: mainMenuWidth }}>
|
|
<div id="header">
|
|
<Link className="has-text-white is-size-2" to="/">flxr</Link>
|
|
<hr className="has-background-grey-lighter" />
|
|
</div>
|
|
|
|
<div id="navigation">
|
|
<p>
|
|
<Link className="has-text-white" to="/">Timeline</Link>
|
|
</p>
|
|
</div>
|
|
|
|
{fetching && <Spinner />}
|
|
|
|
<UserInfo />
|
|
|
|
<footer>
|
|
<div className="content has-text-centered has-text-white is-size-7">
|
|
<Link className="has-text-white is-inline-block" to="/">Home</Link>
|
|
⚬
|
|
<Link className="has-text-white is-inline-block" to="/">About</Link>
|
|
|
|
<p>© 2019 Flexor.cc</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div id="main-column" style={{ marginLeft: mainColumnLeftMargin }}>
|
|
<Route exact path="/" component={Home} />
|
|
<Route path="/login" component={Home} />
|
|
<Route path="/register/:group" component={Register} />
|
|
<Route path="/directory" component={Directory} />
|
|
</div>
|
|
</div>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
export default App
|