npm package: @naveen_devbyte/app-header
Description: A plug-and-play React header component with Material-UI, drawer toggle, notifications, and user profile menu
Latest version: 1.0.0

# @your-org/app-header

A plug-and-play React header component built with Material-UI (MUI) that provides a professional app header with drawer toggle, notifications, user profile menu, and responsive design.

## Features

- 🎨 **Material-UI Integration** - Built with MUI components
- 📱 **Responsive Design** - Mobile and desktop support
- 🔔 **Notifications** - Badge support for notifications and messages
- 👤 **User Profile Menu** - Dropdown menu with user info and actions
- 🎯 **Drawer Toggle** - Built-in drawer context for sidebar navigation
- 🎨 **Customizable** - Configurable props for branding and behavior
- 📦 **TypeScript** - Full TypeScript support
- 🎨 **SCSS Styling** - Customizable styles

## Installation

```bash
npm install @your-org/app-header
```

**Note:** Before publishing, update the package name in `package.json` to your desired npm package name (e.g., `@your-company/app-header` or `app-header`).

## Peer Dependencies

Make sure you have these installed in your project:

```bash
npm install react react-dom react-router-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
```

**Important:** The package uses React Router's `useNavigate` hook for internal navigation. Make sure your app is wrapped with a `BrowserRouter` (or similar router) from `react-router-dom`.

## Usage

### Basic Example (Minimal Configuration)

The package includes sensible defaults for logo and routes. Minimal setup:

```tsx
import React from 'react';
import { AppHeader, DrawerProvider } from '@your-org/app-header';
import '@your-org/app-header/dist/index.css'; // Don't forget the CSS!

function App() {
  return (
    <DrawerProvider>
      <AppHeader
        user={{
          name: "John Doe",
          email: "john@example.com",
          role: "Administrator",
          initials: "JD"
        }}
        notificationCount={5}
      />
    </DrawerProvider>
  );
}
```

**Defaults:**
- Logo: "VAR" and "MINER"
- Routes: `/account/overview` (settings), `/profile` (profile), `/logout` (logout)
- Navigation: Handled internally with React Router

### With Custom Callbacks (Override Default Behavior)

You can override the default navigation by providing custom callbacks:

```tsx
import React from 'react';
import { AppHeader, DrawerProvider } from '@your-org/app-header';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  return (
    <DrawerProvider>
      <AppHeader
        user={{
          name: "Jane Smith",
          email: "jane@example.com",
          role: "Manager",
          avatar: "/path/to/avatar.jpg"
        }}
        isOnline={true}
        logo={{ first: "MY", second: "APP" }}
        routes={{
          settings: "/settings",
          profile: "/profile",
          logout: "/login"
        }}
        onDrawerToggle={() => {
          // Handle drawer toggle
          console.log('Drawer toggled');
        }}
        onSettingsClick={() => {
          // Custom logic before navigation
          console.log('Custom settings handler');
          navigate('/custom-settings');
        }}
        onSignOutClick={() => {
          // Custom sign out logic
          localStorage.clear();
          sessionStorage.clear();
          navigate('/login');
        }}
      />
    </DrawerProvider>
  );
}
```

## Props

### AppHeaderProps

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `user` | `UserProfile` | See below | User profile information |
| `isOnline` | `boolean` | `true` | Whether the user is online |
| `logo` | `{ first: string, second: string }` | `{ first: "VAR", second: "MINER" }` | App logo/brand name (optional) |
| `notificationCount` | `number` | `0` | Notification badge count (only shown if > 0) |
| `messageCount` | `number` | `undefined` | Message badge count (optional, shown only in mobile menu) |
| `onDrawerToggle` | `() => void` | - | Callback when drawer toggle is clicked |
| `routes` | `{ settings?: string, profile?: string, logout?: string }` | See below | Route paths for navigation (optional) |
| `onSettingsClick` | `() => void` | - | Callback when settings is clicked (overrides default navigation) |
| `onProfileClick` | `() => void` | - | Callback when profile is clicked (overrides default navigation) |
| `onSignOutClick` | `() => void` | - | Callback when sign out is clicked (overrides default navigation) |
| `className` | `string` | - | Custom CSS class name |

**Default routes (used if not provided):**
- `settings`: `"/account/overview"`
- `profile`: `"/profile"`
- `logout`: `"/logout"`

**Note:** If callbacks are not provided, the package will automatically handle navigation using React Router's `useNavigate` hook. For sign out, it will also clear `localStorage` before navigating.

### UserProfile

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `name` | `string` | Yes | User's full name |
| `email` | `string` | Yes | User's email address |
| `role` | `string` | Yes | User's role/title |
| `avatar` | `string` | No | URL to user's avatar image |
| `initials` | `string` | No | Custom initials (auto-generated from name if not provided) |

## DrawerProvider

The `DrawerProvider` component provides drawer state management. Wrap your app with it to enable drawer functionality:

```tsx
import { DrawerProvider, useDrawer } from '@your-org/app-header';

function MyApp() {
  return (
    <DrawerProvider>
      <YourApp />
    </DrawerProvider>
  );
}

// Use the drawer context in any component
function Sidebar() {
  const { isDrawerOpen, toggleDrawer } = useDrawer();
  
  return (
    <Drawer open={isDrawerOpen} onClose={toggleDrawer}>
      {/* Sidebar content */}
    </Drawer>
  );
}
```

## Styling

The component includes SCSS styles that can be customized. The styles use SCSS variables defined in `src/styles/_variables.scss`. You can override these by importing the styles and customizing the variables.

### Custom Styling

```tsx
import '@your-org/app-header/dist/index.css';
// Your custom overrides
```

## Development

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev
```

## License

MIT