All files / apps/web/src/components EntityPage.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
 
5x
5x
 
5x
5x
 
 
5x
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState, useEffect, cloneElement } from 'react'
 
export default function EntityPage({ sidebar, children, selectedId }) {
  const hasSelection = !!selectedId
  const [collapsed, setCollapsed] = useState(hasSelection)
 
  useEffect(() => {
    setCollapsed(!!selectedId)
  }, [selectedId])
 
  const sidebarWidth = collapsed ? 'w-12' : 'w-[32rem]'
 
  return (
    <>
      {/* Sidebar de sélection d'items - collée à la sidebar principale (desktop) */}
      <aside className={`hidden lg:flex fixed inset-y-0 left-72 ${sidebarWidth} z-40 transition-all duration-300`}>
        {cloneElement(sidebar, {
          collapsed,
          onCollapsedChange: () => setCollapsed(!collapsed),
        })}
      </aside>
 
      <div className={`${collapsed ? 'lg:pl-12' : 'lg:pl-[32rem]'} transition-all duration-300`}>
        <div className="p-2 sm:p-6 h-[calc(100vh-4rem)] lg:h-screen flex flex-col">
          {/* Carte principale - toute la place à droite de la sidebar */}
          <div className="flex-1 min-h-0 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex">
            {/* Sidebar inline (mobile / tablette) - se replie à la sélection d'un item */}
            <div className={`lg:hidden ${collapsed ? 'w-12' : 'w-64'} flex-shrink-0 transition-all duration-300`}>
              {cloneElement(sidebar, {
                collapsed,
                onCollapsedChange: () => setCollapsed(!collapsed),
              })}
            </div>
            <div className="flex-1 min-h-0 flex flex-col">{children}</div>
          </div>
        </div>
      </div>
    </>
  )
}