refactor(layouts): extract MainLayout component and improve sidebar mobile UX

- Extract MainLayout component from ConditionalLayout to reduce nesting and improve code organization
- Add useIsMobile hook to MainLayout for responsive behavior and prevent layout reflow on mobile
- Implement collapsed sidebar state for mobile devices showing only icons (70px width)
- Add MenuExpandIcon component to sidebar icons for collapsed state UI
- Update sidebar to display favicon instead of full logo when collapsed on mobile
- Remove menu toggle button and logo from header, consolidate in sidebar for better UX
- Improve sidebar styling with conditional padding and alignment for collapsed state
- Update sidebar navigation items to hide text labels when collapsed, showing only icons
- Refactor header component to remove mobile-specific logic now handled in MainLayout
- Enhance mobile navigation by maintaining sidebar space reservation to avoid layout reflow

src/components/Layouts/conditional-layout.tsx

@@ -6,6 +6,26 @@ import type { PropsWithChildren } from "react";
 import { Header } from "./header";
 import Notification from "./notification";
 import { Sidebar } from "./sidebar";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+function MainLayout({ children }: PropsWithChildren) {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      {/* Spacer to reserve space for collapsed sidebar on mobile - avoids reflow */}
+      {isMobile && <div className="w-[70px] shrink-0" />}
+      <div className="w-full bg-gray-2 dark:bg-[#020d1a]">
+        <Header />
+        <main className="isolate mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
+
 export function ConditionalLayout({ children }: PropsWithChildren) {
   const pathname = usePathname();
   const isAuthPage = pathname.startsWith("/auth");
@@ -19,15 +39,7 @@ export function ConditionalLayout({ children }: PropsWithChildren) {
       ) : (
         <AuthGuard>
           <Notification>
-            <div className="flex min-h-screen">
-              <Sidebar />
-              <div className="w-full bg-gray-2 dark:bg-[#020d1a]">
-                <Header />
-                <main className="isolate mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
-                  {children}
-                </main>
-              </div>
-            </div>
+            <MainLayout>{children}</MainLayout>
           </Notification>
         </AuthGuard>
       )}