fix: app header layer (#6640)

Author: aaryan610

web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

@@ -110,8 +110,8 @@ export const ExtendedProjectSidebar = observer(() => {
         className={cn(
           "fixed top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
           {
-            "translate-x-0 opacity-100": extendedProjectSidebarCollapsed,
-            "-translate-x-full opacity-0": !extendedProjectSidebarCollapsed,
+            "translate-x-0 opacity-100 pointer-events-auto": extendedProjectSidebarCollapsed,
+            "-translate-x-full opacity-0 pointer-events-none": !extendedProjectSidebarCollapsed,
             "left-[70px]": sidebarCollapsed,
             "left-[250px]": !sidebarCollapsed,
           }

web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx

@@ -106,8 +106,8 @@ export const ExtendedAppSidebar = observer(() => {
       className={cn(
         "fixed top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
         {
-          "translate-x-0 opacity-100": extendedSidebarCollapsed,
-          "-translate-x-full opacity-0": !extendedSidebarCollapsed,
+          "translate-x-0 opacity-100 pointer-events-auto": extendedSidebarCollapsed,
+          "-translate-x-full opacity-0 pointer-events-none": !extendedSidebarCollapsed,
           "left-[70px]": sidebarCollapsed,
           "left-[250px]": !sidebarCollapsed,
         }

web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx

@@ -1,20 +1,20 @@
 "use client";
 
-import { FC } from "react";
 import { observer } from "mobx-react";
 import { Menu } from "lucide-react";
 import { useAppTheme } from "@/hooks/store";
 
-export const SidebarHamburgerToggle: FC = observer(() => {
+export const SidebarHamburgerToggle = observer(() => {
   // store hooks
   const { toggleSidebar } = useAppTheme();
 
   return (
-    <div
-      className="group flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded bg-custom-background-80 transition-all hover:bg-custom-background-90 md:hidden"
+    <button
+      type="button"
+      className="group flex-shrink-0 size-7 grid place-items-center rounded bg-custom-background-80 transition-all hover:bg-custom-background-90 md:hidden"
       onClick={() => toggleSidebar()}
     >
-      <Menu size={14} className="text-custom-text-200 transition-all group-hover:text-custom-text-100" />
-    </div>
+      <Menu className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
+    </button>
   );
 });