more pages

src/pages/Layout.tsx

@@ -1,14 +1,32 @@
-import { Outlet, Navigate } from 'react-router-dom'
-import { isLoggedIn, LoggedIn } from '../authorization'
+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() === LoggedIn.No && <Navigate to="/login" replace={true} />
+                isLoggedIn() === LoginState.No && <Navigate to="/login" replace={true} />
             }
-            <span>Layout</span>
-            <Outlet />
+            <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>
     )
 }