0
# Layout System
1

2
Responsive layout system with navigation, theming, and user interface management for admin applications.
3

4
## Capabilities
5

6
### Layout Component
7

8
Main layout component providing the overall structure for admin pages with sidebar, app bar, and content area.
9

10
```typescript { .api }
11
/**
12
 * Main layout component providing the overall structure for admin pages
13
 * @param props - Layout configuration props
14
 * @returns Complete layout with sidebar, app bar, and content area
15
 */
16
function Layout(props: LayoutProps): ReactElement;
17

18
interface LayoutProps {
19
  /** Child components to render in the main content area */
20
  children?: ReactNode;
21
  /** Custom sidebar component */
22
  sidebar?: ComponentType<SidebarProps>;
23
  /** Custom app bar component */
24
  appBar?: ComponentType<AppBarProps>;
25
  /** Custom menu component for navigation */
26
  menu?: ComponentType<MenuProps>;
27
  /** Custom error component */
28
  error?: ComponentType;
29
  /** Custom loading component */
30
  loading?: ComponentType;
31
}
32
```
33

34
### AppBar Component
35

36
Application header component with navigation, user menu, and branding support.
37

38
```typescript { .api }
39
/**
40
 * Application header component with navigation and user menu
41
 * @param props - AppBar configuration props
42
 * @returns Header component with navigation elements
43
 */
44
function AppBar(props: AppBarProps): ReactElement;
45

46
interface AppBarProps {
47
  /** Custom user menu component */
48
  userMenu?: ComponentType<UserMenuProps>;
49
  /** Application title */
50
  title?: string;
51
  /** Custom title component */
52
  titleComponent?: ComponentType<TitleProps>;
53
  /** App bar color variant */
54
  color?: 'default' | 'inherit' | 'primary' | 'secondary';
55
  /** App bar position */
56
  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
57
}
58
```
59

60
### Sidebar Component
61

62
Navigation sidebar component with collapsible functionality and menu integration.
63

64
```typescript { .api }
65
/**
66
 * Navigation sidebar component with collapsible functionality
67
 * @param props - Sidebar configuration props
68
 * @returns Sidebar component with navigation menu
69
 */
70
function Sidebar(props: SidebarProps): ReactElement;
71

72
interface SidebarProps {
73
  /** Custom menu component */
74
  menu?: ComponentType<MenuProps>;
75
  /** Sidebar width when open */
76
  width?: number;
77
  /** Whether sidebar is collapsible */
78
  collapsible?: boolean;
79
  /** Custom close button component */
80
  closeButton?: ComponentType;
81
}
82
```
83

84
### Menu Component
85

86
Main navigation menu component with resource-based menu items and dashboard link.
87

88
```typescript { .api }
89
/**
90
 * Main navigation menu component with resource-based menu items
91
 * @param props - Menu configuration props
92
 * @returns Navigation menu with resource links
93
 */
94
function Menu(props: MenuProps): ReactElement;
95

96
interface MenuProps {
97
  /** Whether to show dashboard menu item */
98
  hasDashboard?: boolean;
99
  /** Custom dashboard menu item component */
100
  dashboardMenuItem?: ComponentType<DashboardMenuItemProps>;
101
  /** Dense menu styling */
102
  dense?: boolean;
103
  /** Menu variant */
104
  variant?: 'permanent' | 'persistent' | 'temporary';
105
}
106
```
107

108
### MenuItemLink Component
109

110
Individual menu item component for navigation links with active state support.
111

112
```typescript { .api }
113
/**
114
 * Individual menu item component for navigation links
115
 * @param props - MenuItemLink configuration props
116
 * @returns Menu item with navigation link
117
 */
118
function MenuItemLink(props: MenuItemLinkProps): ReactElement;
119

120
interface MenuItemLinkProps {
121
  /** Navigation target path */
122
  to: string;
123
  /** Menu item label */
124
  primaryText: string;
125
  /** Left icon component */
126
  leftIcon?: ReactElement;
127
  /** Click handler */
128
  onClick?: () => void;
129
  /** Dense styling */
130
  dense?: boolean;
131
}
132
```
133

134
### Layout Utilities
135

136
Additional layout utility components for common UI patterns.
137

138
```typescript { .api }
139
/**
140
 * Page title component with automatic document title setting
141
 */
142
function Title(props: TitleProps): ReactElement;
143

144
/**
145
 * Loading indicator component with Material UI styling
146
 */
147
function Loading(props: LoadingProps): ReactElement;
148

149
/**
150
 * Error display component with retry functionality
151
 */
152
function Error(props: ErrorProps): ReactElement;
153

154
/**
155
 * 404 not found page component
156
 */
157
function NotFound(props: NotFoundProps): ReactElement;
158

159
interface TitleProps {
160
  title?: string;
161
  defaultTitle?: string;
162
}
163

164
interface LoadingProps {
165
  loadingPrimary?: string;
166
  loadingSecondary?: string;
167
}
168

169
interface ErrorProps {
170
  error?: any;
171
  errorComponent?: ComponentType;
172
  errorInfo?: any;
173
}
174
```
175

176
## Layout Hooks
177

178
### Sidebar State Management
179

180
Hooks for managing sidebar state and responsive behavior.
181

182
```typescript { .api }
183
/**
184
 * Hook for accessing and managing sidebar open/closed state
185
 * @returns Array with current state and setter function
186
 */
187
function useSidebarState(): [boolean, (open: boolean) => void];
188

189
/**
190
 * Hook for toggling sidebar open/closed state
191
 * @returns Function to toggle sidebar state
192
 */
193
function useToggleSidebar(): () => void;
194
```
195

196
**Usage Examples:**
197

198
```typescript
199
import { Layout, AppBar, Sidebar, Menu, useSidebarState } from "ra-ui-materialui";
200

201
// Basic layout usage
202
const MyLayout = (props) => (
203
  <Layout {...props} />
204
);
205

206
// Custom layout with sidebar management
207
const CustomLayout = (props) => {
208
  const [sidebarOpen, setSidebarOpen] = useSidebarState();
209
  
210
  return (
211
    <Layout 
212
      {...props}
213
      sidebar={<Sidebar />}
214
      appBar={<AppBar />}
215
    />
216
  );
217
};
218

219
// Custom app bar
220
const CustomAppBar = () => (
221
  <AppBar
222
    title="My Admin"
223
    color="primary"
224
    userMenu={<UserMenu />}
225
  />
226
);
227
```
228

229
## Types
230

231
```typescript { .api }
232
interface Theme {
233
  palette: PaletteOptions;
234
  typography: TypographyOptions;
235
  spacing: SpacingOptions;
236
  breakpoints: BreakpointsOptions;
237
  components?: ComponentsOverrides;
238
}
239

240
interface DashboardMenuItemProps {
241
  locale?: string;
242
  onClick?: () => void;
243
  dense?: boolean;
244
}
245

246
interface UserMenuProps {
247
  logout?: ReactElement;
248
  profileMenu?: ReactElement;
249
  icon?: ReactElement;
250
}
251
```