From 6de5166373dc83214ea1dc364fde644f31a9b6bc Mon Sep 17 00:00:00 2001
From: colinislit <colin@ikbenlit.nl>
Date: Wed, 19 Nov 2025 15:43:02 +0100
Subject: [PATCH] logout - sidebar

---
 app/epd/components/epd-sidebar.tsx | 50 ++++++++++++++----------------
 components/ui/modern-side-bar.tsx  |  4 +++
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/app/epd/components/epd-sidebar.tsx b/app/epd/components/epd-sidebar.tsx
index fd90a99..9180309 100644
--- a/app/epd/components/epd-sidebar.tsx
+++ b/app/epd/components/epd-sidebar.tsx
@@ -238,33 +238,31 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
 
           {/* Logout Button */}
           <div className="p-3">
-            <form action="/auth/logout" method="POST">
-              <button
-                type="submit"
-                className={`
-                  w-full flex items-center rounded-md text-left transition-all duration-200 group
-                  text-red-600 hover:bg-red-50 hover:text-red-700
-                  ${isCollapsed ? "justify-center p-2.5" : "space-x-2.5 px-3 py-2.5"}
-                `}
-                title={isCollapsed ? "Uitloggen" : undefined}
-              >
-                <div className="flex items-center justify-center min-w-[20px]">
-                  <LogOut className="h-5 w-5 flex-shrink-0 text-red-500 group-hover:text-red-600" />
+            <button
+              onClick={() => window.location.href = '/auth/logout'}
+              className={`
+                w-full flex items-center rounded-md text-left transition-all duration-200 group
+                text-red-600 hover:bg-red-50 hover:text-red-700
+                ${isCollapsed ? "justify-center p-2.5" : "space-x-2.5 px-3 py-2.5"}
+              `}
+              title={isCollapsed ? "Uitloggen" : undefined}
+            >
+              <div className="flex items-center justify-center min-w-[20px]">
+                <LogOut className="h-5 w-5 flex-shrink-0 text-red-500 group-hover:text-red-600" />
+              </div>
+
+              {!isCollapsed && (
+                <span className="text-sm">Uitloggen</span>
+              )}
+
+              {/* Tooltip for collapsed state */}
+              {isCollapsed && (
+                <div className="absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50">
+                  Uitloggen
+                  <div className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1 w-1.5 h-1.5 bg-slate-800 rotate-45" />
                 </div>
-
-                {!isCollapsed && (
-                  <span className="text-sm">Uitloggen</span>
-                )}
-
-                {/* Tooltip for collapsed state */}
-                {isCollapsed && (
-                  <div className="absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50">
-                    Uitloggen
-                    <div className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1 w-1.5 h-1.5 bg-slate-800 rotate-45" />
-                  </div>
-                )}
-              </button>
-            </form>
+              )}
+            </button>
           </div>
         </div>
       </div>
diff --git a/components/ui/modern-side-bar.tsx b/components/ui/modern-side-bar.tsx
index 0e89464..aa38c90 100644
--- a/components/ui/modern-side-bar.tsx
+++ b/components/ui/modern-side-bar.tsx
@@ -63,6 +63,10 @@ export function Sidebar({ className = "" }: SidebarProps) {
   const toggleCollapse = () => setIsCollapsed(!isCollapsed);
 
   const handleItemClick = (itemId: string) => {
+    if (itemId === 'logout') {
+      window.location.href = '/auth/logout';
+      return;
+    }
     setActiveItem(itemId);
     if (window.innerWidth < 768) {
       setIsOpen(false);