varminer-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 varminer-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

Plug-and-Play (Zero Configuration)

The package is 100% plug-and-play - no props needed! It automatically loads everything from localStorage and handles all interactions internally:

import React from 'react';
import { AppHeader, DrawerProvider } from 'varminer-app-header';
import 'varminer-app-header/dist/index.css'; // Don't forget the CSS!

function App() {
  return (
    <DrawerProvider>
      <AppHeader />
    </DrawerProvider>
  );
}

That's it! The component automatically:

• ✅ Loads user data from localStorage (persist:userdb)
• ✅ Loads notification count from localStorage
• ✅ Loads message count from localStorage
• ✅ Handles hamburger menu toggle internally
• ✅ Uses default logo ("VAR" and "MINER")
• ✅ Uses default routes: /account/overview, /profile, /logout
• ✅ Handles all navigation internally
• ✅ Shows online status badge

Zero Configuration

The component requires no props at all - it's completely plug-and-play!

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 'varminer-app-header';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  return (
    <DrawerProvider>
      <AppHeader
        user={{
          name: "Jane Smith",
          email: "[email protected]",
          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('/user/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 'varminer-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 'varminer-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