28 lines
964 B
TypeScript
28 lines
964 B
TypeScript
import { Suspense } from "react";
|
|
import { Outlet } from "react-router-dom";
|
|
import Navigation from "@/components/Navigation";
|
|
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
|
import Loading from "@/pages/Loading";
|
|
|
|
function Root() {
|
|
const { sm } = useResponsiveWidth();
|
|
|
|
return (
|
|
<div className="w-full min-h-full">
|
|
<div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
|
|
{sm && (
|
|
<div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl z-2">
|
|
<Navigation />
|
|
</div>
|
|
)}
|
|
<main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">
|
|
<Suspense fallback={<Loading />}>
|
|
<Outlet />
|
|
</Suspense>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Root;
|