add parent pages

src/layout/ManagementLayout.tsx

@@ -50,7 +50,7 @@ function NavBranch({ item, depth }: { item: NavItem; depth: number }) {
   const linkInner = (
     <>
       {icon}
-      {label}
+      <span className="nav-label-chip">{label}</span>
     </>
   )
 
@@ -90,11 +90,11 @@ function NavBranch({ item, depth }: { item: NavItem; depth: number }) {
     <li>
       {main}
       {children.length > 0 ? (
-        <div className="mt-1">
+        <ul className="nav flex-column gap-1 ps-0 mb-0 mt-1 list-unstyled">
           {children.map((ch) => (
             <NavBranch key={ch.id} item={ch} depth={depth + 1} />
           ))}
-        </div>
+        </ul>
       ) : null}
     </li>
   )
@@ -105,6 +105,7 @@ export function ManagementLayout() {
   const navigate = useNavigate()
   const [items, setItems] = useState<NavItem[]>([])
   const [menuError, setMenuError] = useState<string | null>(null)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -129,8 +130,8 @@ export function ManagementLayout() {
   }, [])
 
   return (
-    <div className="management-app d-flex flex-column min-vh-100">
-      <header className="navbar navbar-dark border-bottom shadow-sm px-3 py-2">
+    <div className={`management-app d-flex flex-column min-vh-100 ${sidebarOpen ? 'mgmt-sidebar-open' : ''}`}>
+      <header className="navbar navbar-dark sticky-top border-bottom shadow-sm px-3 py-2">
         <div className="container-fluid px-2 d-flex flex-wrap align-items-center justify-content-between gap-2">
           <Link className="navbar-brand fw-semibold mb-0" to="/app/home">
             Al Rahma Sunday School
@@ -151,12 +152,31 @@ export function ManagementLayout() {
         </div>
       </header>
 
-      <div className="container-fluid flex-grow-1 py-3">
-        <div className="row g-3">
-          <aside className="col-12 col-md-3 col-xl-2">
-            <div className="border rounded bg-white shadow-sm">
-              <div className="p-3 small text-muted border-bottom">Navigation</div>
-              <nav className="p-2 pb-3">
+      <button
+        id="mgmtSidebarToggle"
+        className="mgmt-sidebar-toggle"
+        type="button"
+        aria-label="Toggle sidebar"
+        aria-expanded={sidebarOpen}
+        onClick={() => setSidebarOpen((open) => !open)}
+      >
+        <i className="bi bi-chevron-right" aria-hidden />
+      </button>
+
+      {sidebarOpen ? (
+        <button
+          className="mgmt-sidebar-backdrop"
+          type="button"
+          aria-label="Close navigation"
+          onClick={() => setSidebarOpen(false)}
+        />
+      ) : null}
+
+      <div className="wrapper flex-grow-1">
+        <aside id="navbarManagement" className="mgmt-sidebar" data-mgmt-menu-mode="dark">
+          <div className="mgmt-sidebar-content">
+            <div className="px-2 py-2 small text-muted border-bottom mb-2">Navigation</div>
+            <nav className="pb-3">
                 <NavLink
                   to="/app/home"
                   className={({ isActive }) =>
@@ -164,7 +184,7 @@ export function ManagementLayout() {
                   }
                 >
                   <i className="bi bi-house-door me-2" aria-hidden />
-                  Home
+                  <span className="nav-label-chip">Home</span>
                 </NavLink>
                 <NavLink
                   to="/app/browse"
@@ -173,7 +193,7 @@ export function ManagementLayout() {
                   }
                 >
                   <i className="bi bi-diagram-3 me-2" aria-hidden />
-                  CI views
+                  <span className="nav-label-chip">CI views</span>
                 </NavLink>
                 {menuError ? (
                   <div className="alert alert-warning small py-2">{menuError}</div>
@@ -182,11 +202,41 @@ export function ManagementLayout() {
                 )}
               </nav>
             </div>
-          </aside>
+        </aside>
 
-          <main className="col-12 col-md-9 col-xl-10 management-main">
+        <main className="content management-main">
             <Outlet />
-          </main>
+        </main>
+      </div>
+
+      <footer className="footer-back border-top bg-white py-3 mt-auto">
+        <div className="container-fluid px-4 text-muted small d-flex flex-wrap justify-content-between gap-2">
+          <span>Al Rahma Sunday School</span>
+          <span>Management Portal</span>
+        </div>
+      </footer>
+
+      <div className="modal fade" id="familyCardModal" tabIndex={-1} aria-hidden="true">
+        <div className="modal-dialog modal-xl modal-dialog-scrollable">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title">Family</h5>
+              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+            </div>
+            <div className="modal-body p-0" id="familyCardContent" />
+          </div>
+        </div>
+      </div>
+
+      <div className="modal fade" id="paymentsModal" tabIndex={-1} aria-hidden="true">
+        <div className="modal-dialog modal-lg modal-dialog-scrollable">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title">Payments</h5>
+              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+            </div>
+            <div className="modal-body p-0" id="paymentsModalContent" />
+          </div>
         </div>
       </div>
     </div>