74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import Header from "./header"
|
|
import Link from 'next/link'
|
|
import Footer from "./footer"
|
|
import Sidebar from "./sidebar"
|
|
import type { ReactNode } from "react"
|
|
import { useRouter } from 'next/router'
|
|
import { useEffect, useState } from "react";
|
|
import Body from 'next/document'
|
|
|
|
import { ToastContainer } from 'react-toastify';
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
import { set } from "date-fns"
|
|
|
|
export default function Layout({ children }) {
|
|
const router = useRouter();
|
|
|
|
// Assuming that during SSR, we don't want the sidebar to be open.
|
|
const [isSmallScreen, setIsSmallScreen] = useState(true);
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// This function determines if we're on a small screen
|
|
const checkIfSmallScreen = () => window.innerWidth < 768;
|
|
|
|
// Set the initial screen size and sidebar state
|
|
const initialSmallScreenCheck = checkIfSmallScreen();
|
|
setIsSmallScreen(initialSmallScreenCheck);
|
|
setIsSidebarOpen(!initialSmallScreenCheck);
|
|
|
|
const handleResize = () => {
|
|
const smallScreenCheck = checkIfSmallScreen();
|
|
setIsSmallScreen(smallScreenCheck);
|
|
|
|
// On small screens, we want to ensure the sidebar is not open by default when resizing
|
|
if (smallScreenCheck) {
|
|
setIsSidebarOpen(false);
|
|
}
|
|
};
|
|
|
|
// Add event listener
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
// Cleanup event listener on component unmount
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
// Toggle the sidebar only when the button is clicked
|
|
const toggleSidebar = () => {
|
|
setIsSidebarOpen(!isSidebarOpen);
|
|
};
|
|
|
|
// We use `isSmallScreen` to determine the margin-left on small screens
|
|
// and use `isSidebarOpen` to determine if we need to push the content on large screens.
|
|
const marginLeftClass = isSmallScreen ? 'ml-0' : isSidebarOpen ? 'ml-60' : 'ml-6';
|
|
|
|
return (
|
|
<div className="">
|
|
<div className="flex flex-col ">
|
|
<div className="flex flex-row min-h-screen w-screen pr-8">
|
|
<ToastContainer position="top-center" style={{ zIndex: 9999 }} />
|
|
<Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
|
|
<main className={`flex-1 transition-all duration-300 ${marginLeftClass}`}>
|
|
<div className="">
|
|
{children}
|
|
</div>
|
|
<div id="modal-root"></div> {/* Modal container */}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|