update docker compose to read portainer env

client/src/components/AppLayout.css

@@ -118,6 +118,26 @@
   flex-shrink: 0;
 }
 
+.sb-spacer {
+  flex: 1;
+}
+
+.sb-footer {
+  padding: 8px;
+  border-top: 1px solid #222;
+  flex-shrink: 0;
+}
+
+.sb-btn--logout {
+  color: #666;
+  width: 100%;
+}
+
+.sb-btn--logout:hover {
+  color: #f87171;
+  background: #1e1010;
+}
+
 .sb-app-icon-placeholder {
   width: 20px;
   height: 20px;

client/src/components/AppLayout.jsx

@@ -1,13 +1,25 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { logout } from '../api';
 import './AppLayout.css';
 
 export default function AppLayout({ sidebar, children }) {
   const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    logout();
+    navigate('/login', { replace: true });
+  }
 
   return (
     <div className="app-layout">
       <aside className={`app-sidebar${open ? ' is-open' : ''}`}>
         {sidebar}
+        <div className="sb-spacer" />
+        <div className="sb-footer">
+          <button className="sb-btn sb-btn--logout" onClick={handleLogout}>Sign out</button>
+        </div>
       </aside>
 
       {open && (