edr-platform/apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx

import { Link, Outlet, useLocation } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import { AppMenuTabs } from "./AppMenuTabs";
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarInset,
  SidebarRail,
  useSidebar,
} from "@/shared/common/ui/sidebar";
import Top from "@/record-management/components/common/Top";
import { useAuth } from "@/shared/context/AuthContext";

export const AppLayout = () => {
  const { pathname } = useLocation();
  const isAuthPage = pathname === "/";
  const { toggleSidebar } = useSidebar();
  const { user } = useAuth();

  const userRoles = user?.roles?.map((role) => role.key) || [];
  const isSuperAdmin = userRoles.includes("super_admin");

  // Standalone full-page scroll container for the auth screen — the host
  // chrome is `overflow: hidden`, so this subtree must scroll itself.
  if (isAuthPage) {
    return (
      <div className="h-dvh w-full overflow-y-auto bg-gray-50">
        <Outlet />
      </div>
    );
  }

  return (
    <>
      {/* Full-height sidebar owning the left column (back-to-home + brand at the
          top). <Top> lives inside <SidebarInset>, to the right of the sidebar,
          and is `sticky` — so it never overlaps the sidebar and re-flows when
          the sidebar collapses to its icon rail. Top's burger (onToggleSidebar)
          drives collapse on desktop and the Sheet drawer on mobile. */}
      <Sidebar collapsible="icon">
        <SidebarHeader className="gap-1 border-b border-sidebar-border">
          <Link
            to="/dashboard/overview"
            className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
          >
            <ArrowLeft className="size-4 shrink-0" />
            <span className="group-data-[collapsible=icon]:hidden">
              Back to home
            </span>
          </Link>
          <Link
            to="/user-management"
            className="flex items-center gap-2 px-1 py-2.5"
          >
            <img
              src="/assets/logo.svg"
              alt="EDR"
              className="size-7 shrink-0 object-contain"
            />
            <div className="flex flex-col group-data-[collapsible=icon]:hidden">
              <span className="text-sm font-semibold leading-tight text-sidebar-foreground">
                User Management
              </span>
              <span className="text-[10px] font-medium text-muted-foreground">
                EDR Freight
              </span>
            </div>
          </Link>
        </SidebarHeader>
        <SidebarContent className="pb-10">
          <AppMenuTabs />
        </SidebarContent>
        <SidebarRail />
      </Sidebar>

      {/* Internal scroll container: the sidebar stays fixed and full-height
          while this column scrolls beneath the sticky <Top> bar. */}
      <SidebarInset className="h-svh min-w-0 overflow-y-auto">
        <Top
          onToggleSidebar={toggleSidebar}
          showRecordManagementShortcut={!isSuperAdmin}
        />
        <div className="flex-1 pb-2 sm:px-4 sm:pb-4 ">
          <div className="w-full overflow-x-auto">
            <Outlet />
          </div>
        </div>
      </SidebarInset>
    </>
  );
};