UI style fixes

components/layout.tsx

@@ -9,56 +9,63 @@ 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 }: { children: ReactNode }) {
-  const router = useRouter()
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+export default function Layout({ children }) {
+  const router = useRouter();
 
-  // 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);
-  // }, []);
+  // 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="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  ">
+        <div className="flex flex-row min-h-screen w-screen">
           <ToastContainer position="top-center" style={{ zIndex: 9999 }} />
           <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
-          <main className={`w-full pr-10 transition-all h-[90vh] duration-300 ${isSidebarOpen ? 'ml-60 ' : 'ml-6'}`}>
-            {children}
+          <main className={`flex-1 transition-all duration-300 ${marginLeftClass}`}>
+            <div className="p-4 mx-auto pr-8 pl-0">
+              {children}
+            </div>
           </main>
         </div>
-        {/* <div className="justify-end items-center text-center ">
-          <Footer /> 
-        </div> */}
       </div>
     </div>
   );
-}
+}

components/sidebar.tsx

@@ -129,7 +129,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
         className="fixed top-1 left-4 z-40 m- text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none"
         style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 64}px)` : 'translateX(-20px)' }}>☰</button>
       <aside id="sidenav" ref={sidebarRef}
-        className="px-2 fixed top-0 left-0 z-30 h-screen overflow-y-auto bg-white border-r dark:bg-gray-900 dark:border-gray-700 transition-all duration-300 w-64"
+        className="px-2 fixed top-0 left-0 z-30 h-screen overflow-y-auto bg-white border-r dark:bg-gray-900 dark:border-gray-700 transition-all duration-300 sm:translate-x-0 w-64"
         style={{ width: `${sidebarWidth}px`, transform: isSidebarOpen ? 'translateX(0)' : `translateX(-${sidebarWidth - 16}px)` }}>
         <h2 className="text-2xl font-semibold text-gray-800 dark:text-white pt-2 pl-4 pb-4"
           title={`v.${packageVersion} ${process.env.GIT_COMMIT_ID}`} >Специално Свидетелстване София</h2>