65 lines
2.2 KiB
TypeScript
65 lines
2.2 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';
|
|
|
|
export default function Layout({ children }: { children: ReactNode }) {
|
|
const router = useRouter()
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
|
|
|
|
// auto resize for tablets: disabled.
|
|
// useEffect(() => {
|
|
// // Function to check and set the state based on window width
|
|
// const handleResize = () => {
|
|
// if (window.innerWidth < 768) { // Assuming 768px as the breakpoint for mobile devices
|
|
// setIsSidebarOpen(false);
|
|
// } else {
|
|
// setIsSidebarOpen(true);
|
|
// }
|
|
// };
|
|
// // Set initial state
|
|
// handleResize();
|
|
// // Add event listener
|
|
// window.addEventListener('resize', handleResize);
|
|
// // Cleanup
|
|
// return () => window.removeEventListener('resize', handleResize);
|
|
// }, []);
|
|
|
|
const toggleSidebar = () => {
|
|
setIsSidebarOpen(!isSidebarOpen);
|
|
};
|
|
|
|
return (
|
|
|
|
// <div className="h-screen w-screen" >
|
|
// <div className="flex flex-col">
|
|
// <div className="flex flex-row h-screen">
|
|
// <ToastContainer />
|
|
// <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
|
|
// <main className={`pr-10 transition-all duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>
|
|
|
|
|
|
<div className="">
|
|
<div className="flex flex-col">
|
|
<div className="flex flex-row h-[90vh] w-screen ">
|
|
<ToastContainer position="top-center" style={{ zIndex: 9999 }} />
|
|
<Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
|
|
<main className={`pr-10 transition-all h-[90vh] duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
{/* <div className="justify-end items-center text-center ">
|
|
<Footer />
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|