context layout

🧱 Layout Context

Overview

The LayoutContext manages UI state related to the application’s structural layout, including the expansion of the side navigation and the visibility of the header panel. It ensures that layout behavior is responsive and consistent across screen sizes, leveraging the useBreakpoint hook to adapt to Carbon Design System breakpoints.

This context is especially useful for controlling navigation and profile panel interactions without prop drilling. It provides a clean interface for toggling layout elements and reacting to screen size changes.

🧩 Context API

LayoutContextType

type LayoutContextType = {
  isSideNavExpanded: boolean;
  toggleSideNav: () => void;
  isHeaderPanelOpen: boolean;
  toggleHeaderPanel: () => void;
  closeHeaderPanel: () => void;
};

🧪 Usage Example

import { useLayout } from '@/context/layout/useLayout';

const HeaderMenuButton = () => {
  const { isSideNavExpanded, toggleSideNav } = useLayout();

  return (
    <button onClick={toggleSideNav}>
      {isSideNavExpanded ? 'Collapse Menu' : 'Expand Menu'}
    </button>
  );
};

🔍 Implementation Details

• Responsive Behavior: Side nav is automatically collapsed on 'sm' and 'md' breakpoints.
• State Management: Uses useState for layout toggles and useEffect to sync with breakpoints.
• Encapsulation: All layout logic is centralized in the provider, keeping UI components clean.

🛠️ LayoutProvider

<LayoutProvider>
  <LayoutHeader />
  <Content>
    <Grid>{children}</Grid>
  </Content>
</LayoutProvider>

Wraps the layout shell and provides layout state to all nested components.

🧠 Custom Hook

const { isSideNavExpanded, toggleSideNav } = useLayout();

Ensures safe access to layout state and throws an error if used outside the provider.