All files / apps/web/src/backoffice/components BackofficeLayout.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Outlet, useLocation } from 'react-router-dom';
import { useState, useEffect, useRef } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import Navigation from '../../components/Navigation';
import AppHeader from '../../components/AppHeader';
 
import { backofficeNavigation } from '../../config/backofficeNavigation';
import { useOrganizationStore } from '../../store/organizationStore';
 
const DESKTOP_QUERY = '(min-width: 1024px)';
 
export default function BackofficeLayout() {
  // Sidebar ouverte par défaut sur desktop, fermée sur mobile (drawer).
  const [menuOpen, setMenuOpen] = useState(
    () => typeof window !== 'undefined' && window.matchMedia(DESKTOP_QUERY).matches,
  );
  const isDesktopRef = useRef(typeof window !== 'undefined' && window.matchMedia(DESKTOP_QUERY).matches);
  const location = useLocation();
  const { user } = useAuth();
  const { currentOrganization } = useOrganizationStore();
  const organizationId = currentOrganization?.id;
 
  useEffect(() => {
    const mql = window.matchMedia(DESKTOP_QUERY);
    const onChange = (e) => { isDesktopRef.current = e.matches; };
    mql.addEventListener('change', onChange);
    return () => mql.removeEventListener('change', onChange);
  }, []);
 
  // Ferme le drawer à la navigation — MOBILE uniquement (sur desktop la sidebar reste).
  useEffect(() => {
    if (!isDesktopRef.current) setMenuOpen(false);
  }, [location.pathname]);
 
  const closeOnMobile = () => { if (!isDesktopRef.current) setMenuOpen(false); };
 
  return (
    <div className="min-h-screen bg-gray-100">
      {/* Backdrop — mobile uniquement */}
      {menuOpen && (
        <div className="fixed inset-0 z-[35] bg-gray-900/50 lg:hidden" onClick={() => setMenuOpen(false)} />
      )}
 
      {/* Sidebar de navigation : persistante (ouvrable/fermable) sur desktop, drawer sur mobile */}
      <aside
        className={`fixed top-16 bottom-0 left-0 z-[36] w-72 bg-slate-900 text-white overflow-y-auto flex flex-col transition-transform duration-200 ${
          menuOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        <Navigation
          sections={backofficeNavigation}
          theme="dark"
          collapsible={true}
          collapsed={false}
          className="p-2 overflow-y-auto flex-1"
          basePath={`/${organizationId}/backoffice`}
          userRole={user?.role}
          onItemClick={closeOnMobile}
        />
      </aside>
 
      <div className="min-h-screen flex flex-col">
        <AppHeader mode="backoffice" dark onOpenSidebar={() => setMenuOpen((v) => !v)} />
 
        {/* Page content — décalé de la sidebar sur desktop quand elle est ouverte */}
        <main className={`flex-1 p-3 sm:p-6 transition-all duration-200 ${menuOpen ? 'lg:pl-72' : 'lg:pl-0'}`}>
          <Outlet context={{ navOpen: menuOpen }} />
        </main>
      </div>
    </div>
  );
}