Photonix

LayoutContext

Provides context for layout-aware components to coordinate states (e.g., presence of a NavigationDrawer).

Overview

Wrap your main application layout specific components with LayoutProvider. This allows components like TopNavigation to know if a NavigationDrawer is present and adjust their styling or behavior accordingly (e.g., hamburger menu visibility).

Usage
import { LayoutProvider, TopNavigation, NavigationDrawer } from '@photonix/ultimate';

export default function RootLayout({ children }) {
  return (
    <LayoutProvider>
      <TopNavigation />
      <NavigationDrawer>...</NavigationDrawer>
      <main>{children}</main>
    </LayoutProvider>
  );
}

Component API

LayoutProvider

Prop
Type
Default
Description
children
React.ReactNode
-

useLayout

Prop
Type
Default
Description
Returns
LayoutContextValue | null
-
Context with `hasDrawer`, `registerDrawer`, `unregisterDrawer`.

On this page

Overview
Component API
Photonix UI - React Components, Templates & Figma Design System