Преглед изворни кода

feat: add logout button under settings in left panel #63

- Added logout button in SidebarFooter below the Settings section
- Integrated AuthContext to use the logout function
- Added LogOut icon from lucide-react
- Button includes hover effect and proper styling to match existing UI
- Clicking logout will clear session and redirect to login page
Claude пре 5 месеци
родитељ
комит
aaaef97bce
1 измењених фајлова са 16 додато и 5 уклоњено
  1. 16 5
      shopcall.ai-main/src/components/AppSidebar.tsx

+ 16 - 5
shopcall.ai-main/src/components/AppSidebar.tsx

@@ -11,7 +11,8 @@ import {
   SidebarFooter,
 } from "@/components/ui/sidebar";
 import { useNavigate } from "react-router-dom";
-import { LayoutDashboard, Phone, BarChart3, Settings, CreditCard, Layers3, PhoneCall } from "lucide-react";
+import { LayoutDashboard, Phone, BarChart3, Settings, CreditCard, Layers3, PhoneCall, LogOut } from "lucide-react";
+import { useAuth } from "@/components/context/AuthContext";
 
 const menuItems = [
   {
@@ -62,7 +63,8 @@ const configItems = [
 export function AppSidebar() {
   const navigate = useNavigate();
   const currentPath = window.location.pathname;
-  
+  const { logout } = useAuth();
+
   return (
     <Sidebar className="border-r border-slate-700/50 bg-slate-900 text-white">
       <SidebarHeader className="p-6 bg-slate-900">
@@ -128,9 +130,18 @@ export function AppSidebar() {
       </SidebarContent>
 
       <SidebarFooter className="p-6 bg-slate-900">
-        <div className="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg">
-          <Settings className="w-4 h-4 text-slate-400" />
-          <span className="text-sm text-slate-300">Settings</span>
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg">
+            <Settings className="w-4 h-4 text-slate-400" />
+            <span className="text-sm text-slate-300">Settings</span>
+          </div>
+          <button
+            onClick={logout}
+            className="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg hover:bg-slate-800 transition-colors cursor-pointer"
+          >
+            <LogOut className="w-4 h-4 text-slate-400" />
+            <span className="text-sm text-slate-300">Logout</span>
+          </button>
         </div>
       </SidebarFooter>
     </Sidebar>