LayoutProvider

The LayoutProvider manages which layout elements (sidebar, topbar) are visible based on the current route. It provides smooth animated transitions when these elements appear or disappear.

Features

• Path-based visibility control with wildcard patterns
• Smooth CSS transitions for enter/exit animations
• Manual override functions for programmatic control
• Configurable animation duration

Configuration

// Default configuration
const DEFAULT_CONFIG = {
  sidebarPaths: ['/docs', '/docs/**'],
  topbarPaths: [], // Empty means all paths
  animationDuration: 300,
};

Using the Layout Context

import { useLayoutSafe } from '@/components/layout';

function MyComponent() {
  const { sidebar, topbar, showSidebar, hideSidebar } = useLayoutSafe();

  return (
    <div>
      <p>Sidebar visible: {sidebar.visible ? 'Yes' : 'No'}</p>
      <p>Animation state: {sidebar.animationState}</p>
      <button onClick={showSidebar}>Show Sidebar</button>
      <button onClick={hideSidebar}>Hide Sidebar</button>
    </div>
  );
}

Animation States

State	Description
entering	Element is animating into view
entered	Element is fully visible
exiting	Element is animating out of view
exited	Element is fully hidden

Path Matching

The provider supports wildcard patterns for path matching:

• /docs - Exact match
• /docs/* - Matches one level deep (e.g., /docs/intro)
• /docs/** - Matches any depth (e.g., /docs/api/hooks)