sidebar

frontend/src/sidebar/Sidebar.jsx

@@ -21,6 +21,7 @@ import PanelHeader from '../ui/PanelHeader';
 import useFloatingMenu from '../ui/useFloatingMenu';
 
 import { getTagColorStyle } from '../utils/colors';
+import { useSidebarContext } from './SidebarContext';
 
 const FolderNode = ({
   node,
@@ -177,13 +178,16 @@ const Sidebar = ({
   isFilterActive,
   onLogout,
   status,
-  onCollapse,
   tenantName,
   tenants = [],
   activeTenantId = null,
   onSelectTenant,
   onOpenSettings,
 }) => {
+  const { setCollapsed } = useSidebarContext();
+  const handleCollapse = useCallback(() => {
+    setCollapsed(true);
+  }, [setCollapsed]);
   const neutralHueInputId = useId();
   const sortedCorrespondents = useMemo(() => {
     if (!Array.isArray(correspondents)) {
@@ -504,14 +508,14 @@ const Sidebar = ({
           </>
         )}
         actions={
-          onCollapse
+            handleCollapse
             ? [
                 (
                   <button
                     key="collapse"
                     type="button"
                     className="icon-button"
-                    onClick={onCollapse}
+                    onClick={handleCollapse}
                     aria-label="Collapse sidebar"
                     title="Collapse sidebar"
                   >

frontend/src/sidebar/SidebarContext.js

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useMemo, useState, useCallback } from 'react';
+
+const SidebarContext = createContext(null);
+
+export const SidebarProvider = ({ initialCollapsed = false, children }) => {
+  const [collapsed, setCollapsed] = useState(initialCollapsed);
+
+  const contextValue = useMemo(() => ({ collapsed, setCollapsed }), [collapsed]);
+
+  return <SidebarContext.Provider value={contextValue}>{children}</SidebarContext.Provider>;
+};
+
+export const useSidebarContext = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebarContext must be used within a SidebarProvider');
+  }
+  return context;
+};
+
+export const useSidebarControls = () => {
+  const { setCollapsed } = useSidebarContext();
+  const openSidebar = useCallback(() => setCollapsed(false), [setCollapsed]);
+  const closeSidebar = useCallback(() => setCollapsed(true), [setCollapsed]);
+  return { openSidebar, closeSidebar };
+};
+
+export default SidebarContext;