2025-04-29 13:54:37 +00:00
|
|
|
'use client'
|
|
|
|
|
|
2025-04-29 17:51:05 +00:00
|
|
|
import { useState, useEffect } from 'react';
|
2025-04-28 00:47:36 +00:00
|
|
|
import SideNav from "@/components/custom/Side_Nav";
|
|
|
|
|
import Navbar from "@/components/custom/Nav_bar";
|
|
|
|
|
|
2025-04-29 17:51:05 +00:00
|
|
|
|
2025-04-28 00:47:36 +00:00
|
|
|
export default function CreatorLayout({
|
|
|
|
|
children,
|
|
|
|
|
}: Readonly<{
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
}>) {
|
2025-04-29 17:51:05 +00:00
|
|
|
const [isMobile, setIsMobile] = useState(false);
|
2025-04-29 13:54:37 +00:00
|
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
2025-04-29 17:51:05 +00:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Function to handle resize and set mobile state
|
|
|
|
|
const handleResize = () => {
|
|
|
|
|
setIsMobile(window.innerWidth < 768);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Set initial state
|
|
|
|
|
handleResize();
|
|
|
|
|
|
|
|
|
|
// Add event listener
|
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
|
|
|
|
|
|
// Cleanup
|
|
|
|
|
return () => window.removeEventListener("resize", handleResize);
|
|
|
|
|
}, []);
|
|
|
|
|
|
2025-04-28 00:47:36 +00:00
|
|
|
return (
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<div className="flex min-h-screen">
|
2025-04-29 17:51:05 +00:00
|
|
|
{/* SideNav - hidden on mobile, fixed on desktop */}
|
|
|
|
|
<div className={`${isMobile ? 'fixex' : 'fixed'} left-0 top-0 h-screen`}>
|
|
|
|
|
<SideNav drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
|
2025-04-28 00:47:36 +00:00
|
|
|
</div>
|
2025-04-29 17:51:05 +00:00
|
|
|
|
|
|
|
|
{/* Main content - full width on mobile, with margin on desktop */}
|
|
|
|
|
<div className={`flex flex-col w-full ${isMobile ? '' : 'ml-[280px] md:ml-[320px] lg:ml-[380px]'}`}>
|
|
|
|
|
<div className={`fixed top-0 right-0 z-10 ${isMobile ? 'left-0' : 'left-[280px] md:left-[320px] lg:left-[380px]'}`}>
|
|
|
|
|
<Navbar setDrawerOpen={setDrawerOpen} />
|
2025-04-28 00:47:36 +00:00
|
|
|
</div>
|
2025-04-29 17:51:05 +00:00
|
|
|
<main className="flex-1 p-3 md:p-6 bg-[#F3F3F3] mt-[75px]">{children}</main>
|
2025-04-28 00:47:36 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</html>
|
|
|
|
|
);
|
|
|
|
|
}
|
