listing-facebook/client/app/layouts/private-layout.tsx

85 lines
2.5 KiB
TypeScript

import { useEffect } from "react";
import { Outlet } from "react-router";
import { AppSidebar } from "~/components/app-sidebar";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "~/components/ui/breadcrumb";
import { Separator } from "~/components/ui/separator";
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
useSidebar,
} from "~/components/ui/sidebar";
export default function PrivateLayout() {
// const location = useLocation();
// const navigate = useNavigate();
// const dispatch = useAppDispatch();
// const { data, isLoading, isError, isSuccess } = useMe();
// useEffect(() => {
// if (isError) {
// navigate(Links.LOGIN, {
// replace: true,
// state: { from: location.pathname },
// });
// }
// }, [isError]);
// useEffect(() => {
// if (isSuccess && data) {
// dispatch(setUser(data?.data));
// }
// }, [isSuccess, data]);
// if ((isLoading || !data?.data) && Object.keys(location?.state || {}).length)
// return (
// <div className="h-screen w-screen flex items-center justify-center ">
// <Loader showLabel={true} size="size-10" />
// </div>
// );
return (
<SidebarProvider open={false}>
<AppSidebar />
<SidebarInset className="h-screen overflow-x-hidden">
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 sticky top-0 bg-white z-50">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator
orientation="vertical"
className="mr-2 data-[orientation=vertical]:h-4"
/>
{/* <Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem className="hidden md:block">
<BreadcrumbLink href="#">
Building Your Application
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb> */}
</div>
</header>
<div className="max-w-full p-4 pt-0">
<Outlet />
</div>
</SidebarInset>
</SidebarProvider>
);
}