@naveen_devbyte/app-header

@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

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:

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:

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: "[e-mail]",
          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:

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: "[e-mail]",
          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:

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

import '@your-org/app-header/dist/index.css';
// Your custom overrides

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

License

MIT