ailab-frontend-template v0.1.0

LayoutProvider is a React component that wraps your application layout with a sidebar and header navigation. It provides a ready-to-use UI layout that features a collapsible sidebar, a header with breadcrumb navigation, and optional components for additional header controls.

Installation

Install the package via npm or yarn:

npm install ailab-layout-provider

or

yarn add ailab-layout-provider

Usage

Import the LayoutProvider and required types from the package. Then, wrap your application with the provider to enable the sidebar and header navigation.

import React from 'react';
import { LayoutProvider, SidebarNavigationElementsProps } from 'ailab-layout-provider';
import {
  BookOpen,
  Bot,
  Frame,
  Map,
  PieChart,
  Settings2,
  SquareTerminal, // SquareTerminal,
} from 'lucide-react';

export default function App() {
  return (
    <LayoutProvider
      sidebarNavbarElements={sidebarNavbarElements}
      collapsible="icon" // or "offcanvas" or "none"
      ModeToggle={<button>Toggle Mode</button>}
    >
      <main>
        {/* Your application content */}
        <h1>Welcome to the App</h1>
      </main>
    </LayoutProvider>
  );
}

export const sidebarNavbarElements: SidebarNavigationElementsProps = {
  user: {
    name: 'shadcn',
    email: 'm@example.com',
    avatar: '/avatars/shadcn.jpg',
    logoutRedirectURL: ''
  },
  teams: [
    {
      name: 'Acme Inc',
      logo: () => <span>Your Logo</span>,
      plan: 'Enterprise',
    },
  ],
  navMain: [
    {
      title: 'Playground',
      url: '#',
      icon: () => <SquareTerminal/>,
      isActive: true,
      items: [
        {
          title: 'overview',
          url: '#',
        },
        {
          title: 'Starred',
          url: '#',
        },
        {
          title: 'Settings',
          url: '#',
        },
      ],
    },
    {
      title: 'Models',
      url: '#',
      icon: () => <Bot />,
      items: [
        {
          title: 'Genesis',
          url: '#',
        },
        {
          title: 'Explorer',
          url: '#',
        },
        {
          title: 'Quantum',
          url: '#',
        },
      ],
    },
    {
      title: 'Documentation',
      url: '#',
      icon: () => <BookOpen />,
      items: [
        {
          title: 'Introduction',
          url: '#',
        },
        {
          title: 'Get Started',
          url: '#',
        },
        {
          title: 'Tutorials',
          url: '#',
        },
        {
          title: 'Changelog',
          url: '#',
        },
      ],
    },
    {
      title: 'Settings',
      url: '#',
      icon: () => <Settings2/>,
      items: [
        {
          title: 'General',
          url: '#',
        },
        {
          title: 'Team',
          url: '#',
        },
        {
          title: 'Billing',
          url: '#',
        },
        {
          title: 'Limits',
          url: '#',
        },
      ],
    },
  ],
  projects: [
    {
      name: 'Design Engineering',
      url: '#',
      icon: () => <Frame />,
    },
    {
      name: 'Sales & Marketing',
      url: '#',
      icon: () => <PieChart />,
    },
    {
      name: 'Travel',
      url: '#',
      icon: () => <Map />,
    },
  ],
};

Note on Shadcn DarkMode

If you are using the Shadcn UI DarkMode, make sure to wrap your LayoutProvider with the ThemeProvider from Shadcn UI. For example:

import { ThemeProvider } from '@/components/theme-provider';

export default function App() {
  return (
    <ThemeProvider attribute="class">
      <LayoutProvider
        sidebarNavbarElements={sidebarNavbarElements}
        collapsible="icon"
        ModeToggle={<button>Toggle Mode</button>}
      >
        <main>
          <h1>Welcome to Your App</h1>
          {/* Your application content */}
        </main>
      </LayoutProvider>
    </ThemeProvider>
  );
}

Features

• Responsive Sidebar: Supports collapsible states with different modes such as icon, offcanvas, or fixed (none).
• Header Navigation: Displays breadcrumb navigation extracted from the current URL.
• Customization: Easily extend or modify the layout by passing custom components, including a custom mode toggle.
• Tree-shakeable: Only the components that are used are included in your bundle.
• Dark mode support: Seamlessly integrates with dark mode using Tailwind CSS.

Contributing

Contributions are welcome! Please check CONTRIBUTING.md for guidelines.

License

LayoutProvider is licensed under the MIT License. See LICENSE for details.

For the full source and additional documentation, visit the GitHub repository.

Learn more about the components:

• LayoutProvider
• SidebarNavigationElementsProps