@flamingo-stack/openframe-frontend-core 0.0.372 → 0.0.373-snapshot.20260706145330

package/src/components/navigation/app-layout.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, Suspense, useCallback, useContext, useState } from 'react'
+import { createContext, Suspense, useCallback, useContext, useMemo, useRef, useState } from 'react'
 import { NavigationSidebarConfig } from '../../types/navigation'
 import { cn } from '../../utils'
 import { NotificationDrawer } from '../features/notifications/notification-drawer'
@@ -20,6 +20,32 @@ export function useAppLayoutDrawerContainer(): HTMLElement | null {
   return useContext(AppLayoutDrawerContainerContext)
 }
 
+/**
+ * Two-way coordination between AppLayout's mobile burger menu and in-layout
+ * drawers (`AppLayoutDrawer`), which render above the menu (z-[103] vs
+ * z-[101]) — the two must never be open at the same time:
+ *   - a drawer that opens calls `notifyDrawerDidOpen` so the layout closes
+ *     the menu (otherwise it would resurface once the drawer closes);
+ *   - each drawer registers a close handle so opening the menu via the
+ *     burger button closes any open drawer instead of hiding the menu
+ *     underneath it. Null outside of AppLayout.
+ */
+export interface AppLayoutDrawerHandle {
+  close: () => void
+}
+
+interface AppLayoutDrawerCoordination {
+  notifyDrawerDidOpen: () => void
+  /** Returns an unregister cleanup. */
+  registerDrawer: (handle: AppLayoutDrawerHandle) => () => void
+}
+
+const AppLayoutDrawerCoordinationContext = createContext<AppLayoutDrawerCoordination | null>(null)
+
+export function useAppLayoutDrawerCoordination(): AppLayoutDrawerCoordination | null {
+  return useContext(AppLayoutDrawerCoordinationContext)
+}
+
 export interface AppLayoutProps {
   children: React.ReactNode
   sidebarConfig: NavigationSidebarConfig
@@ -57,16 +83,37 @@ export function AppLayout({
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [drawerContainer, setDrawerContainer] = useState<HTMLDivElement | null>(null)
 
+  // Mirrors `mobileMenuOpen` so the toggle callback can stay identity-stable.
+  const mobileMenuOpenRef = useRef(mobileMenuOpen)
+  mobileMenuOpenRef.current = mobileMenuOpen
+
+  const drawerHandlesRef = useRef(new Set<AppLayoutDrawerHandle>())
+
   const handleToggleMobileMenu = useCallback(() => {
-    setMobileMenuOpen(prev => !prev)
+    const opening = !mobileMenuOpenRef.current
+    // Opening the menu closes any open in-layout drawer — otherwise the menu
+    // would open invisibly underneath it (the drawer renders above the menu).
+    if (opening) {
+      for (const handle of drawerHandlesRef.current) handle.close()
+    }
+    setMobileMenuOpen(opening)
   }, [])
 
   const handleCloseMobileMenu = useCallback(() => {
     setMobileMenuOpen(false)
   }, [])
 
+  const drawerCoordination = useMemo<AppLayoutDrawerCoordination>(() => ({
+    notifyDrawerDidOpen: () => setMobileMenuOpen(false),
+    registerDrawer: (handle) => {
+      drawerHandlesRef.current.add(handle)
+      return () => drawerHandlesRef.current.delete(handle)
+    },
+  }), [])
+
   return (
     <AppLayoutDrawerContainerContext.Provider value={drawerContainer}>
+      <AppLayoutDrawerCoordinationContext.Provider value={drawerCoordination}>
       <div className={cn("flex h-screen bg-ods-bg", className)}>
         <NavigationSidebar config={sidebarConfig} disabled={disabled} />
         {/* Mobile Burger Menu - opens below header */}
@@ -112,6 +159,7 @@ export function AppLayout({
           </div>
         </div>
       </div>
+      </AppLayoutDrawerCoordinationContext.Provider>
     </AppLayoutDrawerContainerContext.Provider>
   )
 }

package/src/components/navigation/mobile-burger-menu.tsx

@@ -5,6 +5,7 @@ import { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navi
 import { cn } from '../../utils'
 import { Logout02Icon, PenEditIcon, UserSearchIcon } from '../icons-v2-generated'
 import { Button, SquareAvatar } from '../ui'
+import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer'
 
 // Header height constant (h-12 = 48px)
 const HEADER_HEIGHT = 48
@@ -154,11 +155,11 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
 
   return (
     <>
-      {/* Blur backdrop - positioned below header */}
+      {/* Dim backdrop (no blur, unified with Drawer) - positioned below header */}
       <div
         className={cn(
           "fixed inset-0 z-[100] md:hidden",
-          "backdrop-blur-sm bg-ods-bg-overlay",
+          OVERLAY_BACKDROP_CLASS,
           "transition-all duration-300",
           isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
         )}

package/src/components/ui/drawer.tsx

@@ -8,6 +8,11 @@ import { X } from "lucide-react"
 import { cn } from "../../utils/cn"
 import { useHeaderHeight } from "../../hooks/ui/use-header-height"
 
+/** Unified overlay backdrop — dimmed, no blur. Single source of truth for
+ *  every full-screen backdrop (Drawer, AppLayoutDrawer, MobileBurgerMenu,
+ *  TimeTracker popover) so all panels dim the page identically. */
+const OVERLAY_BACKDROP_CLASS = "bg-black/50"
+
 const Drawer = DialogPrimitive.Root
 
 const DrawerTrigger = DialogPrimitive.Trigger
@@ -23,7 +28,8 @@ const DrawerOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-[9997] bg-black/50 outline-none focus:outline-none focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[9997] outline-none focus:outline-none focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      OVERLAY_BACKDROP_CLASS,
       className
     )}
     {...props}
@@ -543,6 +549,7 @@ const DrawerFooter = ({
 DrawerFooter.displayName = "DrawerFooter"
 
 export {
+  OVERLAY_BACKDROP_CLASS,
   Drawer,
   DrawerTrigger,
   DrawerClose,