App Header

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import {
6  Children,
7  createContext,
8  isValidElement,
9  useCallback,
10  useContext,
11  useId,
12  useLayoutEffect,
13  useMemo,
14  useRef,
15  useState,
16} from "react";
17import type * as React from "react";
18import {
19  Sheet,
20  SheetPrimitive,
21  SheetTrigger,
22} from "@/components/ui/sheet";
23import { overlayLayer, selectionFocus } from "@/lib/recipes";
24import { cn } from "@/lib/utils";
25 
26/** Complete site-header block with responsive mobile panel. */
27 
28/* --------------------------- context --------------------------- */
29 
30interface AppHeaderContextValue {
31  open: boolean;
32  setOpen: (open: boolean) => void;
33  panelId: string;
34  triggerRef: React.RefObject<HTMLButtonElement | null>;
35  mobileGeometry: MobileGeometry | null;
36  right: React.ReactNode;
37  navChildren: React.ReactNode;
38}
39 
40interface MobileGeometry {
41  headerBottom: number;
42  triggerTop: number;
43  triggerLeft: number;
44  triggerWidth: number;
45  triggerHeight: number;
46}
47 
48const AppHeaderContext = createContext<AppHeaderContextValue | null>(null);
49 
50const AppHeaderMobileRenderContext = createContext<boolean>(false);
51 
52function useAppHeaderContext(): AppHeaderContextValue {
53  const ctx = useContext(AppHeaderContext);
54  if (!ctx) {
55    throw new Error("AppHeader subcomponents must be used inside <AppHeader>.");
56  }
57  return ctx;
58}
59 
60function extractSlots(children: React.ReactNode): {
61  brand: React.ReactNode;
62  nav: React.ReactNode;
63  right: React.ReactNode;
64  mobileTop: React.ReactNode;
65} {
66  let brand: React.ReactNode = null;
67  let nav: React.ReactNode = null;
68  let right: React.ReactNode = null;
69  let mobileTop: React.ReactNode = null;
70  Children.forEach(children, (child) => {
71    if (!isValidElement(child)) return;
72    const type = child.type as { displayName?: string };
73    if (type === AppHeaderBrand || type.displayName === "AppHeaderBrand") {
74      brand = child;
75    } else if (type === AppHeaderNav || type.displayName === "AppHeaderNav") {
76      nav = child;
77    } else if (type === AppHeaderRight || type.displayName === "AppHeaderRight") {
78      right = child;
79    } else if (
80      type === AppHeaderMobileTop ||
81      type.displayName === "AppHeaderMobileTop"
82    ) {
83      mobileTop = child;
84    }
85  });
86  return { brand, nav, right, mobileTop };
87}
88 
89/* --------------------------- root --------------------------- */
90 
91// … truncated