chore: app dir headers re-implementation (#4751)

* chore: header refactor.

* fix: core imports

* chore: refactor profile activity header and fix all other header imports.

* fix: import fixes

* chore: header refactor.

* fix: app dir header reimplementation

* fix: removing parllel headers

* fix: adding route groups to handle pages

* fix: disabling sentry for temp

* chore: update default exports in layouts & headers for consistency.

* fix: bugfixes

* fix: build errors

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

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

@@ -0,0 +1,50 @@
+import { FC, useRef } from "react";
+import { observer } from "mobx-react";
+// components
+import { ProjectSidebarList } from "@/components/project";
+import {
+  WorkspaceHelpSection,
+  WorkspaceSidebarDropdown,
+  WorkspaceSidebarMenu,
+  WorkspaceSidebarQuickAction,
+} from "@/components/workspace";
+// hooks
+import { useAppTheme } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+
+export interface IAppSidebar { }
+
+export const AppSidebar: FC<IAppSidebar> = observer(() => {
+  // store hooks
+  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
+  // refs
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (sidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        toggleSidebar();
+      }
+    }
+  });
+
+  return (
+    <div
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100
+        duration-300 md:relative
+        ${sidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${sidebarCollapsed ? "-ml-[280px]" : ""}
+        md:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+        lg:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+      `}
+    >
+      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
+        <WorkspaceSidebarDropdown />
+        <WorkspaceSidebarQuickAction />
+        <WorkspaceSidebarMenu />
+        <ProjectSidebarList />
+        <WorkspaceHelpSection />
+      </div>
+    </div>
+  );
+});