snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/sidebar/sidebar-wrapper.tsx

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+import { PreferencesOutline } from "@makeplane/propel/icons";
+import { ScrollArea } from "@plane/propel/scrollarea";
+// components
+import { CustomizeNavigationDialog } from "@/components/navigation/customize-navigation-dialog";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import useSize from "@/hooks/use-window-size";
+// plane web components
+import { WorkspaceEditionBadge } from "@/components/workspace/edition-badge";
+import { AppSidebarToggleButton } from "./sidebar-toggle-button";
+import { IconButton } from "@plane/propel/icon-button";
+
+type TSidebarWrapperProps = {
+  title: string;
+  children: React.ReactNode;
+  quickActions?: React.ReactNode;
+};
+
+export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWrapperProps) {
+  const { title, children, quickActions } = props;
+  // state
+  const [isCustomizeNavDialogOpen, setIsCustomizeNavDialogOpen] = useState(false);
+  // store hooks
+  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
+  const windowSize = useSize();
+  // refs
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (sidebarCollapsed === false && window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  });
+
+  useEffect(() => {
+    if (windowSize[0] < 768 && !sidebarCollapsed) toggleSidebar();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowSize]);
+
+  return (
+    <>
+      <CustomizeNavigationDialog isOpen={isCustomizeNavDialogOpen} onClose={() => setIsCustomizeNavDialogOpen(false)} />
+      <div ref={ref} className="flex h-full w-full animate-fade-in flex-col">
+        <div className="flex flex-col gap-3 px-3">
+          {/* Workspace switcher and settings */}
+
+          <div className="flex items-center justify-between gap-2 px-2">
+            <span className="pt-1 text-16 font-medium text-primary">{title}</span>
+            <div className="flex items-center gap-2">
+              {title === "Projects" && (
+                <IconButton
+                  size="base"
+                  variant="ghost"
+                  icon={PreferencesOutline}
+                  onClick={() => setIsCustomizeNavDialogOpen(true)}
+                />
+              )}
+              <AppSidebarToggleButton />
+            </div>
+          </div>
+          {/* Quick actions */}
+          {quickActions}
+        </div>
+
+        <ScrollArea
+          orientation="vertical"
+          scrollType="hover"
+          size="sm"
+          rootClassName="size-full overflow-x-hidden overflow-y-auto"
+          viewportClassName="flex flex-col gap-3 overflow-x-hidden h-full w-full overflow-y-auto px-3 pt-3 pb-0.5"
+        >
+          {children}
+        </ScrollArea>
+        {/* Help Section */}
+        <div className="flex h-12 items-center justify-between border-t border-subtle bg-surface-1 p-3">
+          <WorkspaceEditionBadge />
+          {/* TODO: To be checked if we need this */}
+          {/* <div className="flex items-center gap-2">
+          {!shouldRenderAppRail && <HelpMenu />}
+          {!isAppRailEnabled && <AppSidebarToggleButton />}
+        </div> */}
+        </div>
+      </div>
+    </>
+  );
+});