chore: align with master

src/components/BalanceDisplay/BalanceDisplay.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useClientStore } from '@/stores/clientStore';
+import { useOrientationStore } from '@/stores/orientationStore';
 
 interface BalanceDisplayProps {
   onDeposit?: () => void;
@@ -15,6 +16,7 @@ export const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
   loginUrl = 'https://options-trading.deriv.ai/',
 }) => {
   const { isLoggedIn, balance, currency } = useClientStore();
+  const { isLandscape } = useOrientationStore();
 
   if (!isLoggedIn) {
     return (
@@ -30,10 +32,10 @@ export const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
   }
 
   return (
-    <div className={`flex items-center justify-between landscape:gap-4 ${className}`}>
+    <div className={`flex items-center justify-between ${isLandscape ? 'gap-4' : ''} ${className}`}>
       <div className="flex flex-col">
         <span className="text-sm text-gray-700">Real</span>
-        <span className="text-xl font-bold text-teal-500">{balance} {currency}</span>
+        <span className="text-sm font-bold text-teal-500">{balance} {currency}</span>
       </div>
       <button 
         className="px-4 py-2 font-bold border border-gray-700 rounded-3xl"

src/components/Chart/Chart.tsx

@@ -152,7 +152,7 @@ export const Chart: React.FC<ChartProps> = ({ className }) => {
         {currentPrice && currentTime && (
           <div className="absolute top-4 left-4 bg-gray-100 p-2 rounded shadow-sm z-10">
             <div className="text-sm font-medium">VOLATILITY 100 (1S) INDEX</div>
-            <div className="text-lg font-bold">{currentPrice.toFixed(2)}</div>
+            <div className="text-sm font-bold">{currentPrice.toFixed(2)}</div>
             <div className="text-xs text-gray-600">{currentTime}</div>
           </div>
         )}

src/components/SideNav/README.md

@@ -43,17 +43,25 @@ const routes = [
 ];
 ```
 
+## Dependencies
+```typescript
+import { useDeviceDetection } from "@/hooks/useDeviceDetection";
+import { useOrientationStore } from "@/stores/orientationStore";
+```
+
 ## Responsive Behavior
-- Hidden by default on portrait mode: `hidden`
-- Visible in landscape mode: `landscape:flex`
+Uses hooks for orientation-based display:
+- `useDeviceDetection`: Detects if the device is mobile
+- `useOrientationStore`: Manages orientation state
+- Conditionally rendered based on device type and orientation
 - Fixed width: `w-16`
-- Full height: `h-full`
+- Full height: `h-[100dvh]`
 
 ## Styling
-Uses Tailwind CSS for styling:
+Uses Tailwind CSS with conditional classes:
 ```tsx
 // Container
-className="hidden landscape:flex flex-col h-full w-16 border-r bg-white"
+className={`${isLandscape ? 'flex' : 'hidden'} flex-col h-[100dvh] sticky top-0 w-16 border-r bg-white overflow-y-auto`}
 
 // Navigation buttons
 className="flex flex-col items-center gap-1"
@@ -65,10 +73,12 @@ className="text-gray-500" // Inactive route
 
 ## Implementation Details
 
-### Route Handling
+### Route and State Handling
 ```typescript
 const navigate = useNavigate();
 const location = useLocation();
+const { isMobile } = useDeviceDetection();
+const { isLandscape } = useOrientationStore();
 
 // Active route check
 const isActive = location.pathname === '/route';

src/components/SideNav/SideNav.tsx

@@ -2,18 +2,20 @@ import React from "react";
 import { BarChart2, Clock, Menu } from "lucide-react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useClientStore } from "@/stores/clientStore";
+import { useOrientationStore } from "@/stores/orientationStore";
 
 export const SideNav: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { isLoggedIn } = useClientStore();
+  const { isLandscape } = useOrientationStore();
 
   const handleMenuClick = () => {
     navigate(location.pathname === '/menu' ? '/trade' : '/menu');
   };
 
   return (
-    <nav className="hidden landscape:flex flex-col h-[100dvh] sticky top-0 w-16 border-r bg-white overflow-y-auto">
+    <nav className={`${isLandscape ? 'flex' : 'hidden'} 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">
         {isLoggedIn && (
           <>

src/components/TradeButton/TradeButton.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { useDeviceDetection } from "@/hooks/useDeviceDetection";
+import { useOrientationStore } from "@/stores/orientationStore";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
@@ -17,34 +19,30 @@ export const TradeButton: React.FC<TradeButtonProps> = ({
   title_position = "left",
   className,
 }) => {
+  const { isLandscape } = useOrientationStore();
   return (
     <Button
       className={cn(
-        "flex-1 flex flex-col gap-1 py-6 h-16 text-white rounded-full",
+        "flex-1 flex flex-col gap-1 text-white rounded-full",
+        isLandscape ? "py-4 h-12" : "py-6 h-16",
         className
       )}
       variant="default"
     >
-      <div className="flex flex-col portrait:gap-1 landscape:gap-0 w-full px-3">
-        <div
-          className={cn(
-            "flex items-center justify-between w-full",
-            "portrait:flex-row",
-            title_position === "right" ? "portrait:flex-row-reverse" : ""
-          )}
-        >
-          <span className="text-lg font-bold">{title}</span>
-        </div>
-        <div
-          className={cn(
-            "flex items-center justify-between w-full",
-            title_position === "right" && "flex-row-reverse",
-            "landscape:flex-row-reverse"
-          )}
-        >
-          <span className="text-sm">{value}</span>
-          <span className="text-sm opacity-80">{label}</span>
-        </div>
+      <div className={cn(
+        "flex items-center w-full px-3",
+        !isLandscape ? (title_position === "right" && "justify-end") : "justify-start"
+      )}>
+        <span className={cn("font-bold", isLandscape ? "text-base" : "text-lg")}>{title}</span>
+      </div>
+      <div className={cn(
+        "flex items-center w-full px-3",
+        !isLandscape ? (
+          title_position === "right" ? "flex-row-reverse" : "justify-between"
+        ) : "justify-between"
+      )}>
+        <span className={cn("opacity-80", isLandscape ? "text-xs" : "text-sm")}>{label}</span>
+        <span className={isLandscape ? "text-xs" : "text-sm"}>{value}</span>
       </div>
     </Button>
   );

src/hooks/useDeviceDetection.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+interface DeviceInfo {
+  isMobile: boolean;
+  isDesktop: boolean;
+}
+
+export const useDeviceDetection = (): DeviceInfo => {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
+    isMobile: false,
+    isDesktop: true,
+  });
+
+  useEffect(() => {
+    const checkDevice = () => {
+      const width = window.innerWidth;
+
+      setDeviceInfo({
+        isMobile: width <= 600,
+        isDesktop: width > 1280,
+      });
+    };
+
+    checkDevice();
+    window.addEventListener("resize", checkDevice);
+
+    return () => window.removeEventListener("resize", checkDevice);
+  }, []);
+
+  return deviceInfo;
+};

src/layouts/MainLayout/Footer.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import { BottomNav } from "@/components/BottomNav";
+import { useOrientationStore } from "@/stores/orientationStore";
 
 interface FooterProps {
   className?: string;
 }
 
 export const Footer: React.FC<FooterProps> = ({ className = '' }) => {
+  const { isLandscape } = useOrientationStore();
+
   return (
-    <footer className={`border-t landscape:hidden ${className}`}>
+    <footer className={`border-t ${!isLandscape ? 'block' : 'hidden'} ${className}`}>
       <BottomNav />
     </footer>
   );

src/layouts/MainLayout/Header.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Menu } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { BalanceDisplay } from '@/components/BalanceDisplay';
+import { useOrientationStore } from '@/stores/orientationStore';
 
 interface HeaderProps {
   className?: string;
@@ -10,13 +11,14 @@ interface HeaderProps {
 export const Header: React.FC<HeaderProps> = ({ className = '' }) => {
   const navigate = useNavigate();
   const location = useLocation();
+  const { isLandscape } = useOrientationStore();
 
   const handleMenuClick = () => {
     navigate(location.pathname === '/menu' ? '/trade' : '/menu');
   };
 
   return (
-    <header className={`flex items-center gap-4 px-4 py-2 landscape:hidden border-b border-opacity-10 bg-white ${className}`} id="header">
+    <header className={`${!isLandscape ? 'flex' : 'hidden'} flex items-center gap-4 px-4 py-2 border-b border-opacity-10 bg-white ${className}`} id="header">
       <button 
         onClick={handleMenuClick}
         className={`flex flex-col items-center ${

src/layouts/MainLayout/MainLayout.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { useDeviceDetection } from "@/hooks/useDeviceDetection";
+import { useOrientationStore } from "@/stores/orientationStore";
 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { SideNav } from "@/components/SideNav";
@@ -9,17 +11,37 @@ interface MainLayoutProps {
 }
 
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
+  const { isMobile } = useDeviceDetection();
+  const { isLandscape, setIsLandscape } = useOrientationStore();
   const { isLoggedIn } = useClientStore();
 
+  useEffect(() => {
+    const handleOrientationChange = () => {
+      const isLandscapeMode = window.matchMedia 
+      ? window.matchMedia("(orientation: landscape)").matches 
+      : window.innerWidth > window.innerHeight;
+      setIsLandscape(isLandscapeMode);
+    };
+
+    handleOrientationChange();
+    window.addEventListener("orientationchange", handleOrientationChange);
+    window.addEventListener("resize", handleOrientationChange);
+
+    return () => {
+      window.removeEventListener("orientationchange", handleOrientationChange);
+      window.removeEventListener("resize", handleOrientationChange);
+    };
+  }, [isMobile, isLandscape]);
+
   return (
     <div className="flex min-h-[100dvh] h-[100dvh]">
       <SideNav />
       <div className="flex flex-col flex-1 relative overflow-hidden">
         <Header className="sticky top-0 z-50" />
-        <main className="flex-1 flex flex-col overflow-y-auto overflow-x-hidden">
+        <main className={`flex-1 ${isLandscape ? 'flex flex-row' : 'flex flex-col'}`}>
           {children}
         </main>
-        {isLoggedIn && <Footer className="sticky bottom-0 z-50" />}
+        {isLoggedIn && !isLandscape && <Footer className="sticky bottom-0 z-50" />}
       </div>
     </div>
   );