32 lines
1.7 KiB
TypeScript
32 lines
1.7 KiB
TypeScript
import { Outlet, Navigate, NavLink } from 'react-router-dom'
|
|
import { isLoggedIn, LoginState, usePersistentState } from '../authorization'
|
|
|
|
const activeClassName: ({ isActive }: { isActive: boolean }) => string = ({ isActive }) => isActive ? "active" : ""
|
|
|
|
export function Layout() {
|
|
const [collapsed, setCollapsed] = usePersistentState("collapsed", false)
|
|
return (
|
|
<div>
|
|
{
|
|
isLoggedIn() === LoginState.No && <Navigate to="/login" replace={true} />
|
|
}
|
|
<div id="sidebar" className={collapsed ? "collapse" : ""}>
|
|
<label id="collapse">
|
|
<input type="checkbox" checked={collapsed} onChange={e => setCollapsed(e.target.checked)} />
|
|
<div className="button">yo</div>
|
|
</label>
|
|
<div className="menu">
|
|
<NavLink className={activeClassName} to="/"><span className="item">Dashboard</span></NavLink>
|
|
<NavLink className={activeClassName} to="/bots"><span className="item">Bots</span></NavLink>
|
|
<NavLink className={activeClassName} to="/tokens"><span className="item">Tokens</span></NavLink>
|
|
<NavLink className={activeClassName} to="/settings"><span className="item">Settings</span></NavLink>
|
|
<NavLink className={activeClassName} to="/logout"><span className="item important">Logout</span></NavLink>
|
|
<NavLink className={activeClassName} to="/404"><span className="item">(temp) 404</span></NavLink>
|
|
</div>
|
|
</div>
|
|
<div id="content">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
)
|
|
} |