@your-org/shared-asm-layout

Reusable ASM Dashboard Layout Components for multiple projects.

Installation

npm install @your-org/shared-asm-layout

Usage

import React from 'react';
import { ASMDashboardLayout, NavItem } from '@your-org/shared-asm-layout';

const App: React.FC = () => {
  // Define your navigation items
  const navItems: NavItem[] = [
    {
      id: 'dashboard',
      label: 'Dashboard',
      icon: <DashboardOutlined />,
      path: '/dashboard',
      active: true
    },
    {
      id: 'issues',
      label: 'Issues',
      icon: <AlertOutlined />,
      path: '/issues',
      badge: 5
    },
    {
      id: 'assets',
      label: 'Assets',
      icon: <FileTextOutlined />,
      path: '/assets'
    }
  ];

  const sidebarItems: NavItem[] = [
    {
      id: 'dashboard',
      label: 'Dashboard',
      icon: <DashboardOutlined />,
      path: '/dashboard',
      active: true
    },
    {
      id: 'issues',
      label: 'Issues',
      icon: <AlertOutlined />,
      path: '/issues',
      badge: 5,
      children: [
        {
          id: 'open',
          label: 'Open Issues',
          icon: <AlertOutlined />,
          path: '/issues/open'
        },
        {
          id: 'closed',
          label: 'Closed Issues',
          icon: <AlertOutlined />,
          path: '/issues/closed'
        }
      ]
    },
    {
      id: 'assets',
      label: 'Assets',
      icon: <FileTextOutlined />,
      path: '/assets'
    },
    {
      id: 'reports',
      label: 'Reports',
      icon: <BarChartOutlined />,
      path: '/reports'
    }
  ];

  const user = {
    id: '1',
    name: 'John Doe',
    email: '[email protected]',
    avatar: '/path/to/avatar.jpg'
  };

  return (
    <ASMDashboardLayout
      navbar={{
        items: navItems,
        logo: <div className="text-xl font-bold text-blue-600">ASM</div>,
        user,
        actions: <button className="p-2 rounded hover:bg-gray-100">
          <SettingOutlined />
        </button>
      }}
      sidebar={{
        items: sidebarItems,
        collapsed: false,
        onCollapse: (collapsed) => console.log('Sidebar collapsed:', collapsed)
      }}
    >
      <div className="p-6">
        <h1 className="text-2xl font-bold mb-4">Welcome to ASM Dashboard</h1>
        <p className="text-gray-600">This is your main dashboard content.</p>
      </div>
    </ASMDashboardLayout>
  );
};

export default App;

Components

ASMDashboardLayout

Main layout component that combines Navbar and Sidebar.

Props:

• children: React.ReactNode - Main content area
• navbar: NavbarProps - Navbar configuration
• sidebar: SidebarProps - Sidebar configuration
• className: string - Additional CSS classes

Navbar

Top navigation bar with user menu and actions.

Props:

• items: NavItem[] - Navigation items
• logo: React.ReactNode - Logo/brand
• user: User object - Current user info
• actions: React.ReactNode - Action buttons
• className: string - Additional CSS classes

Sidebar

Collapsible sidebar navigation with nested menu items.

Props:

• items: NavItem[] - Menu items
• collapsed: boolean - Collapse state
• onCollapse: (collapsed: boolean) => void - Collapse handler
• className: string - Additional CSS classes

Types

NavItem

interface NavItem {
  id: string;
  label: string;
  icon?: React.ReactNode;
  path?: string;
  badge?: number | string;
  active?: boolean;
  children?: NavItem[];
}

Features

• ✅ TypeScript Support: Full type safety
• ✅ Responsive Design: Mobile-friendly layout
• ✅ Customizable: Flexible props and styling
• ✅ Modern UI: Clean, professional design
• ✅ Accessible: ARIA labels and keyboard navigation
• ✅ Lightweight: Minimal dependencies

Development

# Install dependencies
npm install

# Run development mode
npm run dev

# Build for production
npm run build

# Run tests
npm test

License

MIT