Merge pull request #51 from deriv-com/farabi/fix-chart-container-resi…

…ze-on-sidebar-open Farabi/fix-chart-container-resize-on-sidebar-open
deriv-com · Feb 21, 2025 · a75a4ee · a75a4ee
2 parents 8d33b69 + b079a70
commit a75a4ee
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 26 deletions.
diff --git 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>
   );

diff --git a/src/layouts/MainLayout/MainLayout.tsx b/src/layouts/MainLayout/MainLayout.tsx
@@ -44,25 +44,31 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
       {isHeaderVisible && (
         <Header className="sticky top-0 z-50 w-full" />
       )}
-      <div className={`flex flex-1 relative ${isDesktop ? "overflow-hidden" : "" }`}>
+      <div className={`flex flex-1 relative ${isDesktop ? "overflow-hidden" : ""}`}>
         {isLandscape && (
           <SideNav isSidebarOpen={isSidebarOpen} setSidebarOpen={setSidebarOpen} setMenuOpen={setMenuOpen} isMenuOpen={isMenuOpen} />
         )}
-        <div className={`flex flex-col ${isSidebarOpen || isMenuOpen ? "w-[100%] ml-auto" : "w-full"} w-[100%] overflow-hidden transition-all duration-300`}>
-          {isLandscape && (
-            <>
-            <div className={`${isSidebarOpen ? "w-[25%] flex-grow" : ""} transition-all duration-300`}>
-              <PositionsSidebar isOpen={isSidebarOpen} onClose={() => setSidebarOpen(false)} />
+        <div className="flex flex-1 overflow-hidden">
+          {isLandscape ? (
+            <div className="flex flex-1">
+              <div className={`${isSidebarOpen ? "w-[22%]" : "w-0"} transition-all duration-300 flex-shrink-0`}>
+                <PositionsSidebar isOpen={isSidebarOpen} onClose={() => setSidebarOpen(false)} />
+              </div>
+              <div className={`${isMenuOpen ? "w-[22%]" : "w-0"} transition-all duration-300 flex-shrink-0`}>
+                <MenuSidebar isOpen={isMenuOpen} onClose={() => setMenuOpen(false)} />
+              </div>
+              <main className="flex-1 flex flex-row transition-all duration-300">
+                {children}
+              </main>
             </div>
-            <MenuSidebar isOpen={isMenuOpen} onClose={() => setMenuOpen(false)} />
-            </>
+          ) : (
+            <main className="flex-1 flex flex-col">
+              {children}
+              {isBottomNavVisible && <Footer className="sticky bottom-0 z-50" />}
+            </main>
           )}
-        <main className={`flex-1 ${isLandscape ? 'flex flex-row' : 'flex flex-col'}`}>
-          {children}
-        </main>
-        {!isLandscape && isBottomNavVisible && <Footer className="sticky bottom-0 z-50" />}
-      </div>
+        </div>
       </div>
     </div>
   );
-};
+};