Merge pull request #56 from deriv-com/Rupato/Add-transtion-to-sidenav…

…-buttons Rupato/add transition to sidenav buttons
deriv-com · Feb 25, 2025 · 9748c1e · 9748c1e
2 parents 5d40bff + 1865841
commit 9748c1e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 26 deletions.
diff --git a/src/components/SideNav/SideNav.tsx b/src/components/SideNav/SideNav.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { BarChart2, Clock, Menu } from "lucide-react";
+import { Clock, Menu } from "lucide-react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useClientStore } from "@/stores/clientStore";
 import { useOrientationStore } from "@/stores/orientationStore";
@@ -15,37 +15,25 @@ export const SideNav: React.FC<{ setMenuOpen: (open: boolean) => void; isMenuOpe
   return (
     <nav className={`${isLandscape ? 'flex' : 'hidden'} fixed z-[100] flex-col h-[100dvh] sticky top-0 w-16 border-r bg-white overflow-y-auto`}>
       <div className="flex flex-col items-center gap-6 py-6">
-        <button
-          onClick={() => {
-            if (window.innerWidth >= 1024) {
-              setSidebarOpen(false);
-            }
-            navigate("/trade");
-          }}
-          className={`flex flex-col items-center gap-1 ${location.pathname === "/trade" ? "text-primary" : "text-gray-500"
-            }`}
-        >
-          <BarChart2 className="w-5 h-5" />
-          <span className="text-xs">Trade</span>
-        </button>
         {isLoggedIn && (
           <>
             <button
               onClick={() => {
                 if (window.innerWidth >= 1024) {
                   setMenuOpen(false)
                   setSidebarOpen(true);
-                  navigate("/trade");
                 } else {
                   navigate('/positions')
                 }
               }}
-              className={`flex flex-col items-center gap-1 ${location.pathname === '/positions' ? 'text-primary' : 'text-gray-500'
+              className={`flex flex-col items-center ${(location.pathname === '/positions') ? 'text-primary' : 'text-gray-500'
                 }`}
               disabled={isSidebarOpen}
             >
-              <Clock className="w-5 h-5" />
-              <span className="text-xs">Positions</span>
+              <div className={`${isSidebarOpen ? "bg-gray-200 rounded-lg p-2" : "p-2"}`}>
+                <Clock className="w-5 h-5" />
+              </div>
+              <span className={`text-xs ${isSidebarOpen ? "text-black" : ""}`}>Positions</span>
             </button>
           </>
         )}
@@ -59,10 +47,12 @@ export const SideNav: React.FC<{ setMenuOpen: (open: boolean) => void; isMenuOpe
             }
           }}
           disabled={isMenuOpen}
-          className="flex flex-col items-center gap-1 text-gray-500"
+          className="flex flex-col items-center text-gray-500"
         >
-          <Menu className="w-5 h-5" />
-          <span className="text-xs">Menu</span>
+          <div className={`${isMenuOpen ? "bg-gray-200 rounded-lg p-2" : "p-2"}`}>
+            <Menu className="w-5 h-5" />
+          </div>
+          <span className={`text-xs ${isMenuOpen ? "text-black" : "text-gray-500"}`}>Menu</span>
         </button>
       </div>
     </nav>

diff --git a/src/components/SideNav/__tests__/SideNav.test.tsx b/src/components/SideNav/__tests__/SideNav.test.tsx
@@ -40,16 +40,12 @@ describe('SideNav', () => {
   it('renders all navigation items', () => {
     renderWithRouter();
     expect(screen.getByText('Menu')).toBeInTheDocument();
-    expect(screen.getByText('Trade')).toBeInTheDocument();
   });
 
   it('navigates correctly when clicking navigation items', () => {
     renderWithRouter();
 
     fireEvent.click(screen.getByText('Menu'));
     expect(screen.getByTestId('location-display')).toHaveTextContent('/');
-
-    fireEvent.click(screen.getByText('Trade'));
-    expect(screen.getByTestId('location-display')).toHaveTextContent('/');
   });
 });
diff --git a/src/hooks/useLogout.ts b/src/hooks/useLogout.ts
@@ -8,6 +8,6 @@ export const useLogout = () => {
   return () => {
     localStorage.removeItem("loginToken");
     resetState();
-    navigate("/trade");
+    navigate("/");
   };
 };