npm package: @sanchitaberde/shared-asm-layout
Description: Shared ASM Dashboard Layout Components - Reusable Navbar and Sidebar for multiple projects
Author: Your Name
Latest version: 1.0.1

# @your-org/shared-asm-layout

Reusable ASM Dashboard Layout Components for multiple projects.

## Installation

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

## Usage

```tsx
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: 'john.doe@company.com',
    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

```typescript
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

```bash
# Install dependencies
npm install

# Run development mode
npm run dev

# Build for production
npm run build

# Run tests
npm test
```

## License

MIT