From 686f0dacb76d65100e9a58b48ccc52d95856b663 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Fri, 21 Feb 2025 16:56:43 +0800
Subject: [PATCH] fix: added menu bar functions

---
 src/components/SideNav/MenuSidebar.tsx | 48 +++++++++++++++++++-------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/SideNav/MenuSidebar.tsx b/src/components/SideNav/MenuSidebar.tsx
index 0276ef9..1bd3224 100644
--- a/src/components/SideNav/MenuSidebar.tsx
+++ b/src/components/SideNav/MenuSidebar.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { ExternalLink, Home, LogOut, Moon } from "lucide-react";
+import { useLogout } from "@/hooks/useLogout";
+import { useClientStore } from "@/stores/clientStore";
 
 interface MenuSidebarProps {
   isOpen: boolean;
@@ -11,7 +13,10 @@ const MenuSidebar: React.FC<MenuSidebarProps> = ({ isOpen, onClose }) => {
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
+      if (
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as Node)
+      ) {
         onClose();
       }
     };
@@ -23,6 +28,8 @@ const MenuSidebar: React.FC<MenuSidebarProps> = ({ isOpen, onClose }) => {
   }, [onClose]);
 
   const [isDarkMode, setIsDarkMode] = React.useState(false);
+  const { isLoggedIn } = useClientStore();
+  const logout = useLogout();
 
   return (
     <div
@@ -33,30 +40,47 @@ const MenuSidebar: React.FC<MenuSidebarProps> = ({ isOpen, onClose }) => {
     >
       <div className="p-4 flex justify-between items-center">
         <h2 className="text-lg font-bold">Menu</h2>
-        <button onClick={onClose} className="text-gray-600 hover:text-gray-900">✕</button>
+        <button onClick={onClose} className="text-gray-600 hover:text-gray-900">
+          ✕
+        </button>
       </div>
       <div className="p-4 space-y-4">
-        <div className="flex items-center justify-between cursor-pointer py-2">
+        <a
+          href="https://champion.trade/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-between cursor-pointer py-2"
+        >
           <div className="flex items-center gap-3">
             <Home className="w-5 h-5" />
             <span>Go to Home</span>
           </div>
           <ExternalLink className="w-5 h-5" />
-        </div>
+        </a>
         <div className="flex items-center justify-between cursor-pointer py-2">
           <div className="flex items-center gap-3">
             <Moon className="w-5 h-5" />
             <span>Theme</span>
           </div>
-            <label className="relative inline-flex items-center cursor-pointer">
-              <input type="checkbox" className="sr-only peer" checked={isDarkMode} onChange={() => setIsDarkMode(!isDarkMode)} />
-              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-            </label>
-        </div>
-        <div className="flex items-center gap-3 cursor-pointer py-2" >
-          <LogOut className="w-5 h-5" />
-          <span>Log out</span>
+          <label className="relative inline-flex items-center cursor-pointer">
+            <input
+              type="checkbox"
+              className="sr-only peer"
+              checked={isDarkMode}
+              onChange={() => setIsDarkMode(!isDarkMode)}
+            />
+            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+          </label>
         </div>
+        {isLoggedIn && (
+          <button
+            className="flex items-center gap-3 cursor-pointer py-2 w-full hover:bg-gray-100"
+            onClick={logout}
+          >
+            <LogOut className="w-5 h-5" />
+            <span>Log out</span>
+          </button>
+        )}
       </div>
     </div>
   );