oddbit · DennisAlund · Aug 23, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024
diff --git a/hosting/src/assets/scss/layout-default.scss b/hosting/src/assets/scss/layout-default.scss
@@ -1,3 +1,10 @@
 .l-default {
-  //
+  & .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    content: "";
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 10;
+  }
 }
diff --git a/hosting/src/components/Header.tsx b/hosting/src/components/Header.tsx
@@ -21,7 +21,7 @@ interface HeaderProps {
  */
 export default function Header({sidebarOpen, setSidebarOpen}: HeaderProps) {
   return (
-    <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none lg:hidden">
+    <header className="sticky top-0 z-9 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none lg:hidden">
       <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
         {/* Start Toggle Publish Document */}
         <TogglePublishDocument />

diff --git a/hosting/src/components/Layouts/CmsLayout.tsx b/hosting/src/components/Layouts/CmsLayout.tsx
@@ -1,6 +1,7 @@
 "use client";
 import "@/assets/css/satoshi.css";
 import "@/assets/css/style.css";
+import "@/assets/scss/layout-default.scss";
 import Header from "@/components/Header";
 import Sidebar from "@/components/Sidebar";
 import {useAuthentication} from "@/hooks/useAuthentication";
@@ -35,6 +36,11 @@ export default function CmsLayout({children}: {children: React.ReactNode}) {
             </main>
             {/* <!-- ===== Main Content End ===== --> */}
           </div>
+
+          <div
+            className={`overlay ${sidebarOpen ? "block" : "hidden"}`}
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+          ></div>
           {/* <!-- ===== Content Area End ===== --> */}
         </div>
         {/* <!-- ===== Page Wrapper End ===== --> */}

diff --git a/hosting/src/components/Sidebar/Sidebar.tsx b/hosting/src/components/Sidebar/Sidebar.tsx
@@ -1,14 +1,13 @@
 "use client";
-
+import {SidebarExpandableMenu, SidebarExpandableMenuSubItem} from "@/components/Sidebar/SidebarExpandableMenu";
+import {SidebarMenuGroup} from "@/components/Sidebar/SidebarMenuGroup";
+import {SidebarMenuItem} from "@/components/Sidebar/SidebarMenuItem";
 import {useAuthentication} from "@/hooks/useAuthentication";
 import {useTanamDocumentTypes} from "@/hooks/useTanamDocumentTypes";
 import Image from "next/image";
 import Link from "next/link";
 import {usePathname} from "next/navigation";
-import {useEffect, useRef, useState} from "react";
-import {SidebarExpandableMenu, SidebarExpandableMenuSubItem} from "./SidebarExpandableMenu";
-import {SidebarMenuGroup} from "./SidebarMenuGroup";
-import {SidebarMenuItem} from "./SidebarMenuItem";
+import {useEffect, useState} from "react";
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -17,26 +16,12 @@ interface SidebarProps {
 
 const Sidebar = ({sidebarOpen, setSidebarOpen}: SidebarProps) => {
   const pathname = usePathname() ?? "/";
-  const trigger = useRef<any>(null);
-  const sidebar = useRef<any>(null);
   const {data: documentTypes} = useTanamDocumentTypes();
   const {authUser, signout} = useAuthentication();
 
-  const storedSidebarExpanded = "true";
-
-  const [sidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === "true");
-
-  // close on click outside
-  useEffect(() => {
-    const clickHandler = ({target}: MouseEvent) => {
-      if (!sidebar.current || !trigger.current) return;
-      if (!sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target)) {
-        return;
-      }
-      setSidebarOpen(false);
-    };
-    document.addEventListener("click", clickHandler);
-    return () => document.removeEventListener("click", clickHandler);
+  const [windowSize, setWindowSize] = useState({
+    width: 0,
+    height: 0,
   });
 
   // close if the esc key is pressed
@@ -49,19 +34,33 @@ const Sidebar = ({sidebarOpen, setSidebarOpen}: SidebarProps) => {
     return () => document.removeEventListener("keydown", keyHandler);
   });
 
+  // close sidebar when page is changed or window resize
   useEffect(() => {
-    localStorage.setItem("sidebar-expanded", sidebarExpanded.toString());
-    if (sidebarExpanded) {
-      document.querySelector("body")?.classList.add("sidebar-expanded");
-    } else {
-      document.querySelector("body")?.classList.remove("sidebar-expanded");
-    }
-  }, [sidebarExpanded]);
+    setSidebarOpen(false);
+  }, [pathname, windowSize]);
+
+  useEffect(() => {
+    // Handler to call on window resize
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Clean up the event listener on component unmount
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount and unmount
 
   return (
     <aside
-      ref={sidebar}
-      className={`absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${
+      className={`absolute left-0 top-0 z-99 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${
         sidebarOpen ? "translate-x-0" : "-translate-x-full"
       }`}
     >