varminer-app-header 1.0.0

package/README.md

@@ -0,0 +1,203 @@
+# 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
+
+```bash
+npm install varminer-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 'varminer-app-header';
+import 'varminer-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 'varminer-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 '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
+
+```tsx
+import 'varminer-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
+

package/dist/AppHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { AppHeaderProps } from "./types";
+import "./styles/Header.scss";
+declare const AppHeader: React.FC<AppHeaderProps>;
+export default AppHeader;
+//# sourceMappingURL=AppHeader.d.ts.map

package/dist/AppHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../src/AppHeader.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAe9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqevC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/DrawerContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+interface DrawerContextType {
+    isDrawerOpen: boolean;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}
+export declare const DrawerProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useDrawer: () => DrawerContextType;
+export {};
+//# sourceMappingURL=DrawerContext.d.ts.map

package/dist/DrawerContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContext.d.ts","sourceRoot":"","sources":["../src/DrawerContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,iBAAiB;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AASD,eAAO,MAAM,cAAc,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAsBzE,CAAC;AAEF,eAAO,MAAM,SAAS,yBAAwC,CAAC"}

package/dist/index.css

@@ -0,0 +1 @@
+.MuiToolbar-root{background-color:#fff!important;color:#1e2f97!important;padding-left:15px!important}.MuiToolbar-root .MuiButtonBase-root{color:#1e2f97!important;margin-right:0}.app-header,.app-header .MuiAppBar-root{background-color:#fff!important}.app-header .MuiPaper-root:only-of-type{border-bottom:1px solid #e5e9eb;box-shadow:none!important;padding:0!important}.var{color:#1aa7ee!important}.miner,.var{font:500 20px OpenSans-SemiBold,Roboto,sans-serif}.miner{color:#0f1e75!important}#account-menu:has(.profile-menu-section) .MuiList-root .MuiListItem-root .MuiListItemText-root .MuiTypography-root.profile-name{color:#1e2f97;font:600 16px/28px OpenSans-SemiBold,Roboto,sans-serif}#account-menu:has(.profile-menu-section) .MuiList-root .MuiListItem-root .MuiListItemText-root .MuiTypography-root.profile-email{color:rgba(0,0,0,.6);font:400 14px/24px OpenSans-Regular,Roboto,sans-serif;text-decoration:underline}#account-menu:has(.profile-menu-section) .MuiList-root .MuiListItem-root .MuiListItemText-root .MuiTypography-root.profile-role{color:rgba(0,0,0,.38);font:400 12px/28px OpenSans-Regular,Roboto,sans-serif;text-transform:uppercase}#account-menu:has(.profile-menu-item) .profile-menu-item{padding:10px 15px 5px}#account-menu:has(.profile-menu-item) .MuiMenu-paper{background:linear-gradient(180deg,#fff,#ddf7ff,#ddf7ff);box-shadow:none!important;color:#000;margin:0;max-width:280px;width:280px}#account-menu:has(.profile-menu-item) .MuiMenu-paper .MuiListItemAvatar-root{min-width:40px;padding:10px}#account-menu:has(.profile-menu-item) .MuiMenu-paper .MuiListItemAvatar-root .MuiAvatar-circular{height:40px;margin-left:-10px;margin-right:0;width:40px}#account-menu:has(.profile-menu-item) .MuiMenu-paper .MuiMenuItem-root:first-of-type{margin-top:10px}#account-menu:has(.profile-menu-item) .MuiMenu-paper .MuiMenuItem-root .MuiListItemIcon-root .MuiSvgIcon-root{color:#1e2f97}

package/dist/index.d.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import React__default from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface UserProfile {
+    name: string;
+    email: string;
+    role: string;
+    avatar?: string;
+    initials?: string;
+}
+interface AppHeaderProps {
+    /**
+     * User profile information
+     */
+    user?: UserProfile;
+    /**
+     * Whether the user is online
+     * @default true
+     */
+    isOnline?: boolean;
+    /**
+     * App logo/brand name (optional - defaults to "VAR" and "MINER")
+     */
+    logo?: {
+        first: string;
+        second: string;
+    };
+    /**
+     * Notification count (shown in desktop and mobile menu)
+     * @default 0
+     */
+    notificationCount?: number;
+    /**
+     * Message count (shown only in mobile menu, optional)
+     * @default undefined (not shown if not provided)
+     */
+    messageCount?: number;
+    /**
+     * Callback when drawer toggle is clicked
+     */
+    onDrawerToggle?: () => void;
+    /**
+     * Whether drawer is open
+     * @default false
+     */
+    isDrawerOpen?: boolean;
+    /**
+     * Route paths for navigation (optional - defaults are used if not provided)
+     */
+    routes?: {
+        /**
+         * Settings route path
+         * @default "/account/overview"
+         */
+        settings?: string;
+        /**
+         * Profile route path
+         * @default "/profile"
+         */
+        profile?: string;
+        /**
+         * Logout route path
+         * @default "/logout"
+         */
+        logout?: string;
+    };
+    /**
+     * Callback when settings is clicked (overrides default navigation)
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Callback when profile is clicked (overrides default navigation)
+     */
+    onProfileClick?: () => void;
+    /**
+     * Callback when sign out is clicked (overrides default navigation)
+     * If not provided, will clear localStorage and navigate to logout route
+     */
+    onSignOutClick?: () => void;
+    /**
+     * Custom CSS class name
+     */
+    className?: string;
+}
+
+declare const AppHeader: React__default.FC<AppHeaderProps>;
+
+interface DrawerContextType {
+    isDrawerOpen: boolean;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}
+declare const DrawerProvider: ({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const useDrawer: () => DrawerContextType;
+
+export { AppHeader, DrawerProvider, useDrawer };
+export type { AppHeaderProps, UserProfile };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5D,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,sBAAsB,CAAC"}

package/dist/index.esm.css

@@ -0,0 +1 @@
+.MuiToolbar-root{background-color:#fff!important;color:#1e2f97!important;padding-left:15px!important}.MuiToolbar-root .MuiButtonBase-root{color:#1e2f97!important;margin-right:0}.app-header,.app-header .MuiAppBar-root{background-color:#fff!important}.app-header .MuiPaper-root:only-of-type{border-bottom:1px solid #e5e9eb;box-shadow:none!important;padding:0!important}.var{color:#1aa7ee!important}.miner,.var{font:500 20px OpenSans-SemiBold,Roboto,sans-serif}.miner{color:#0f1e75!important}#account-menu:has(.profile-menu-section) .MuiList-root .MuiListItem-root .MuiListItemText-root .MuiTypography-root.profile-name{color:#1e2f97;font:600 16px/28px OpenSans-SemiBold,Roboto,sans-serif}#account-menu:has(.profile-menu-section) .MuiList-root .MuiListItem-root .MuiListItemText-root .MuiTypography-root.profile-email{color:rgba(0,0,0,.6);font:400 14px/24px OpenSans-Regular,Roboto,sans-serif;text-decoration:underline}#account-menu:has(.profile-menu-section) .MuiList-root .MuiListItem-root .MuiListItemText-root .MuiTypography-root.profile-role{color:rgba(0,0,0,.38);font:400 12px/28px OpenSans-Regular,Roboto,sans-serif;text-transform:uppercase}#account-menu:has(.profile-menu-item) .profile-menu-item{padding:10px 15px 5px}#account-menu:has(.profile-menu-item) .MuiMenu-paper{background:linear-gradient(180deg,#fff,#ddf7ff,#ddf7ff);box-shadow:none!important;color:#000;margin:0;max-width:280px;width:280px}#account-menu:has(.profile-menu-item) .MuiMenu-paper .MuiListItemAvatar-root{min-width:40px;padding:10px}#account-menu:has(.profile-menu-item) .MuiMenu-paper .MuiListItemAvatar-root .MuiAvatar-circular{height:40px;margin-left:-10px;margin-right:0;width:40px}#account-menu:has(.profile-menu-item) .MuiMenu-paper .MuiMenuItem-root:first-of-type{margin-top:10px}#account-menu:has(.profile-menu-item) .MuiMenu-paper .MuiMenuItem-root .MuiListItemIcon-root .MuiSvgIcon-root{color:#1e2f97}

package/dist/index.esm.js

@@ -0,0 +1,224 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import MailIcon from '@mui/icons-material/Mail';
+import MenuIcon from '@mui/icons-material/Menu';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import NotificationsActiveOutlined from '@mui/icons-material/NotificationsActiveOutlined';
+import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import { styled, Badge, List, ListItem, ListItemAvatar, Avatar, ListItemText, Typography, Menu, Divider, MenuItem, ListItemIcon, IconButton, Box, AppBar, Toolbar } from '@mui/material';
+import { deepOrange } from '@mui/material/colors';
+import * as React from 'react';
+import React__default from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const DrawerContext = React.createContext({
+    isDrawerOpen: false,
+    openDrawer: () => { },
+    closeDrawer: () => { },
+    toggleDrawer: () => { },
+});
+const DrawerProvider = ({ children }) => {
+    const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+    const openDrawer = () => {
+        setIsDrawerOpen(true);
+    };
+    const closeDrawer = () => {
+        setIsDrawerOpen(false);
+    };
+    const toggleDrawer = () => {
+        setIsDrawerOpen((prev) => !prev);
+    };
+    return (jsx(DrawerContext.Provider, { value: { isDrawerOpen, openDrawer, closeDrawer, toggleDrawer }, children: children }));
+};
+const useDrawer = () => React.useContext(DrawerContext);
+
+// Default routes - can be overridden via props
+const DEFAULT_ROUTES = {
+    settings: "/account/overview",
+    profile: "/profile",
+    logout: "/logout",
+};
+// Default logo - can be overridden via props
+const DEFAULT_LOGO = {
+    first: "VAR",
+    second: "MINER",
+};
+const AppHeader = ({ user = {
+    name: "Shivam Kumar",
+    email: "shivam@redcliffelabs.com",
+    role: "Lab Technician",
+    initials: "SK",
+}, isOnline = true, logo, notificationCount = 0, messageCount, onDrawerToggle, routes, onSettingsClick, onProfileClick, onSignOutClick, className, }) => {
+    // Merge provided routes with defaults
+    const finalRoutes = {
+        settings: routes?.settings ?? DEFAULT_ROUTES.settings,
+        profile: routes?.profile ?? DEFAULT_ROUTES.profile,
+        logout: routes?.logout ?? DEFAULT_ROUTES.logout,
+    };
+    // Use provided logo or default
+    const finalLogo = logo ?? DEFAULT_LOGO;
+    const { isDrawerOpen, toggleDrawer } = useDrawer();
+    const navigate = useNavigate();
+    const [anchorEl, setAnchorEl] = React__default.useState(null);
+    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React__default.useState(null);
+    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+    const OnlineBadge = styled(Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "#44b700",
+            color: "#44b700",
+            boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+            width: 12,
+            height: 12,
+            borderRadius: "50%",
+        },
+    }));
+    const OfflineBadge = styled(Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "gray",
+            color: "gray",
+            boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+            width: 12,
+            height: 12,
+            borderRadius: "50%",
+        },
+    }));
+    const handleDrawerToggle = () => {
+        toggleDrawer();
+        onDrawerToggle?.();
+    };
+    const handleProfileMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMobileMenuClose = () => {
+        setMobileMoreAnchorEl(null);
+    };
+    const handleMobileMenuOpen = (event) => {
+        setMobileMoreAnchorEl(event.currentTarget);
+    };
+    const open = Boolean(anchorEl);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSettingsClick = () => {
+        handleClose();
+        if (onSettingsClick) {
+            onSettingsClick();
+        }
+        else {
+            navigate(finalRoutes.settings);
+        }
+    };
+    const handleProfileClick = () => {
+        handleClose();
+        if (onProfileClick) {
+            onProfileClick();
+        }
+        else {
+            navigate(finalRoutes.profile);
+        }
+    };
+    const handleSignOutClick = () => {
+        handleClose();
+        if (onSignOutClick) {
+            onSignOutClick();
+        }
+        else {
+            localStorage.clear();
+            navigate(finalRoutes.logout);
+        }
+    };
+    const menuId = "primary-account-menu";
+    const getInitials = () => {
+        if (user.initials)
+            return user.initials;
+        return user.name
+            .split(" ")
+            .map((n) => n[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2);
+    };
+    const profileList = (jsx(List, { className: "profile-menu-section", sx: {
+            width: "100%",
+            maxWidth: 360,
+            pointerEvents: "none",
+        }, component: "div", "aria-hidden": "true", tabIndex: -1, children: jsxs(ListItem, { alignItems: "flex-start", className: "profile-menu-item", children: [jsx(ListItemAvatar, { children: isOnline ? (jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Online", "aria-label": "Online status badge", "data-testid": "online-badge", children: jsx(Avatar, { sx: { bgcolor: deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) : (jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Offline", "aria-label": "Offline status badge", "data-testid": "offline-badge", children: jsx(Avatar, { sx: { bgcolor: deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) }), jsx(ListItemText, { secondary: jsxs(React__default.Fragment, { children: [jsx(Typography, { className: "profile-name", component: "p", children: user.name }), jsx(Typography, { className: "profile-email", component: "p", children: user.email }), jsxs(Typography, { className: "profile-role", component: "p", children: ["Role: ", user.role] })] }) })] }) }));
+    const renderMenu = (jsxs(Menu, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, slotProps: {
+            paper: {
+                elevation: 0,
+                sx: {
+                    overflow: "visible",
+                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                    mt: 1.5,
+                    "& .MuiAvatar-root": {
+                        width: 32,
+                        height: 32,
+                        ml: -0.5,
+                        mr: 1,
+                    },
+                    "&::before": {
+                        content: '""',
+                        display: "block",
+                        position: "absolute",
+                        top: 0,
+                        right: 14,
+                        width: 10,
+                        height: 10,
+                        bgcolor: "background.paper",
+                        transform: "translateY(-50%) rotate(45deg)",
+                        zIndex: 0,
+                    },
+                },
+            },
+        }, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, children: [profileList, jsx(Divider, {}), jsxs(MenuItem, { onClick: handleSettingsClick, children: [jsx(ListItemIcon, { children: jsx(SettingsOutlinedIcon, { fontSize: "small" }) }), "Settings"] }), jsxs(MenuItem, { onClick: handleProfileClick, children: [jsx(ListItemIcon, { children: jsx(PersonOutlineOutlinedIcon, { fontSize: "small" }) }), "Profile"] }), jsxs(MenuItem, { onClick: handleSignOutClick, children: [jsx(ListItemIcon, { children: jsx(LogoutOutlinedIcon, { fontSize: "small" }) }), "Sign out"] })] }));
+    const mobileMenuId = "primary-account-menu-mobile";
+    const renderMobileMenu = (jsxs(Menu, { anchorEl: mobileMoreAnchorEl, anchorOrigin: {
+            vertical: "top",
+            horizontal: "right",
+        }, id: mobileMenuId, keepMounted: true, transformOrigin: {
+            vertical: "top",
+            horizontal: "right",
+        }, open: isMobileMenuOpen, onClose: handleMobileMenuClose, children: [messageCount !== undefined && (jsxs(MenuItem, { children: [jsx(IconButton, { size: "large", "aria-label": `show ${messageCount} new mails`, sx: { color: '#1e2f97' }, children: jsx(Badge, { badgeContent: messageCount, color: "error", children: jsx(MailIcon, {}) }) }), jsx("p", { children: "Messages" })] })), notificationCount > 0 && (jsxs(MenuItem, { children: [jsx(IconButton, { size: "large", "aria-label": `show ${notificationCount} new notifications`, sx: { color: '#1e2f97' }, children: jsx(Badge, { badgeContent: notificationCount, color: "error", children: jsx(NotificationsActiveOutlined, {}) }) }), jsx("p", { children: "Notifications" })] })), jsxs(MenuItem, { onClick: handleProfileMenuOpen, children: [jsx(IconButton, { size: "large", "aria-label": "account of current user", "aria-controls": "primary-account-menu", "aria-haspopup": "true", sx: { color: '#1e2f97' }, children: isOnline ? (jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Online", "aria-label": "Online status badge", "data-testid": "online-badge", children: jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) })) : (jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Offline", "aria-label": "Offline status badge", "data-testid": "offline-badge", children: jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) })) }), jsx("p", { children: "Profile" })] })] }));
+    return (jsxs(Box, { sx: { flexGrow: 1 }, className: `app-header ${className || ""}`, children: [jsx(AppBar, { sx: {
+                    position: "fixed",
+                    top: 0,
+                    backgroundColor: "#ffffff",
+                }, children: jsxs(Toolbar, { children: [jsx(IconButton, { size: "large", edge: "start", "aria-label": "open drawer", sx: {
+                                mr: 2,
+                                color: '#1e2f97',
+                                '&:hover': {
+                                    backgroundColor: 'rgba(30, 47, 151, 0.04)',
+                                }
+                            }, onClick: handleDrawerToggle, children: isDrawerOpen ? (jsx(MenuOpenIcon, { fontSize: "large" })) : (jsx(MenuIcon, { fontSize: "large" })) }), jsxs(Typography, { variant: "h6", noWrap: true, component: "div", sx: { display: { xs: "none", sm: "block" } }, "data-testid": "var-miner-wrapper", children: [jsx("span", { className: "var", children: finalLogo.first }), jsx("span", { className: "miner", children: finalLogo.second })] }), jsx(Box, { sx: { flexGrow: 1 } }), jsxs(Box, { sx: { display: { xs: "none", md: "flex" } }, children: [notificationCount > 0 && (jsx(IconButton, { size: "large", "aria-label": `show ${notificationCount} new notifications`, sx: {
+                                        color: '#1e2f97',
+                                        '&:hover': {
+                                            backgroundColor: 'rgba(30, 47, 151, 0.04)',
+                                        }
+                                    }, children: jsx(Badge, { badgeContent: notificationCount, color: "error", children: jsx(NotificationsActiveOutlined, {}) }) })), jsx(IconButton, { size: "large", edge: "end", "aria-label": "account of current user", "aria-controls": menuId, "aria-haspopup": "true", onClick: handleProfileMenuOpen, sx: {
+                                        color: '#1e2f97',
+                                        '&:hover': {
+                                            backgroundColor: 'rgba(30, 47, 151, 0.04)',
+                                        }
+                                    }, children: isOnline ? (jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Online", "aria-label": "Online status badge", "data-testid": "online-badge", children: jsx(Avatar, { sx: {
+                                                bgcolor: deepOrange[500],
+                                                width: 20,
+                                                height: 20,
+                                                p: 1,
+                                            }, alt: user.name, title: user.name, src: user.avatar, sizes: "large", children: getInitials() }) })) : (jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Offline", "aria-label": "Offline status badge", "data-testid": "offline-badge", children: jsx(Avatar, { sx: {
+                                                bgcolor: deepOrange[500],
+                                                width: 20,
+                                                height: 20,
+                                                p: 1,
+                                            }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) })] }), jsx(Box, { sx: { display: { xs: "flex", md: "none" } }, children: jsx(IconButton, { size: "large", "aria-label": "show more", "aria-controls": mobileMenuId, "aria-haspopup": "true", onClick: handleMobileMenuOpen, sx: {
+                                    color: '#1e2f97',
+                                    '&:hover': {
+                                        backgroundColor: 'rgba(30, 47, 151, 0.04)',
+                                    }
+                                }, children: jsx(MoreIcon, {}) }) })] }) }), renderMobileMenu, renderMenu] }));
+};
+
+export { AppHeader, DrawerProvider, useDrawer };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/DrawerContext.tsx","../src/AppHeader.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\ninterface DrawerContextType {\r\n  isDrawerOpen: boolean;\r\n  openDrawer: () => void;\r\n  closeDrawer: () => void;\r\n  toggleDrawer: () => void;\r\n}\r\n\r\nconst DrawerContext = React.createContext<DrawerContextType>({\r\n  isDrawerOpen: false,\r\n  openDrawer: () => {},\r\n  closeDrawer: () => {},\r\n  toggleDrawer: () => {},\r\n});\r\n\r\nexport const DrawerProvider = ({ children }: { children: React.ReactNode }) => {\r\n  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);\r\n\r\n  const openDrawer = () => {\r\n    setIsDrawerOpen(true);\r\n  };\r\n\r\n  const closeDrawer = () => {\r\n    setIsDrawerOpen(false);\r\n  };\r\n\r\n  const toggleDrawer = () => {\r\n    setIsDrawerOpen((prev) => !prev);\r\n  };\r\n\r\n  return (\r\n    <DrawerContext.Provider\r\n      value={{ isDrawerOpen, openDrawer, closeDrawer, toggleDrawer }}\r\n    >\r\n      {children}\r\n    </DrawerContext.Provider>\r\n  );\r\n};\r\n\r\nexport const useDrawer = () => React.useContext(DrawerContext);\r\n\r\n","import AccountCircle from \"@mui/icons-material/AccountCircle\";\r\nimport LogoutOutlinedIcon from \"@mui/icons-material/LogoutOutlined\";\r\nimport MailIcon from \"@mui/icons-material/Mail\";\r\nimport MenuIcon from \"@mui/icons-material/Menu\";\r\nimport MenuOpenIcon from \"@mui/icons-material/MenuOpen\";\r\nimport MoreIcon from \"@mui/icons-material/MoreVert\";\r\nimport NotificationsActiveOutlined from \"@mui/icons-material/NotificationsActiveOutlined\";\r\nimport PersonOutlineOutlinedIcon from \"@mui/icons-material/PersonOutlineOutlined\";\r\nimport SettingsOutlinedIcon from \"@mui/icons-material/SettingsOutlined\";\r\nimport {\r\n  AppBar,\r\n  Avatar,\r\n  Badge,\r\n  Box,\r\n  Divider,\r\n  IconButton,\r\n  List,\r\n  ListItem,\r\n  ListItemAvatar,\r\n  ListItemIcon,\r\n  ListItemText,\r\n  Menu,\r\n  MenuItem,\r\n  styled,\r\n  Toolbar,\r\n  Typography,\r\n} from \"@mui/material\";\r\nimport { deepOrange } from \"@mui/material/colors\";\r\nimport React from \"react\";\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { useDrawer } from \"./DrawerContext\";\r\nimport { AppHeaderProps } from \"./types\";\r\nimport \"./styles/Header.scss\";\r\n\r\n// Default routes - can be overridden via props\r\nconst DEFAULT_ROUTES = {\r\n  settings: \"/account/overview\",\r\n  profile: \"/profile\",\r\n  logout: \"/logout\",\r\n};\r\n\r\n// Default logo - can be overridden via props\r\nconst DEFAULT_LOGO = {\r\n  first: \"VAR\",\r\n  second: \"MINER\",\r\n};\r\n\r\nconst AppHeader: React.FC<AppHeaderProps> = ({\r\n  user = {\r\n    name: \"Shivam Kumar\",\r\n    email: \"shivam@redcliffelabs.com\",\r\n    role: \"Lab Technician\",\r\n    initials: \"SK\",\r\n  },\r\n  isOnline = true,\r\n  logo,\r\n  notificationCount = 0,\r\n  messageCount,\r\n  onDrawerToggle,\r\n  routes,\r\n  onSettingsClick,\r\n  onProfileClick,\r\n  onSignOutClick,\r\n  className,\r\n}) => {\r\n  // Merge provided routes with defaults\r\n  const finalRoutes = {\r\n    settings: routes?.settings ?? DEFAULT_ROUTES.settings,\r\n    profile: routes?.profile ?? DEFAULT_ROUTES.profile,\r\n    logout: routes?.logout ?? DEFAULT_ROUTES.logout,\r\n  };\r\n  \r\n  // Use provided logo or default\r\n  const finalLogo = logo ?? DEFAULT_LOGO;\r\n  \r\n  const { isDrawerOpen, toggleDrawer } = useDrawer();\r\n  const navigate = useNavigate();\r\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\r\n  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] =\r\n    React.useState<null | HTMLElement>(null);\r\n\r\n  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);\r\n\r\n  const OnlineBadge = styled(Badge)(({ theme }) => ({\r\n    \"& .MuiBadge-badge\": {\r\n      backgroundColor: \"#44b700\",\r\n      color: \"#44b700\",\r\n      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,\r\n      width: 12,\r\n      height: 12,\r\n      borderRadius: \"50%\",\r\n    },\r\n  }));\r\n\r\n  const OfflineBadge = styled(Badge)(({ theme }) => ({\r\n    \"& .MuiBadge-badge\": {\r\n      backgroundColor: \"gray\",\r\n      color: \"gray\",\r\n      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,\r\n      width: 12,\r\n      height: 12,\r\n      borderRadius: \"50%\",\r\n    },\r\n  }));\r\n\r\n  const handleDrawerToggle = () => {\r\n    toggleDrawer();\r\n    onDrawerToggle?.();\r\n  };\r\n\r\n  const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\r\n    setAnchorEl(event.currentTarget);\r\n  };\r\n\r\n  const handleMobileMenuClose = () => {\r\n    setMobileMoreAnchorEl(null);\r\n  };\r\n\r\n  const handleMobileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\r\n    setMobileMoreAnchorEl(event.currentTarget);\r\n  };\r\n\r\n  const open = Boolean(anchorEl);\r\n\r\n  const handleClose = () => {\r\n    setAnchorEl(null);\r\n  };\r\n\r\n  const handleSettingsClick = () => {\r\n    handleClose();\r\n    if (onSettingsClick) {\r\n      onSettingsClick();\r\n    } else {\r\n      navigate(finalRoutes.settings);\r\n    }\r\n  };\r\n\r\n  const handleProfileClick = () => {\r\n    handleClose();\r\n    if (onProfileClick) {\r\n      onProfileClick();\r\n    } else {\r\n      navigate(finalRoutes.profile);\r\n    }\r\n  };\r\n\r\n  const handleSignOutClick = () => {\r\n    handleClose();\r\n    if (onSignOutClick) {\r\n      onSignOutClick();\r\n    } else {\r\n      localStorage.clear();\r\n      navigate(finalRoutes.logout);\r\n    }\r\n  };\r\n\r\n  const menuId = \"primary-account-menu\";\r\n\r\n  const getInitials = () => {\r\n    if (user.initials) return user.initials;\r\n    return user.name\r\n      .split(\" \")\r\n      .map((n) => n[0])\r\n      .join(\"\")\r\n      .toUpperCase()\r\n      .slice(0, 2);\r\n  };\r\n\r\n  const profileList = (\r\n    <List\r\n      className=\"profile-menu-section\"\r\n      sx={{\r\n        width: \"100%\",\r\n        maxWidth: 360,\r\n        pointerEvents: \"none\",\r\n      }}\r\n      component=\"div\"\r\n      aria-hidden=\"true\"\r\n      tabIndex={-1}\r\n    >\r\n      <ListItem alignItems=\"flex-start\" className=\"profile-menu-item\">\r\n        <ListItemAvatar>\r\n          {isOnline ? (\r\n            <OnlineBadge\r\n              overlap=\"circular\"\r\n              anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n              variant=\"dot\"\r\n              title=\"Online\"\r\n              aria-label=\"Online status badge\"\r\n              data-testid=\"online-badge\"\r\n            >\r\n              <Avatar\r\n                sx={{ bgcolor: deepOrange[500] }}\r\n                alt={user.name}\r\n                title={user.name}\r\n                src={user.avatar}\r\n              >\r\n                {getInitials()}\r\n              </Avatar>\r\n            </OnlineBadge>\r\n          ) : (\r\n            <OfflineBadge\r\n              overlap=\"circular\"\r\n              anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n              variant=\"dot\"\r\n              title=\"Offline\"\r\n              aria-label=\"Offline status badge\"\r\n              data-testid=\"offline-badge\"\r\n            >\r\n              <Avatar\r\n                sx={{ bgcolor: deepOrange[500] }}\r\n                alt={user.name}\r\n                title={user.name}\r\n                src={user.avatar}\r\n              >\r\n                {getInitials()}\r\n              </Avatar>\r\n            </OfflineBadge>\r\n          )}\r\n        </ListItemAvatar>\r\n        <ListItemText\r\n          secondary={\r\n            <React.Fragment>\r\n              <Typography className=\"profile-name\" component=\"p\">\r\n                {user.name}\r\n              </Typography>\r\n              <Typography className=\"profile-email\" component=\"p\">\r\n                {user.email}\r\n              </Typography>\r\n              <Typography className=\"profile-role\" component=\"p\">\r\n                Role: {user.role}\r\n              </Typography>\r\n            </React.Fragment>\r\n          }\r\n        />\r\n      </ListItem>\r\n    </List>\r\n  );\r\n\r\n  const renderMenu = (\r\n    <Menu\r\n      anchorEl={anchorEl}\r\n      id=\"account-menu\"\r\n      open={open}\r\n      onClose={handleClose}\r\n      onClick={handleClose}\r\n      slotProps={{\r\n        paper: {\r\n          elevation: 0,\r\n          sx: {\r\n            overflow: \"visible\",\r\n            filter: \"drop-shadow(0px 2px 8px rgba(0,0,0,0.32))\",\r\n            mt: 1.5,\r\n            \"& .MuiAvatar-root\": {\r\n              width: 32,\r\n              height: 32,\r\n              ml: -0.5,\r\n              mr: 1,\r\n            },\r\n            \"&::before\": {\r\n              content: '\"\"',\r\n              display: \"block\",\r\n              position: \"absolute\",\r\n              top: 0,\r\n              right: 14,\r\n              width: 10,\r\n              height: 10,\r\n              bgcolor: \"background.paper\",\r\n              transform: \"translateY(-50%) rotate(45deg)\",\r\n              zIndex: 0,\r\n            },\r\n          },\r\n        },\r\n      }}\r\n      transformOrigin={{ horizontal: \"right\", vertical: \"top\" }}\r\n      anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n    >\r\n      {profileList}\r\n      <Divider />\r\n      <MenuItem onClick={handleSettingsClick}>\r\n        <ListItemIcon>\r\n          <SettingsOutlinedIcon fontSize=\"small\" />\r\n        </ListItemIcon>\r\n        Settings\r\n      </MenuItem>\r\n      <MenuItem onClick={handleProfileClick}>\r\n        <ListItemIcon>\r\n          <PersonOutlineOutlinedIcon fontSize=\"small\" />\r\n        </ListItemIcon>\r\n        Profile\r\n      </MenuItem>\r\n      <MenuItem onClick={handleSignOutClick}>\r\n        <ListItemIcon>\r\n          <LogoutOutlinedIcon fontSize=\"small\" />\r\n        </ListItemIcon>\r\n        Sign out\r\n      </MenuItem>\r\n    </Menu>\r\n  );\r\n\r\n  const mobileMenuId = \"primary-account-menu-mobile\";\r\n  const renderMobileMenu = (\r\n    <Menu\r\n      anchorEl={mobileMoreAnchorEl}\r\n      anchorOrigin={{\r\n        vertical: \"top\",\r\n        horizontal: \"right\",\r\n      }}\r\n      id={mobileMenuId}\r\n      keepMounted\r\n      transformOrigin={{\r\n        vertical: \"top\",\r\n        horizontal: \"right\",\r\n      }}\r\n      open={isMobileMenuOpen}\r\n      onClose={handleMobileMenuClose}\r\n    >\r\n      {messageCount !== undefined && (\r\n        <MenuItem>\r\n          <IconButton \r\n            size=\"large\" \r\n            aria-label={`show ${messageCount} new mails`}\r\n            sx={{ color: '#1e2f97' }}\r\n          >\r\n            <Badge badgeContent={messageCount} color=\"error\">\r\n              <MailIcon />\r\n            </Badge>\r\n          </IconButton>\r\n          <p>Messages</p>\r\n        </MenuItem>\r\n      )}\r\n      {notificationCount > 0 && (\r\n        <MenuItem>\r\n          <IconButton\r\n            size=\"large\"\r\n            aria-label={`show ${notificationCount} new notifications`}\r\n            sx={{ color: '#1e2f97' }}\r\n          >\r\n            <Badge badgeContent={notificationCount} color=\"error\">\r\n              <NotificationsActiveOutlined />\r\n            </Badge>\r\n          </IconButton>\r\n          <p>Notifications</p>\r\n        </MenuItem>\r\n      )}\r\n      <MenuItem onClick={handleProfileMenuOpen}>\r\n        <IconButton\r\n          size=\"large\"\r\n          aria-label=\"account of current user\"\r\n          aria-controls=\"primary-account-menu\"\r\n          aria-haspopup=\"true\"\r\n          sx={{ color: '#1e2f97' }}\r\n        >\r\n          {isOnline ? (\r\n            <OnlineBadge\r\n              overlap=\"circular\"\r\n              anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n              variant=\"dot\"\r\n              title=\"Online\"\r\n              aria-label=\"Online status badge\"\r\n              data-testid=\"online-badge\"\r\n            >\r\n              <AccountCircle\r\n                titleAccess={user.name}\r\n                aria-label=\"User avatar\"\r\n              />\r\n            </OnlineBadge>\r\n          ) : (\r\n            <OfflineBadge\r\n              overlap=\"circular\"\r\n              anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n              variant=\"dot\"\r\n              title=\"Offline\"\r\n              aria-label=\"Offline status badge\"\r\n              data-testid=\"offline-badge\"\r\n            >\r\n              <AccountCircle\r\n                titleAccess={user.name}\r\n                aria-label=\"User avatar\"\r\n              />\r\n            </OfflineBadge>\r\n          )}\r\n        </IconButton>\r\n        <p>Profile</p>\r\n      </MenuItem>\r\n    </Menu>\r\n  );\r\n\r\n  return (\r\n    <Box sx={{ flexGrow: 1 }} className={`app-header ${className || \"\"}`}>\r\n      <AppBar\r\n        sx={{\r\n          position: \"fixed\",\r\n          top: 0,\r\n          backgroundColor: \"#ffffff\",\r\n        }}\r\n      >\r\n        <Toolbar>\r\n          <IconButton\r\n            size=\"large\"\r\n            edge=\"start\"\r\n            aria-label=\"open drawer\"\r\n            sx={{ \r\n              mr: 2,\r\n              color: '#1e2f97',\r\n              '&:hover': {\r\n                backgroundColor: 'rgba(30, 47, 151, 0.04)',\r\n              }\r\n            }}\r\n            onClick={handleDrawerToggle}\r\n          >\r\n            {isDrawerOpen ? (\r\n              <MenuOpenIcon fontSize={\"large\"} />\r\n            ) : (\r\n              <MenuIcon fontSize={\"large\"} />\r\n            )}\r\n          </IconButton>\r\n          <Typography\r\n            variant=\"h6\"\r\n            noWrap\r\n            component=\"div\"\r\n            sx={{ display: { xs: \"none\", sm: \"block\" } }}\r\n            data-testid=\"var-miner-wrapper\"\r\n          >\r\n            <span className=\"var\">{finalLogo.first}</span>\r\n            <span className=\"miner\">{finalLogo.second}</span>\r\n          </Typography>\r\n          <Box sx={{ flexGrow: 1 }} />\r\n          <Box sx={{ display: { xs: \"none\", md: \"flex\" } }}>\r\n            {notificationCount > 0 && (\r\n              <IconButton\r\n                size=\"large\"\r\n                aria-label={`show ${notificationCount} new notifications`}\r\n                sx={{\r\n                  color: '#1e2f97',\r\n                  '&:hover': {\r\n                    backgroundColor: 'rgba(30, 47, 151, 0.04)',\r\n                  }\r\n                }}\r\n              >\r\n                <Badge badgeContent={notificationCount} color=\"error\">\r\n                  <NotificationsActiveOutlined />\r\n                </Badge>\r\n              </IconButton>\r\n            )}\r\n            <IconButton\r\n              size=\"large\"\r\n              edge=\"end\"\r\n              aria-label=\"account of current user\"\r\n              aria-controls={menuId}\r\n              aria-haspopup=\"true\"\r\n              onClick={handleProfileMenuOpen}\r\n              sx={{\r\n                color: '#1e2f97',\r\n                '&:hover': {\r\n                  backgroundColor: 'rgba(30, 47, 151, 0.04)',\r\n                }\r\n              }}\r\n            >\r\n              {isOnline ? (\r\n                <OnlineBadge\r\n                  overlap=\"circular\"\r\n                  anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n                  variant=\"dot\"\r\n                  title=\"Online\"\r\n                  aria-label=\"Online status badge\"\r\n                  data-testid=\"online-badge\"\r\n                >\r\n                  <Avatar\r\n                    sx={{\r\n                      bgcolor: deepOrange[500],\r\n                      width: 20,\r\n                      height: 20,\r\n                      p: 1,\r\n                    }}\r\n                    alt={user.name}\r\n                    title={user.name}\r\n                    src={user.avatar}\r\n                    sizes=\"large\"\r\n                  >\r\n                    {getInitials()}\r\n                  </Avatar>\r\n                </OnlineBadge>\r\n              ) : (\r\n                <OfflineBadge\r\n                  overlap=\"circular\"\r\n                  anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n                  variant=\"dot\"\r\n                  title=\"Offline\"\r\n                  aria-label=\"Offline status badge\"\r\n                  data-testid=\"offline-badge\"\r\n                >\r\n                  <Avatar\r\n                    sx={{\r\n                      bgcolor: deepOrange[500],\r\n                      width: 20,\r\n                      height: 20,\r\n                      p: 1,\r\n                    }}\r\n                    alt={user.name}\r\n                    title={user.name}\r\n                    src={user.avatar}\r\n                  >\r\n                    {getInitials()}\r\n                  </Avatar>\r\n                </OfflineBadge>\r\n              )}\r\n            </IconButton>\r\n          </Box>\r\n          <Box sx={{ display: { xs: \"flex\", md: \"none\" } }}>\r\n            <IconButton\r\n              size=\"large\"\r\n              aria-label=\"show more\"\r\n              aria-controls={mobileMenuId}\r\n              aria-haspopup=\"true\"\r\n              onClick={handleMobileMenuOpen}\r\n              sx={{\r\n                color: '#1e2f97',\r\n                '&:hover': {\r\n                  backgroundColor: 'rgba(30, 47, 151, 0.04)',\r\n                }\r\n              }}\r\n            >\r\n              <MoreIcon />\r\n            </IconButton>\r\n          </Box>\r\n        </Toolbar>\r\n      </AppBar>\r\n      {renderMobileMenu}\r\n      {renderMenu}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default AppHeader;\r\n\r\n"],"names":["_jsx","React","_jsxs"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,246 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var AccountCircle = require('@mui/icons-material/AccountCircle');
+var LogoutOutlinedIcon = require('@mui/icons-material/LogoutOutlined');
+var MailIcon = require('@mui/icons-material/Mail');
+var MenuIcon = require('@mui/icons-material/Menu');
+var MenuOpenIcon = require('@mui/icons-material/MenuOpen');
+var MoreIcon = require('@mui/icons-material/MoreVert');
+var NotificationsActiveOutlined = require('@mui/icons-material/NotificationsActiveOutlined');
+var PersonOutlineOutlinedIcon = require('@mui/icons-material/PersonOutlineOutlined');
+var SettingsOutlinedIcon = require('@mui/icons-material/SettingsOutlined');
+var material = require('@mui/material');
+var colors = require('@mui/material/colors');
+var React = require('react');
+var reactRouterDom = require('react-router-dom');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DrawerContext = React__namespace.createContext({
+    isDrawerOpen: false,
+    openDrawer: () => { },
+    closeDrawer: () => { },
+    toggleDrawer: () => { },
+});
+const DrawerProvider = ({ children }) => {
+    const [isDrawerOpen, setIsDrawerOpen] = React__namespace.useState(false);
+    const openDrawer = () => {
+        setIsDrawerOpen(true);
+    };
+    const closeDrawer = () => {
+        setIsDrawerOpen(false);
+    };
+    const toggleDrawer = () => {
+        setIsDrawerOpen((prev) => !prev);
+    };
+    return (jsxRuntime.jsx(DrawerContext.Provider, { value: { isDrawerOpen, openDrawer, closeDrawer, toggleDrawer }, children: children }));
+};
+const useDrawer = () => React__namespace.useContext(DrawerContext);
+
+// Default routes - can be overridden via props
+const DEFAULT_ROUTES = {
+    settings: "/account/overview",
+    profile: "/profile",
+    logout: "/logout",
+};
+// Default logo - can be overridden via props
+const DEFAULT_LOGO = {
+    first: "VAR",
+    second: "MINER",
+};
+const AppHeader = ({ user = {
+    name: "Shivam Kumar",
+    email: "shivam@redcliffelabs.com",
+    role: "Lab Technician",
+    initials: "SK",
+}, isOnline = true, logo, notificationCount = 0, messageCount, onDrawerToggle, routes, onSettingsClick, onProfileClick, onSignOutClick, className, }) => {
+    // Merge provided routes with defaults
+    const finalRoutes = {
+        settings: routes?.settings ?? DEFAULT_ROUTES.settings,
+        profile: routes?.profile ?? DEFAULT_ROUTES.profile,
+        logout: routes?.logout ?? DEFAULT_ROUTES.logout,
+    };
+    // Use provided logo or default
+    const finalLogo = logo ?? DEFAULT_LOGO;
+    const { isDrawerOpen, toggleDrawer } = useDrawer();
+    const navigate = reactRouterDom.useNavigate();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
+    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+    const OnlineBadge = material.styled(material.Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "#44b700",
+            color: "#44b700",
+            boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+            width: 12,
+            height: 12,
+            borderRadius: "50%",
+        },
+    }));
+    const OfflineBadge = material.styled(material.Badge)(({ theme }) => ({
+        "& .MuiBadge-badge": {
+            backgroundColor: "gray",
+            color: "gray",
+            boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+            width: 12,
+            height: 12,
+            borderRadius: "50%",
+        },
+    }));
+    const handleDrawerToggle = () => {
+        toggleDrawer();
+        onDrawerToggle?.();
+    };
+    const handleProfileMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMobileMenuClose = () => {
+        setMobileMoreAnchorEl(null);
+    };
+    const handleMobileMenuOpen = (event) => {
+        setMobileMoreAnchorEl(event.currentTarget);
+    };
+    const open = Boolean(anchorEl);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSettingsClick = () => {
+        handleClose();
+        if (onSettingsClick) {
+            onSettingsClick();
+        }
+        else {
+            navigate(finalRoutes.settings);
+        }
+    };
+    const handleProfileClick = () => {
+        handleClose();
+        if (onProfileClick) {
+            onProfileClick();
+        }
+        else {
+            navigate(finalRoutes.profile);
+        }
+    };
+    const handleSignOutClick = () => {
+        handleClose();
+        if (onSignOutClick) {
+            onSignOutClick();
+        }
+        else {
+            localStorage.clear();
+            navigate(finalRoutes.logout);
+        }
+    };
+    const menuId = "primary-account-menu";
+    const getInitials = () => {
+        if (user.initials)
+            return user.initials;
+        return user.name
+            .split(" ")
+            .map((n) => n[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2);
+    };
+    const profileList = (jsxRuntime.jsx(material.List, { className: "profile-menu-section", sx: {
+            width: "100%",
+            maxWidth: 360,
+            pointerEvents: "none",
+        }, component: "div", "aria-hidden": "true", tabIndex: -1, children: jsxRuntime.jsxs(material.ListItem, { alignItems: "flex-start", className: "profile-menu-item", children: [jsxRuntime.jsx(material.ListItemAvatar, { children: isOnline ? (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Online", "aria-label": "Online status badge", "data-testid": "online-badge", children: jsxRuntime.jsx(material.Avatar, { sx: { bgcolor: colors.deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) : (jsxRuntime.jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Offline", "aria-label": "Offline status badge", "data-testid": "offline-badge", children: jsxRuntime.jsx(material.Avatar, { sx: { bgcolor: colors.deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) }), jsxRuntime.jsx(material.ListItemText, { secondary: jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(material.Typography, { className: "profile-name", component: "p", children: user.name }), jsxRuntime.jsx(material.Typography, { className: "profile-email", component: "p", children: user.email }), jsxRuntime.jsxs(material.Typography, { className: "profile-role", component: "p", children: ["Role: ", user.role] })] }) })] }) }));
+    const renderMenu = (jsxRuntime.jsxs(material.Menu, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, slotProps: {
+            paper: {
+                elevation: 0,
+                sx: {
+                    overflow: "visible",
+                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                    mt: 1.5,
+                    "& .MuiAvatar-root": {
+                        width: 32,
+                        height: 32,
+                        ml: -0.5,
+                        mr: 1,
+                    },
+                    "&::before": {
+                        content: '""',
+                        display: "block",
+                        position: "absolute",
+                        top: 0,
+                        right: 14,
+                        width: 10,
+                        height: 10,
+                        bgcolor: "background.paper",
+                        transform: "translateY(-50%) rotate(45deg)",
+                        zIndex: 0,
+                    },
+                },
+            },
+        }, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, children: [profileList, jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.MenuItem, { onClick: handleSettingsClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(SettingsOutlinedIcon, { fontSize: "small" }) }), "Settings"] }), jsxRuntime.jsxs(material.MenuItem, { onClick: handleProfileClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(PersonOutlineOutlinedIcon, { fontSize: "small" }) }), "Profile"] }), jsxRuntime.jsxs(material.MenuItem, { onClick: handleSignOutClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(LogoutOutlinedIcon, { fontSize: "small" }) }), "Sign out"] })] }));
+    const mobileMenuId = "primary-account-menu-mobile";
+    const renderMobileMenu = (jsxRuntime.jsxs(material.Menu, { anchorEl: mobileMoreAnchorEl, anchorOrigin: {
+            vertical: "top",
+            horizontal: "right",
+        }, id: mobileMenuId, keepMounted: true, transformOrigin: {
+            vertical: "top",
+            horizontal: "right",
+        }, open: isMobileMenuOpen, onClose: handleMobileMenuClose, children: [messageCount !== undefined && (jsxRuntime.jsxs(material.MenuItem, { children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": `show ${messageCount} new mails`, sx: { color: '#1e2f97' }, children: jsxRuntime.jsx(material.Badge, { badgeContent: messageCount, color: "error", children: jsxRuntime.jsx(MailIcon, {}) }) }), jsxRuntime.jsx("p", { children: "Messages" })] })), notificationCount > 0 && (jsxRuntime.jsxs(material.MenuItem, { children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": `show ${notificationCount} new notifications`, sx: { color: '#1e2f97' }, children: jsxRuntime.jsx(material.Badge, { badgeContent: notificationCount, color: "error", children: jsxRuntime.jsx(NotificationsActiveOutlined, {}) }) }), jsxRuntime.jsx("p", { children: "Notifications" })] })), jsxRuntime.jsxs(material.MenuItem, { onClick: handleProfileMenuOpen, children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": "account of current user", "aria-controls": "primary-account-menu", "aria-haspopup": "true", sx: { color: '#1e2f97' }, children: isOnline ? (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Online", "aria-label": "Online status badge", "data-testid": "online-badge", children: jsxRuntime.jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) })) : (jsxRuntime.jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Offline", "aria-label": "Offline status badge", "data-testid": "offline-badge", children: jsxRuntime.jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) })) }), jsxRuntime.jsx("p", { children: "Profile" })] })] }));
+    return (jsxRuntime.jsxs(material.Box, { sx: { flexGrow: 1 }, className: `app-header ${className || ""}`, children: [jsxRuntime.jsx(material.AppBar, { sx: {
+                    position: "fixed",
+                    top: 0,
+                    backgroundColor: "#ffffff",
+                }, children: jsxRuntime.jsxs(material.Toolbar, { children: [jsxRuntime.jsx(material.IconButton, { size: "large", edge: "start", "aria-label": "open drawer", sx: {
+                                mr: 2,
+                                color: '#1e2f97',
+                                '&:hover': {
+                                    backgroundColor: 'rgba(30, 47, 151, 0.04)',
+                                }
+                            }, onClick: handleDrawerToggle, children: isDrawerOpen ? (jsxRuntime.jsx(MenuOpenIcon, { fontSize: "large" })) : (jsxRuntime.jsx(MenuIcon, { fontSize: "large" })) }), jsxRuntime.jsxs(material.Typography, { variant: "h6", noWrap: true, component: "div", sx: { display: { xs: "none", sm: "block" } }, "data-testid": "var-miner-wrapper", children: [jsxRuntime.jsx("span", { className: "var", children: finalLogo.first }), jsxRuntime.jsx("span", { className: "miner", children: finalLogo.second })] }), jsxRuntime.jsx(material.Box, { sx: { flexGrow: 1 } }), jsxRuntime.jsxs(material.Box, { sx: { display: { xs: "none", md: "flex" } }, children: [notificationCount > 0 && (jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": `show ${notificationCount} new notifications`, sx: {
+                                        color: '#1e2f97',
+                                        '&:hover': {
+                                            backgroundColor: 'rgba(30, 47, 151, 0.04)',
+                                        }
+                                    }, children: jsxRuntime.jsx(material.Badge, { badgeContent: notificationCount, color: "error", children: jsxRuntime.jsx(NotificationsActiveOutlined, {}) }) })), jsxRuntime.jsx(material.IconButton, { size: "large", edge: "end", "aria-label": "account of current user", "aria-controls": menuId, "aria-haspopup": "true", onClick: handleProfileMenuOpen, sx: {
+                                        color: '#1e2f97',
+                                        '&:hover': {
+                                            backgroundColor: 'rgba(30, 47, 151, 0.04)',
+                                        }
+                                    }, children: isOnline ? (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Online", "aria-label": "Online status badge", "data-testid": "online-badge", children: jsxRuntime.jsx(material.Avatar, { sx: {
+                                                bgcolor: colors.deepOrange[500],
+                                                width: 20,
+                                                height: 20,
+                                                p: 1,
+                                            }, alt: user.name, title: user.name, src: user.avatar, sizes: "large", children: getInitials() }) })) : (jsxRuntime.jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Offline", "aria-label": "Offline status badge", "data-testid": "offline-badge", children: jsxRuntime.jsx(material.Avatar, { sx: {
+                                                bgcolor: colors.deepOrange[500],
+                                                width: 20,
+                                                height: 20,
+                                                p: 1,
+                                            }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) })] }), jsxRuntime.jsx(material.Box, { sx: { display: { xs: "flex", md: "none" } }, children: jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": "show more", "aria-controls": mobileMenuId, "aria-haspopup": "true", onClick: handleMobileMenuOpen, sx: {
+                                    color: '#1e2f97',
+                                    '&:hover': {
+                                        backgroundColor: 'rgba(30, 47, 151, 0.04)',
+                                    }
+                                }, children: jsxRuntime.jsx(MoreIcon, {}) }) })] }) }), renderMobileMenu, renderMenu] }));
+};
+
+exports.AppHeader = AppHeader;
+exports.DrawerProvider = DrawerProvider;
+exports.useDrawer = useDrawer;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/DrawerContext.tsx","../src/AppHeader.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\ninterface DrawerContextType {\r\n  isDrawerOpen: boolean;\r\n  openDrawer: () => void;\r\n  closeDrawer: () => void;\r\n  toggleDrawer: () => void;\r\n}\r\n\r\nconst DrawerContext = React.createContext<DrawerContextType>({\r\n  isDrawerOpen: false,\r\n  openDrawer: () => {},\r\n  closeDrawer: () => {},\r\n  toggleDrawer: () => {},\r\n});\r\n\r\nexport const DrawerProvider = ({ children }: { children: React.ReactNode }) => {\r\n  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);\r\n\r\n  const openDrawer = () => {\r\n    setIsDrawerOpen(true);\r\n  };\r\n\r\n  const closeDrawer = () => {\r\n    setIsDrawerOpen(false);\r\n  };\r\n\r\n  const toggleDrawer = () => {\r\n    setIsDrawerOpen((prev) => !prev);\r\n  };\r\n\r\n  return (\r\n    <DrawerContext.Provider\r\n      value={{ isDrawerOpen, openDrawer, closeDrawer, toggleDrawer }}\r\n    >\r\n      {children}\r\n    </DrawerContext.Provider>\r\n  );\r\n};\r\n\r\nexport const useDrawer = () => React.useContext(DrawerContext);\r\n\r\n","import AccountCircle from \"@mui/icons-material/AccountCircle\";\r\nimport LogoutOutlinedIcon from \"@mui/icons-material/LogoutOutlined\";\r\nimport MailIcon from \"@mui/icons-material/Mail\";\r\nimport MenuIcon from \"@mui/icons-material/Menu\";\r\nimport MenuOpenIcon from \"@mui/icons-material/MenuOpen\";\r\nimport MoreIcon from \"@mui/icons-material/MoreVert\";\r\nimport NotificationsActiveOutlined from \"@mui/icons-material/NotificationsActiveOutlined\";\r\nimport PersonOutlineOutlinedIcon from \"@mui/icons-material/PersonOutlineOutlined\";\r\nimport SettingsOutlinedIcon from \"@mui/icons-material/SettingsOutlined\";\r\nimport {\r\n  AppBar,\r\n  Avatar,\r\n  Badge,\r\n  Box,\r\n  Divider,\r\n  IconButton,\r\n  List,\r\n  ListItem,\r\n  ListItemAvatar,\r\n  ListItemIcon,\r\n  ListItemText,\r\n  Menu,\r\n  MenuItem,\r\n  styled,\r\n  Toolbar,\r\n  Typography,\r\n} from \"@mui/material\";\r\nimport { deepOrange } from \"@mui/material/colors\";\r\nimport React from \"react\";\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { useDrawer } from \"./DrawerContext\";\r\nimport { AppHeaderProps } from \"./types\";\r\nimport \"./styles/Header.scss\";\r\n\r\n// Default routes - can be overridden via props\r\nconst DEFAULT_ROUTES = {\r\n  settings: \"/account/overview\",\r\n  profile: \"/profile\",\r\n  logout: \"/logout\",\r\n};\r\n\r\n// Default logo - can be overridden via props\r\nconst DEFAULT_LOGO = {\r\n  first: \"VAR\",\r\n  second: \"MINER\",\r\n};\r\n\r\nconst AppHeader: React.FC<AppHeaderProps> = ({\r\n  user = {\r\n    name: \"Shivam Kumar\",\r\n    email: \"shivam@redcliffelabs.com\",\r\n    role: \"Lab Technician\",\r\n    initials: \"SK\",\r\n  },\r\n  isOnline = true,\r\n  logo,\r\n  notificationCount = 0,\r\n  messageCount,\r\n  onDrawerToggle,\r\n  routes,\r\n  onSettingsClick,\r\n  onProfileClick,\r\n  onSignOutClick,\r\n  className,\r\n}) => {\r\n  // Merge provided routes with defaults\r\n  const finalRoutes = {\r\n    settings: routes?.settings ?? DEFAULT_ROUTES.settings,\r\n    profile: routes?.profile ?? DEFAULT_ROUTES.profile,\r\n    logout: routes?.logout ?? DEFAULT_ROUTES.logout,\r\n  };\r\n  \r\n  // Use provided logo or default\r\n  const finalLogo = logo ?? DEFAULT_LOGO;\r\n  \r\n  const { isDrawerOpen, toggleDrawer } = useDrawer();\r\n  const navigate = useNavigate();\r\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\r\n  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] =\r\n    React.useState<null | HTMLElement>(null);\r\n\r\n  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);\r\n\r\n  const OnlineBadge = styled(Badge)(({ theme }) => ({\r\n    \"& .MuiBadge-badge\": {\r\n      backgroundColor: \"#44b700\",\r\n      color: \"#44b700\",\r\n      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,\r\n      width: 12,\r\n      height: 12,\r\n      borderRadius: \"50%\",\r\n    },\r\n  }));\r\n\r\n  const OfflineBadge = styled(Badge)(({ theme }) => ({\r\n    \"& .MuiBadge-badge\": {\r\n      backgroundColor: \"gray\",\r\n      color: \"gray\",\r\n      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,\r\n      width: 12,\r\n      height: 12,\r\n      borderRadius: \"50%\",\r\n    },\r\n  }));\r\n\r\n  const handleDrawerToggle = () => {\r\n    toggleDrawer();\r\n    onDrawerToggle?.();\r\n  };\r\n\r\n  const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\r\n    setAnchorEl(event.currentTarget);\r\n  };\r\n\r\n  const handleMobileMenuClose = () => {\r\n    setMobileMoreAnchorEl(null);\r\n  };\r\n\r\n  const handleMobileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\r\n    setMobileMoreAnchorEl(event.currentTarget);\r\n  };\r\n\r\n  const open = Boolean(anchorEl);\r\n\r\n  const handleClose = () => {\r\n    setAnchorEl(null);\r\n  };\r\n\r\n  const handleSettingsClick = () => {\r\n    handleClose();\r\n    if (onSettingsClick) {\r\n      onSettingsClick();\r\n    } else {\r\n      navigate(finalRoutes.settings);\r\n    }\r\n  };\r\n\r\n  const handleProfileClick = () => {\r\n    handleClose();\r\n    if (onProfileClick) {\r\n      onProfileClick();\r\n    } else {\r\n      navigate(finalRoutes.profile);\r\n    }\r\n  };\r\n\r\n  const handleSignOutClick = () => {\r\n    handleClose();\r\n    if (onSignOutClick) {\r\n      onSignOutClick();\r\n    } else {\r\n      localStorage.clear();\r\n      navigate(finalRoutes.logout);\r\n    }\r\n  };\r\n\r\n  const menuId = \"primary-account-menu\";\r\n\r\n  const getInitials = () => {\r\n    if (user.initials) return user.initials;\r\n    return user.name\r\n      .split(\" \")\r\n      .map((n) => n[0])\r\n      .join(\"\")\r\n      .toUpperCase()\r\n      .slice(0, 2);\r\n  };\r\n\r\n  const profileList = (\r\n    <List\r\n      className=\"profile-menu-section\"\r\n      sx={{\r\n        width: \"100%\",\r\n        maxWidth: 360,\r\n        pointerEvents: \"none\",\r\n      }}\r\n      component=\"div\"\r\n      aria-hidden=\"true\"\r\n      tabIndex={-1}\r\n    >\r\n      <ListItem alignItems=\"flex-start\" className=\"profile-menu-item\">\r\n        <ListItemAvatar>\r\n          {isOnline ? (\r\n            <OnlineBadge\r\n              overlap=\"circular\"\r\n              anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n              variant=\"dot\"\r\n              title=\"Online\"\r\n              aria-label=\"Online status badge\"\r\n              data-testid=\"online-badge\"\r\n            >\r\n              <Avatar\r\n                sx={{ bgcolor: deepOrange[500] }}\r\n                alt={user.name}\r\n                title={user.name}\r\n                src={user.avatar}\r\n              >\r\n                {getInitials()}\r\n              </Avatar>\r\n            </OnlineBadge>\r\n          ) : (\r\n            <OfflineBadge\r\n              overlap=\"circular\"\r\n              anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n              variant=\"dot\"\r\n              title=\"Offline\"\r\n              aria-label=\"Offline status badge\"\r\n              data-testid=\"offline-badge\"\r\n            >\r\n              <Avatar\r\n                sx={{ bgcolor: deepOrange[500] }}\r\n                alt={user.name}\r\n                title={user.name}\r\n                src={user.avatar}\r\n              >\r\n                {getInitials()}\r\n              </Avatar>\r\n            </OfflineBadge>\r\n          )}\r\n        </ListItemAvatar>\r\n        <ListItemText\r\n          secondary={\r\n            <React.Fragment>\r\n              <Typography className=\"profile-name\" component=\"p\">\r\n                {user.name}\r\n              </Typography>\r\n              <Typography className=\"profile-email\" component=\"p\">\r\n                {user.email}\r\n              </Typography>\r\n              <Typography className=\"profile-role\" component=\"p\">\r\n                Role: {user.role}\r\n              </Typography>\r\n            </React.Fragment>\r\n          }\r\n        />\r\n      </ListItem>\r\n    </List>\r\n  );\r\n\r\n  const renderMenu = (\r\n    <Menu\r\n      anchorEl={anchorEl}\r\n      id=\"account-menu\"\r\n      open={open}\r\n      onClose={handleClose}\r\n      onClick={handleClose}\r\n      slotProps={{\r\n        paper: {\r\n          elevation: 0,\r\n          sx: {\r\n            overflow: \"visible\",\r\n            filter: \"drop-shadow(0px 2px 8px rgba(0,0,0,0.32))\",\r\n            mt: 1.5,\r\n            \"& .MuiAvatar-root\": {\r\n              width: 32,\r\n              height: 32,\r\n              ml: -0.5,\r\n              mr: 1,\r\n            },\r\n            \"&::before\": {\r\n              content: '\"\"',\r\n              display: \"block\",\r\n              position: \"absolute\",\r\n              top: 0,\r\n              right: 14,\r\n              width: 10,\r\n              height: 10,\r\n              bgcolor: \"background.paper\",\r\n              transform: \"translateY(-50%) rotate(45deg)\",\r\n              zIndex: 0,\r\n            },\r\n          },\r\n        },\r\n      }}\r\n      transformOrigin={{ horizontal: \"right\", vertical: \"top\" }}\r\n      anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n    >\r\n      {profileList}\r\n      <Divider />\r\n      <MenuItem onClick={handleSettingsClick}>\r\n        <ListItemIcon>\r\n          <SettingsOutlinedIcon fontSize=\"small\" />\r\n        </ListItemIcon>\r\n        Settings\r\n      </MenuItem>\r\n      <MenuItem onClick={handleProfileClick}>\r\n        <ListItemIcon>\r\n          <PersonOutlineOutlinedIcon fontSize=\"small\" />\r\n        </ListItemIcon>\r\n        Profile\r\n      </MenuItem>\r\n      <MenuItem onClick={handleSignOutClick}>\r\n        <ListItemIcon>\r\n          <LogoutOutlinedIcon fontSize=\"small\" />\r\n        </ListItemIcon>\r\n        Sign out\r\n      </MenuItem>\r\n    </Menu>\r\n  );\r\n\r\n  const mobileMenuId = \"primary-account-menu-mobile\";\r\n  const renderMobileMenu = (\r\n    <Menu\r\n      anchorEl={mobileMoreAnchorEl}\r\n      anchorOrigin={{\r\n        vertical: \"top\",\r\n        horizontal: \"right\",\r\n      }}\r\n      id={mobileMenuId}\r\n      keepMounted\r\n      transformOrigin={{\r\n        vertical: \"top\",\r\n        horizontal: \"right\",\r\n      }}\r\n      open={isMobileMenuOpen}\r\n      onClose={handleMobileMenuClose}\r\n    >\r\n      {messageCount !== undefined && (\r\n        <MenuItem>\r\n          <IconButton \r\n            size=\"large\" \r\n            aria-label={`show ${messageCount} new mails`}\r\n            sx={{ color: '#1e2f97' }}\r\n          >\r\n            <Badge badgeContent={messageCount} color=\"error\">\r\n              <MailIcon />\r\n            </Badge>\r\n          </IconButton>\r\n          <p>Messages</p>\r\n        </MenuItem>\r\n      )}\r\n      {notificationCount > 0 && (\r\n        <MenuItem>\r\n          <IconButton\r\n            size=\"large\"\r\n            aria-label={`show ${notificationCount} new notifications`}\r\n            sx={{ color: '#1e2f97' }}\r\n          >\r\n            <Badge badgeContent={notificationCount} color=\"error\">\r\n              <NotificationsActiveOutlined />\r\n            </Badge>\r\n          </IconButton>\r\n          <p>Notifications</p>\r\n        </MenuItem>\r\n      )}\r\n      <MenuItem onClick={handleProfileMenuOpen}>\r\n        <IconButton\r\n          size=\"large\"\r\n          aria-label=\"account of current user\"\r\n          aria-controls=\"primary-account-menu\"\r\n          aria-haspopup=\"true\"\r\n          sx={{ color: '#1e2f97' }}\r\n        >\r\n          {isOnline ? (\r\n            <OnlineBadge\r\n              overlap=\"circular\"\r\n              anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n              variant=\"dot\"\r\n              title=\"Online\"\r\n              aria-label=\"Online status badge\"\r\n              data-testid=\"online-badge\"\r\n            >\r\n              <AccountCircle\r\n                titleAccess={user.name}\r\n                aria-label=\"User avatar\"\r\n              />\r\n            </OnlineBadge>\r\n          ) : (\r\n            <OfflineBadge\r\n              overlap=\"circular\"\r\n              anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n              variant=\"dot\"\r\n              title=\"Offline\"\r\n              aria-label=\"Offline status badge\"\r\n              data-testid=\"offline-badge\"\r\n            >\r\n              <AccountCircle\r\n                titleAccess={user.name}\r\n                aria-label=\"User avatar\"\r\n              />\r\n            </OfflineBadge>\r\n          )}\r\n        </IconButton>\r\n        <p>Profile</p>\r\n      </MenuItem>\r\n    </Menu>\r\n  );\r\n\r\n  return (\r\n    <Box sx={{ flexGrow: 1 }} className={`app-header ${className || \"\"}`}>\r\n      <AppBar\r\n        sx={{\r\n          position: \"fixed\",\r\n          top: 0,\r\n          backgroundColor: \"#ffffff\",\r\n        }}\r\n      >\r\n        <Toolbar>\r\n          <IconButton\r\n            size=\"large\"\r\n            edge=\"start\"\r\n            aria-label=\"open drawer\"\r\n            sx={{ \r\n              mr: 2,\r\n              color: '#1e2f97',\r\n              '&:hover': {\r\n                backgroundColor: 'rgba(30, 47, 151, 0.04)',\r\n              }\r\n            }}\r\n            onClick={handleDrawerToggle}\r\n          >\r\n            {isDrawerOpen ? (\r\n              <MenuOpenIcon fontSize={\"large\"} />\r\n            ) : (\r\n              <MenuIcon fontSize={\"large\"} />\r\n            )}\r\n          </IconButton>\r\n          <Typography\r\n            variant=\"h6\"\r\n            noWrap\r\n            component=\"div\"\r\n            sx={{ display: { xs: \"none\", sm: \"block\" } }}\r\n            data-testid=\"var-miner-wrapper\"\r\n          >\r\n            <span className=\"var\">{finalLogo.first}</span>\r\n            <span className=\"miner\">{finalLogo.second}</span>\r\n          </Typography>\r\n          <Box sx={{ flexGrow: 1 }} />\r\n          <Box sx={{ display: { xs: \"none\", md: \"flex\" } }}>\r\n            {notificationCount > 0 && (\r\n              <IconButton\r\n                size=\"large\"\r\n                aria-label={`show ${notificationCount} new notifications`}\r\n                sx={{\r\n                  color: '#1e2f97',\r\n                  '&:hover': {\r\n                    backgroundColor: 'rgba(30, 47, 151, 0.04)',\r\n                  }\r\n                }}\r\n              >\r\n                <Badge badgeContent={notificationCount} color=\"error\">\r\n                  <NotificationsActiveOutlined />\r\n                </Badge>\r\n              </IconButton>\r\n            )}\r\n            <IconButton\r\n              size=\"large\"\r\n              edge=\"end\"\r\n              aria-label=\"account of current user\"\r\n              aria-controls={menuId}\r\n              aria-haspopup=\"true\"\r\n              onClick={handleProfileMenuOpen}\r\n              sx={{\r\n                color: '#1e2f97',\r\n                '&:hover': {\r\n                  backgroundColor: 'rgba(30, 47, 151, 0.04)',\r\n                }\r\n              }}\r\n            >\r\n              {isOnline ? (\r\n                <OnlineBadge\r\n                  overlap=\"circular\"\r\n                  anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n                  variant=\"dot\"\r\n                  title=\"Online\"\r\n                  aria-label=\"Online status badge\"\r\n                  data-testid=\"online-badge\"\r\n                >\r\n                  <Avatar\r\n                    sx={{\r\n                      bgcolor: deepOrange[500],\r\n                      width: 20,\r\n                      height: 20,\r\n                      p: 1,\r\n                    }}\r\n                    alt={user.name}\r\n                    title={user.name}\r\n                    src={user.avatar}\r\n                    sizes=\"large\"\r\n                  >\r\n                    {getInitials()}\r\n                  </Avatar>\r\n                </OnlineBadge>\r\n              ) : (\r\n                <OfflineBadge\r\n                  overlap=\"circular\"\r\n                  anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n                  variant=\"dot\"\r\n                  title=\"Offline\"\r\n                  aria-label=\"Offline status badge\"\r\n                  data-testid=\"offline-badge\"\r\n                >\r\n                  <Avatar\r\n                    sx={{\r\n                      bgcolor: deepOrange[500],\r\n                      width: 20,\r\n                      height: 20,\r\n                      p: 1,\r\n                    }}\r\n                    alt={user.name}\r\n                    title={user.name}\r\n                    src={user.avatar}\r\n                  >\r\n                    {getInitials()}\r\n                  </Avatar>\r\n                </OfflineBadge>\r\n              )}\r\n            </IconButton>\r\n          </Box>\r\n          <Box sx={{ display: { xs: \"flex\", md: \"none\" } }}>\r\n            <IconButton\r\n              size=\"large\"\r\n              aria-label=\"show more\"\r\n              aria-controls={mobileMenuId}\r\n              aria-haspopup=\"true\"\r\n              onClick={handleMobileMenuOpen}\r\n              sx={{\r\n                color: '#1e2f97',\r\n                '&:hover': {\r\n                  backgroundColor: 'rgba(30, 47, 151, 0.04)',\r\n                }\r\n              }}\r\n            >\r\n              <MoreIcon />\r\n            </IconButton>\r\n          </Box>\r\n        </Toolbar>\r\n      </AppBar>\r\n      {renderMobileMenu}\r\n      {renderMenu}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default AppHeader;\r\n\r\n"],"names":["React","_jsx","useNavigate","styled","Badge","List","_jsxs","ListItem","ListItemAvatar","Avatar","deepOrange","ListItemText","Typography","Menu","Divider","MenuItem","ListItemIcon","IconButton","Box","AppBar","Toolbar"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,82 @@
+export interface UserProfile {
+    name: string;
+    email: string;
+    role: string;
+    avatar?: string;
+    initials?: string;
+}
+export interface AppHeaderProps {
+    /**
+     * User profile information
+     */
+    user?: UserProfile;
+    /**
+     * Whether the user is online
+     * @default true
+     */
+    isOnline?: boolean;
+    /**
+     * App logo/brand name (optional - defaults to "VAR" and "MINER")
+     */
+    logo?: {
+        first: string;
+        second: string;
+    };
+    /**
+     * Notification count (shown in desktop and mobile menu)
+     * @default 0
+     */
+    notificationCount?: number;
+    /**
+     * Message count (shown only in mobile menu, optional)
+     * @default undefined (not shown if not provided)
+     */
+    messageCount?: number;
+    /**
+     * Callback when drawer toggle is clicked
+     */
+    onDrawerToggle?: () => void;
+    /**
+     * Whether drawer is open
+     * @default false
+     */
+    isDrawerOpen?: boolean;
+    /**
+     * Route paths for navigation (optional - defaults are used if not provided)
+     */
+    routes?: {
+        /**
+         * Settings route path
+         * @default "/account/overview"
+         */
+        settings?: string;
+        /**
+         * Profile route path
+         * @default "/profile"
+         */
+        profile?: string;
+        /**
+         * Logout route path
+         * @default "/logout"
+         */
+        logout?: string;
+    };
+    /**
+     * Callback when settings is clicked (overrides default navigation)
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Callback when profile is clicked (overrides default navigation)
+     */
+    onProfileClick?: () => void;
+    /**
+     * Callback when sign out is clicked (overrides default navigation)
+     * If not provided, will clear localStorage and navigate to logout route
+     */
+    onSignOutClick?: () => void;
+    /**
+     * Custom CSS class name
+     */
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;;WAGG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;;WAGG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "varminer-app-header",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A plug-and-play React header component with Material-UI, drawer toggle, notifications, and user profile menu",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "prepublishOnly": "npm run build",
+    "prepack": "npm run build",
+    "prepublish": "npm run build",
+    "publish:public": "npm publish --access public",
+    "publish:dry-run": "npm publish --dry-run",
+    "pack": "npm pack"
+  },
+  "keywords": [
+    "react",
+    "header",
+    "material-ui",
+    "mui",
+    "appbar",
+    "toolbar",
+    "navigation",
+    "component",
+    "typescript",
+    "responsive",
+    "drawer",
+    "notifications"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/app-header.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-org/app-header/issues"
+  },
+  "homepage": "https://github.com/your-org/app-header#readme",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0",
+    "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "rollup": "^4.9.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "sass": "^1.69.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.0"
+  }
+}
+