varminer-app-header 1.0.5 → 1.0.7

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;AACzC,OAAO,sBAAsB,CAAC;AAe9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgfvC,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,CAqfvC,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,35 +34,188 @@ const DrawerProvider = ({ children }) => {
 };
 const useDrawer = () => React.useContext(DrawerContext);
 
-// Default routes - absolute paths from root
+const getUserDataFromStorage = () => {
+    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;
+            };
+            let userData = null;
+            if (parsedOuter.userDetails) {
+                const parsedUserDetails = parseNested(parsedOuter.userDetails);
+                userData = parsedUserDetails.user || parsedUserDetails.data || parsedUserDetails;
+            }
+            if (!userData && parsedOuter.user) {
+                const parsedUser = parseNested(parsedOuter.user);
+                userData = parsedUser.user || parsedUser.data || parsedUser.currentUser || parsedUser;
+            }
+            if (!userData && parsedOuter.authDetails) {
+                const parsedAuthDetails = parseNested(parsedOuter.authDetails);
+                if (parsedAuthDetails.auth) {
+                    userData = parsedAuthDetails.auth.user || parsedAuthDetails.auth.userData;
+                }
+                if (!userData) {
+                    userData = parsedAuthDetails.user || parsedAuthDetails.userData || parsedAuthDetails.currentUser;
+                }
+            }
+            if (!userData && parsedOuter.profile) {
+                const parsedProfile = parseNested(parsedOuter.profile);
+                userData = parsedProfile.user || parsedProfile.data || parsedProfile;
+            }
+            if (userData) {
+                let name = userData.name || userData.fullName || userData.userName || "";
+                if (!name && (userData.firstName || userData.lastName)) {
+                    name = [userData.firstName, userData.lastName].filter(Boolean).join(' ');
+                }
+                return {
+                    name: name || "",
+                    email: userData.email || userData.emailAddress || "",
+                    role: userData.role || userData.userRole || userData.designation || userData.title || "",
+                    avatar: userData.avatar || userData.profilePicture || userData.imageUrl || userData.profileImage,
+                    initials: userData.initials,
+                };
+            }
+        }
+        catch (err) {
+            console.error("Error parsing user data from localStorage:", err);
+            return null;
+        }
+    }
+    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;
+};
+
 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, }) => {
-    // Use provided logo or default
-    const finalLogo = logo ?? DEFAULT_LOGO;
+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(() => {
+        const storedUser = getUserDataFromStorage();
+        if (storedUser && storedUser.name && storedUser.email) {
+            return storedUser;
+        }
+        return {
+            name: "Naveen",
+            email: "naveen@varminer.com",
+            role: "Account Owner",
+        };
+    });
+    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(() => {
+        const storedUser = getUserDataFromStorage();
+        if (storedUser && storedUser.name && storedUser.email) {
+            setUser(storedUser);
+        }
+        else {
+            setUser({
+                name: "Naveen",
+                email: "naveen@varminer.com",
+                role: "Account Owner",
+            });
+        }
+        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);
-    // 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 OnlineBadge = styled(Badge)(({ theme }) => ({
         "& .MuiBadge-badge": {
             backgroundColor: "#44b700",
@@ -73,7 +226,7 @@ const AppHeader = ({ user = {
             borderRadius: "50%",
         },
     }));
-    const OfflineBadge = styled(Badge)(({ theme }) => ({
+    styled(Badge)(({ theme }) => ({
         "& .MuiBadge-badge": {
             backgroundColor: "gray",
             color: "gray",
@@ -83,9 +236,10 @@ const AppHeader = ({ user = {
             borderRadius: "50%",
         },
     }));
-    const handleDrawerToggle = () => {
+    const handleDrawerToggle = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
         toggleDrawer();
-        onDrawerToggle?.();
     };
     const handleProfileMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -102,43 +256,25 @@ const AppHeader = ({ user = {
     };
     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 = () => {
@@ -155,7 +291,7 @@ const AppHeader = ({ user = {
             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,
@@ -191,8 +327,8 @@ const AppHeader = ({ user = {
         }, 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",
@@ -202,27 +338,22 @@ const AppHeader = ({ user = {
                                 '&: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)',