initial commit - code moved to separate repo

components/layout.tsx

@@ -0,0 +1,64 @@
+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>
+  );
+}