varminer-app-header 1.0.4 → 1.0.6

package/README.md

@@ -31,9 +31,9 @@ npm install react react-dom react-router-dom @mui/material @mui/icons-material @
 
 ## Usage
 
-### Basic Example (Minimal Configuration)
+### Plug-and-Play (Zero Configuration)
 
-The package includes sensible defaults for logo and routes. Minimal setup:
+The package is **100% plug-and-play** - no props needed! It automatically loads everything from localStorage and handles all interactions internally:
 
 ```tsx
 import React from 'react';
@@ -43,20 +43,26 @@ 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}
-      />
+      <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)

package/dist/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../src/AppHeader.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAC;AAEtD,OAAO,sBAAsB,CAAC;AAe9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyhBvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../src/AppHeader.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAC;AAEtD,OAAO,sBAAsB,CAAC;AAa9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmfvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/index.d.ts

@@ -10,80 +10,6 @@ interface UserProfile {
     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)
-     * All routes are absolute paths from root (e.g., "/account/overview")
-     * @default "/account/overview", "/profile", "/logout"
-     */
-    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>;

package/dist/index.esm.js

@@ -34,19 +34,11 @@ const DrawerProvider = ({ children }) => {
 };
 const useDrawer = () => React.useContext(DrawerContext);
 
-/**
- * Utility functions to get user data from localStorage
- */
-/**
- * Gets user profile data from localStorage
- * Returns user info including name, email, role, etc.
- */
 const getUserDataFromStorage = () => {
     const userDbString = localStorage.getItem("persist:userdb");
     if (userDbString) {
         try {
             const parsedOuter = JSON.parse(userDbString);
-            // Helper function to parse nested JSON strings
             const parseNested = (value) => {
                 if (typeof value === 'string') {
                     try {
@@ -58,37 +50,29 @@ const getUserDataFromStorage = () => {
                 }
                 return value;
             };
-            // Try to get user data from different possible locations
             let userData = null;
-            // Check for userDetails
             if (parsedOuter.userDetails) {
                 const parsedUserDetails = parseNested(parsedOuter.userDetails);
                 userData = parsedUserDetails.user || parsedUserDetails.data || parsedUserDetails;
             }
-            // Check for user reducer/state
             if (!userData && parsedOuter.user) {
                 const parsedUser = parseNested(parsedOuter.user);
                 userData = parsedUser.user || parsedUser.data || parsedUser.currentUser || parsedUser;
             }
-            // Check for authDetails for user info
             if (!userData && parsedOuter.authDetails) {
                 const parsedAuthDetails = parseNested(parsedOuter.authDetails);
-                // Check auth object
                 if (parsedAuthDetails.auth) {
                     userData = parsedAuthDetails.auth.user || parsedAuthDetails.auth.userData;
                 }
-                // Check root of authDetails
                 if (!userData) {
                     userData = parsedAuthDetails.user || parsedAuthDetails.userData || parsedAuthDetails.currentUser;
                 }
             }
-            // Check for profile
             if (!userData && parsedOuter.profile) {
                 const parsedProfile = parseNested(parsedOuter.profile);
                 userData = parsedProfile.user || parsedProfile.data || parsedProfile;
             }
             if (userData) {
-                // Build name from various possible fields
                 let name = userData.name || userData.fullName || userData.userName || "";
                 if (!name && (userData.firstName || userData.lastName)) {
                     name = [userData.firstName, userData.lastName].filter(Boolean).join(' ');
@@ -109,75 +93,129 @@ const getUserDataFromStorage = () => {
     }
     return null;
 };
+const getNotificationCountFromStorage = () => {
+    const userDbString = localStorage.getItem("persist:userdb");
+    if (userDbString) {
+        try {
+            const parsedOuter = JSON.parse(userDbString);
+            const parseNested = (value) => {
+                if (typeof value === 'string') {
+                    try {
+                        return JSON.parse(value);
+                    }
+                    catch {
+                        return value;
+                    }
+                }
+                return value;
+            };
+            if (parsedOuter.notifications) {
+                const parsedNotifications = parseNested(parsedOuter.notifications);
+                const count = parsedNotifications.count || parsedNotifications.unreadCount || parsedNotifications.total;
+                if (typeof count === 'number')
+                    return count;
+            }
+            if (parsedOuter.app) {
+                const parsedApp = parseNested(parsedOuter.app);
+                if (parsedApp.notificationCount !== undefined) {
+                    return parsedApp.notificationCount;
+                }
+            }
+        }
+        catch (err) {
+            console.error("Error parsing notification count from localStorage:", err);
+        }
+    }
+    return 0;
+};
+const getMessageCountFromStorage = () => {
+    const userDbString = localStorage.getItem("persist:userdb");
+    if (userDbString) {
+        try {
+            const parsedOuter = JSON.parse(userDbString);
+            const parseNested = (value) => {
+                if (typeof value === 'string') {
+                    try {
+                        return JSON.parse(value);
+                    }
+                    catch {
+                        return value;
+                    }
+                }
+                return value;
+            };
+            if (parsedOuter.messages) {
+                const parsedMessages = parseNested(parsedOuter.messages);
+                const count = parsedMessages.count || parsedMessages.unreadCount || parsedMessages.total;
+                if (typeof count === 'number')
+                    return count;
+            }
+            if (parsedOuter.app) {
+                const parsedApp = parseNested(parsedOuter.app);
+                if (parsedApp.messageCount !== undefined) {
+                    return parsedApp.messageCount;
+                }
+            }
+        }
+        catch (err) {
+            console.error("Error parsing message count from localStorage:", err);
+        }
+    }
+    return undefined;
+};
 
-// Default routes - absolute paths from root
 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: userProp, isOnline = true, logo, notificationCount = 0, messageCount, onDrawerToggle, routes, onSettingsClick, onProfileClick, onSignOutClick, className, isDrawerOpen: isDrawerOpenProp, }) => {
-    // Use provided logo or default
-    const finalLogo = logo ?? DEFAULT_LOGO;
-    const { isDrawerOpen: isDrawerOpenContext, toggleDrawer, openDrawer, closeDrawer } = useDrawer();
+const AppHeader = () => {
+    const finalLogo = DEFAULT_LOGO;
+    const { isDrawerOpen, toggleDrawer } = useDrawer();
     const [anchorEl, setAnchorEl] = React__default.useState(null);
     const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React__default.useState(null);
     const [user, setUser] = React__default.useState(() => {
-        // Initialize with prop if provided, otherwise try localStorage, otherwise default
-        if (userProp) {
-            return userProp;
-        }
         const storedUser = getUserDataFromStorage();
         if (storedUser && storedUser.name && storedUser.email) {
             return storedUser;
         }
         return {
-            name: "Shiva Kumar",
-            email: "shivam@redcliffelabs.com",
-            role: "Lab Technician",
-            initials: "SK",
+            name: "Naveen",
+            email: "naveen@varminer.com",
+            role: "Account Owner",
         };
     });
-    // Sync context with prop if provided (for initial state and external control)
-    const prevPropRef = React__default.useRef(isDrawerOpenProp);
-    React__default.useEffect(() => {
-        if (isDrawerOpenProp !== undefined && prevPropRef.current !== isDrawerOpenProp) {
-            if (isDrawerOpenProp) {
-                openDrawer();
-            }
-            else {
-                closeDrawer();
-            }
-            prevPropRef.current = isDrawerOpenProp;
-        }
-    }, [isDrawerOpenProp, openDrawer, closeDrawer]);
-    // Always use context state for icon display (since that's what actually changes on click)
-    // This ensures the icon updates immediately when user clicks, regardless of prop
-    const isDrawerOpen = isDrawerOpenContext;
-    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
-    // Update user state when prop changes or fetch from localStorage
+    const [notificationCount, setNotificationCount] = React__default.useState(() => {
+        const count = getNotificationCountFromStorage();
+        return count !== null && count !== undefined ? count : 0;
+    });
+    const [messageCount, setMessageCount] = React__default.useState(() => {
+        return getMessageCountFromStorage() ?? undefined;
+    });
     React__default.useEffect(() => {
-        if (userProp) {
-            setUser(userProp);
+        const storedUser = getUserDataFromStorage();
+        if (storedUser && storedUser.name && storedUser.email) {
+            setUser(storedUser);
         }
         else {
-            const storedUser = getUserDataFromStorage();
-            if (storedUser && storedUser.name && storedUser.email) {
-                setUser(storedUser);
-            }
+            setUser({
+                name: "User",
+                email: "user@example.com",
+                role: "User",
+            });
         }
-    }, [userProp]);
-    // Merge provided routes with defaults - all routes are absolute from root
-    const finalRoutes = {
-        settings: routes?.settings ?? DEFAULT_ROUTES.settings,
-        profile: routes?.profile ?? DEFAULT_ROUTES.profile,
-        logout: routes?.logout ?? DEFAULT_ROUTES.logout,
-    };
+        const notifCount = getNotificationCountFromStorage();
+        setNotificationCount(notifCount !== null && notifCount !== undefined ? notifCount : 0);
+        const msgCount = getMessageCountFromStorage();
+        setMessageCount(msgCount ?? undefined);
+    }, []);
+    const finalRoutes = DEFAULT_ROUTES;
+    const notificationCountValue = notificationCount;
+    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
     const OnlineBadge = styled(Badge)(({ theme }) => ({
         "& .MuiBadge-badge": {
             backgroundColor: "#44b700",
@@ -188,7 +226,7 @@ const AppHeader = ({ user: userProp, isOnline = true, logo, notificationCount =
             borderRadius: "50%",
         },
     }));
-    const OfflineBadge = styled(Badge)(({ theme }) => ({
+    styled(Badge)(({ theme }) => ({
         "& .MuiBadge-badge": {
             backgroundColor: "gray",
             color: "gray",
@@ -200,7 +238,6 @@ const AppHeader = ({ user: userProp, isOnline = true, logo, notificationCount =
     }));
     const handleDrawerToggle = () => {
         toggleDrawer();
-        onDrawerToggle?.();
     };
     const handleProfileMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -217,43 +254,25 @@ const AppHeader = ({ user: userProp, isOnline = true, logo, notificationCount =
     };
     const handleSettingsClick = () => {
         handleClose();
-        if (onSettingsClick) {
-            onSettingsClick();
-        }
-        else {
-            // Use window.location to navigate to absolute path, bypassing React Router basename
-            const path = finalRoutes.settings.startsWith('/')
-                ? finalRoutes.settings
-                : `/${finalRoutes.settings}`;
-            window.location.href = path;
-        }
+        const path = finalRoutes.settings.startsWith('/')
+            ? finalRoutes.settings
+            : `/${finalRoutes.settings}`;
+        window.location.href = path;
     };
     const handleProfileClick = () => {
         handleClose();
-        if (onProfileClick) {
-            onProfileClick();
-        }
-        else {
-            // Use window.location to navigate to absolute path, bypassing React Router basename
-            const path = finalRoutes.profile.startsWith('/')
-                ? finalRoutes.profile
-                : `/${finalRoutes.profile}`;
-            window.location.href = path;
-        }
+        const path = finalRoutes.profile.startsWith('/')
+            ? finalRoutes.profile
+            : `/${finalRoutes.profile}`;
+        window.location.href = path;
     };
     const handleSignOutClick = () => {
         handleClose();
-        if (onSignOutClick) {
-            onSignOutClick();
-        }
-        else {
-            localStorage.clear();
-            // Use window.location to navigate to absolute path, bypassing React Router basename
-            const path = finalRoutes.logout.startsWith('/')
-                ? finalRoutes.logout
-                : `/${finalRoutes.logout}`;
-            window.location.href = path;
-        }
+        localStorage.clear();
+        const path = finalRoutes.logout.startsWith('/')
+            ? finalRoutes.logout
+            : `/${finalRoutes.logout}`;
+        window.location.href = path;
     };
     const menuId = "primary-account-menu";
     const getInitials = () => {
@@ -270,7 +289,7 @@ const AppHeader = ({ user: userProp, isOnline = true, logo, notificationCount =
             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] })] }) })] }) }));
+        }, component: "div", "aria-hidden": "true", tabIndex: -1, children: jsxs(ListItem, { alignItems: "flex-start", className: "profile-menu-item", children: [jsx(ListItemAvatar, { children: (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(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,
@@ -306,8 +325,8 @@ const AppHeader = ({ user: userProp, isOnline = true, logo, notificationCount =
         }, 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: {
+        }, 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" })] })), notificationCountValue > 0 && (jsxs(MenuItem, { children: [jsx(IconButton, { size: "large", "aria-label": `show ${notificationCountValue} 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: (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("p", { children: "Profile" })] })] }));
+    return (jsxs(Box, { sx: { flexGrow: 1 }, className: "app-header", children: [jsx(AppBar, { sx: {
                     position: "fixed",
                     top: 0,
                     backgroundColor: "#ffffff",
@@ -317,27 +336,22 @@ const AppHeader = ({ user: userProp, isOnline = true, logo, notificationCount =
                                 '&: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: {
+                            }, 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: [notificationCountValue > 0 && (jsx(IconButton, { size: "large", "aria-label": `show ${notificationCountValue} 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: {
+                                    }, children: jsx(Badge, { badgeContent: notificationCountValue, 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: {
+                                    }, children: (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, 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: {
+                                            }, alt: user.name, title: user.name, src: user.avatar, sizes: "large", 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)',