fix ui

apps/edr-freight-web/backoffice/src/performance-management/routes/PerformanceAppLayouts.tsx

@@ -0,0 +1,111 @@
+import { Outlet, useLocation } from "react-router-dom";
+import { DynamicBreadcrumb } from "@/shared/components/ui/DynamicBreadcrumb";
+import { TopBar } from "@/layout/TopBar";
+import { useState } from "react";
+import { PerformanceMenuTabls } from "../layout/performanceMenuLayout";
+import { Button } from "@/shared/common/ui/button";
+import { ChevronLeft, ChevronRight, Menu } from "lucide-react";
+import { Sheet, SheetContent, SheetTrigger } from "@/shared/common/ui/sheet";
+import { PositionSelect } from "@/record-management/components/positionSelection";
+
+export const PerformanceAppLayout = () => {
+  const { pathname } = useLocation();
+  const isAuthPage = pathname === "/";
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  const toggleSidebar = () => setSidebarOpen((prev) => !prev);
+
+  if (isAuthPage) {
+    return (
+      <div className="min-h-screen w-full bg-gray-50">
+        <Outlet />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-background text-foreground">
+      {/* TOP BAR */}
+      <TopBar />
+
+      {/* CONTENT AREA */}
+      <div className="flex flex-1 pt-16">
+        {/* SIDEBAR */}
+        <div
+          className={`hidden md:flex flex-col h-[calc(100vh-4rem)] fixed left-0 top-16 transition-all duration-300 bg-white dark:bg-gray-900 border-r dark:border-gray-800 z-20 ${
+            sidebarOpen ? "w-64" : "w-16"
+          }`}>
+          {/* Sidebar content */}
+          <PerformanceMenuTabls
+            collapsed={!sidebarOpen}
+            toggleSidebar={toggleSidebar}
+          />
+
+          {/* Sidebar toggle button */}
+          <div className="p-3 border-t dark:border-gray-800 mt-auto">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleSidebar}
+              className="w-full flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              {sidebarOpen ? (
+                <>
+                  <ChevronLeft className="h-4 w-4" />
+                  {!sidebarOpen && (
+                    <span className="sr-only">Expand sidebar</span>
+                  )}
+                </>
+              ) : (
+                <>
+                  <ChevronRight className="h-4 w-4" />
+                  {sidebarOpen && (
+                    <span className="sr-only">Collapse sidebar</span>
+                  )}
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* MOBILE SIDEBAR TRIGGER */}
+        <div className="md:hidden fixed bottom-6 right-6 z-40">
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                size="icon"
+                className="h-12 w-12 rounded-full shadow-lg bg-[#A043F0] hover:bg-[#8a36d0]">
+                <Menu className="h-6 w-6 text-white" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-64 p-0">
+              <div className="flex flex-col h-full">
+                <div className="p-4 border-b">
+                  <h2 className="text-lg font-semibold">Menu</h2>
+                </div>
+                <div className="flex-1 p-2">
+                  <PerformanceMenuTabls />
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+
+        {/* MAIN CONTENT */}
+        <div
+          className={`flex-1 transition-all duration-300 min-h-[calc(100vh-4rem)] w-full ${
+            sidebarOpen ? "md:ml-64" : "md:ml-16"
+          }`}>
+          <div className="p-4 md:p-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
+              <DynamicBreadcrumb />
+              <PositionSelect />
+            </div>
+            <div className="w-full">
+              <Outlet />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};