Layout Documentation

This document provides an overview of the layout structure and components used in the project.

Layout Structure

The application uses a responsive layout system with the following main components:

1. AppLayout - The main layout wrapper
2. AppHeader - The top navigation bar
3. AppSidebar - The collapsible sidebar navigation

Component Details

AppLayout

The AppLayout component serves as the main wrapper for the application:

<SidebarProvider defaultOpen={false}>
  <AppSidebar />
  <SidebarInset>
    <AppHeader />
    <div className="flex-1 space-y-4 p-4 px-5">
      <Outlet />
    </div>
  </SidebarInset>
</SidebarProvider>

AppHeader

The AppHeader component is the top navigation bar that includes:

• Sidebar toggle button
• Company logo and name
• Theme switcher (Light/Dark mode)
• Responsive design for different screen sizes

AppSidebar

The AppSidebar component provides the main navigation with:

• Collapsible sidebar functionality
• Navigation menu items
• Active state tracking
• Icon support
• Nested menu support

Navigation items include:

• Dashboard
• Tables
• Form View
• Buttons
• Typography

Layout Features

Responsive Design

• The layout adapts to different screen sizes
• Sidebar can be collapsed to icon-only view
• Header adjusts its content based on screen width

Theme Support

• Built-in light/dark theme switching
• Consistent styling across components
• Theme-aware color schemes

Navigation

• Hierarchical menu structure
• Active state tracking
• Icon support for menu items
• Collapsible sidebar with icon-only mode

Usage Guidelines

Adding New Navigation Items

To add new navigation items to the sidebar:

1. Open src/layout/AppSidebar.tsx
2. Add new items to the data.navMain array using one of these formats:

For a simple menu item:

{
  title: 'Page Name',
  url: '/page-url',
  icon: YourIconComponent
}

For a menu item with submenu:

{
  title: 'Parent Menu',
  icon: ParentIcon,
  items: [
    {
      title: 'Submenu Item',
      url: '/submenu-url',
      icon: SubmenuIcon
    }
    // Add more submenu items as needed
  ]
}

Key properties:

• title: Display name of the menu item
• url: Route path for the page (required for items without submenu)
• icon: Icon component to display
• items: Array of submenu items (optional)
• isActive: Boolean to mark item as active (optional)

Note: Only one level of submenu is supported. Each submenu item must have a url property.

Customizing the Header

To modify the header:

1. Open src/layout/AppHeader.tsx
2. Add or modify components within the header structure
3. Ensure responsive design is maintained

Layout Modifications

To modify the main layout:

1. Open src/layout/AppLayout.tsx
2. Adjust the layout structure while maintaining the SidebarProvider context
3. Ensure proper spacing and responsive behavior