@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
745 lines (741 loc) • 30.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = CollapsibleSidebar;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
var _axios = _interopRequireDefault(require("axios"));
var _material = require("@mui/material");
var _iconsMaterial = require("@mui/icons-material");
var _IntegrationInstructions = _interopRequireDefault(require("@mui/icons-material/IntegrationInstructions"));
var _AddCircleOutline = _interopRequireDefault(require("@mui/icons-material/AddCircleOutline"));
var _Assignment = _interopRequireDefault(require("@mui/icons-material/Assignment"));
var _CloudUpload = _interopRequireDefault(require("@mui/icons-material/CloudUpload"));
var _ListAlt = _interopRequireDefault(require("@mui/icons-material/ListAlt"));
var _jsCookie = _interopRequireDefault(require("js-cookie"));
var _UserDataProvider = require("../../context/UserDataProvider");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["className"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
// Optional toast import - fallback to console if not available
var toast;
try {
var toastModule = require('react-hot-toast');
toast = toastModule.toast || toastModule.default;
} catch (e) {
toast = {
success: function success(message) {
return console.log('Success:', message);
},
error: function error(message) {
return console.error('Error:', message);
},
loading: function loading(message) {
return console.log('Loading:', message);
}
};
}
// Assuming you have a context for user data
var drawerWidth = 240;
var collapsedWidth = 64;
var StyledDrawer = (0, _material.styled)(_material.Drawer)(function (_ref) {
var theme = _ref.theme;
return {
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
backgroundColor: "rgb(32,15,48)",
borderRight: "1px solid ".concat(theme.palette.divider),
color: "white",
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
}),
overflowX: "hidden"
}
};
});
var StyledListItem = (0, _material.styled)(_material.ListItem)(function (_ref2) {
var theme = _ref2.theme;
return {
borderRadius: theme.shape.borderRadius,
cursor: "pointer",
marginBottom: theme.spacing(0.5),
"&:hover": {
backgroundColor: theme.palette.action.hover
},
"&.Mui-selected": {
backgroundColor: theme.palette.action.selected,
"&:hover": {
backgroundColor: theme.palette.action.selected
}
},
"& .MuiListItemText-primary": {
fontSize: "1rem"
}
};
});
var SubMenuContainer = (0, _material.styled)(_material.Box)(function (_ref3) {
var theme = _ref3.theme;
return {
marginLeft: theme.spacing(2),
paddingLeft: theme.spacing(2),
borderLeft: "2px solid #FFD700"
};
});
var StyledTooltip = (0, _material.styled)(function (_ref4) {
var className = _ref4.className,
props = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, _objectSpread(_objectSpread({}, props), {}, {
classes: {
popper: className
}
}));
})(function (_ref5) {
var theme = _ref5.theme;
return (0, _defineProperty2.default)({}, "& .".concat(_material.tooltipClasses.tooltip), {
backgroundColor: "transparent",
padding: 0,
maxWidth: "none"
});
});
var TooltipContent = (0, _material.styled)(_material.Paper)(function (_ref7) {
var theme = _ref7.theme;
return {
padding: theme.spacing(2),
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[4],
borderRadius: theme.shape.borderRadius,
width: 280
};
});
var TooltipTitle = (0, _material.styled)(_material.Typography)(function (_ref8) {
var theme = _ref8.theme;
return {
fontWeight: "bold",
fontSize: 18,
marginBottom: theme.spacing(1.5),
paddingBottom: theme.spacing(1),
paddingTop: theme.spacing(1),
backgroundColor: "rgba(156, 39, 176, 0.1)",
color: theme.palette.primary.main,
textAlign: "center",
borderTopLeftRadius: theme.shape.borderRadius,
borderTopRightRadius: theme.shape.borderRadius,
marginLeft: theme.spacing(-2),
marginRight: theme.spacing(-2),
marginTop: theme.spacing(-2)
};
});
var TooltipListItem = (0, _material.styled)(_material.ListItem)(function (_ref9) {
var theme = _ref9.theme;
return {
borderRadius: theme.shape.borderRadius,
marginBottom: theme.spacing(0.5),
"&:hover": {
backgroundColor: theme.palette.action.hover
},
"& .MuiListItemText-primary": {
fontSize: "0.95rem"
}
};
});
function CollapsibleSidebar(_ref0) {
var _user$name, _user$name2;
var sidebarData = _ref0.sidebarData,
getSidebarApi = _ref0.getSidebarApi,
logoutApi = _ref0.logoutApi;
var _useContext = (0, _react.useContext)(_UserDataProvider.userDataContext),
sidebarOpen = _useContext.sidebarOpen,
setSidebarOpen = _useContext.setSidebarOpen,
setUser = _useContext.setUser,
user = _useContext.user;
var _useState = (0, _react.useState)(""),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
openSubMenu = _useState2[0],
setOpenSubMenu = _useState2[1];
var theme = (0, _material.useTheme)();
var location = (0, _reactRouterDom.useLocation)();
var _useState3 = (0, _react.useState)([]),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
sidebarItems = _useState4[0],
setSidebarItems = _useState4[1];
var sidebarRef = (0, _react.useRef)(null);
var navigate = (0, _reactRouterDom.useNavigate)();
var config = {
headers: {
Authorization: "Bearer ".concat(user.token)
}
};
var fetchSidebarData = /*#__PURE__*/function () {
var _ref1 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee() {
var response, iconMap, colorMap, modules, menuItems, homeIndex, homeItem;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
console.log(config, "config");
_context.next = 4;
return _axios.default.post(getSidebarApi, {
email_id: user.emailId || localStorage.getItem('userEmail')
}, config);
case 4:
response = _context.sent;
iconMap = {
INVENTORY_MODULE: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Inventory, {}),
SUPPLIER_MODULE: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Business, {}),
CUSTOMER_MODULE: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.People, {}),
HOME: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Dashboard, {}),
SETTINGS: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Settings, {}),
ADD_ITEM: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddCircleOutline.default, {}),
VIEW_ITEM: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListAlt.default, {}),
UPLOAD_ITEMS: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudUpload.default, {}),
STOCK_AUDIT: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Assignment.default, {}),
ADD_SUPPLIER: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.LocalShipping, {}),
VIEW_SUPPLIER: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Visibility, {}),
ADD_CUSTOMER: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.PersonAdd, {}),
VIEW_CUSTOMER: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Visibility, {}),
PURCHASE_MODULE: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ShoppingCart, {}),
CREATE_PO: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {}),
VIEW_PO: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.List, {}),
INTEGRATIONS_MODULE: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IntegrationInstructions.default, {}),
SALES: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.LocalShipping, {}),
SALES_ORDER: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.LocalShipping, {}),
VIEW_SALES_ORDER: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.LocalShipping, {})
};
colorMap = {
INVENTORY_MODULE: "#2196f3",
SUPPLIER_MODULE: "#FF5722",
CUSTOMER_MODULE: "#009688",
PURCHASE_MODULE: "#ff9800",
HOME: "#4caf50",
SETTINGS: "#607d8b",
INTEGRATIONS_MODULE: "#964B00",
SALES: "#FF6D00"
};
modules = response.data.modules;
modules = modules.sort(function (a, b) {
return a.order_of_display - b.order_of_display;
});
menuItems = modules.map(function (module) {
var subItems = module.submodules.map(function (submodule) {
return {
name: submodule.name.toLowerCase() // Convert to lowercase
.replace(/_/g, " ") // Replace all underscores with spaces
.replace(/\b\w/g, function (c) {
return c.toUpperCase();
}),
icon: iconMap[submodule.name] || /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.List, {}),
path: submodule.route
};
});
return {
name: module.name.replace("_MODULE", "").toLowerCase().replace(/^./, function (c) {
return c.toUpperCase();
}),
icon: iconMap[module.name] || /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Dashboard, {}),
path: subItems.length ? undefined : module.route,
color: colorMap[module.name] || "#000000",
subItems: subItems.length > 0 ? subItems : undefined
};
});
homeIndex = menuItems.findIndex(function (item) {
return item.name.toLowerCase() === 'home';
});
if (homeIndex !== -1) {
homeItem = menuItems.splice(homeIndex, 1)[0];
menuItems.unshift(homeItem);
}
setSidebarItems(menuItems);
_context.next = 18;
break;
case 15:
_context.prev = 15;
_context.t0 = _context["catch"](0);
console.error("Sidebar could not be fetched", _context.t0);
case 18:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 15]]);
}));
return function fetchSidebarData() {
return _ref1.apply(this, arguments);
};
}();
(0, _react.useEffect)(function () {
fetchSidebarData();
}, [getSidebarApi]);
(0, _react.useEffect)(function () {
console.log("Location changed:", location.pathname);
}, [location]);
var handleSubMenuToggle = function handleSubMenuToggle(name) {
setOpenSubMenu(openSubMenu === name ? "" : name);
};
var handleLogout = /*#__PURE__*/function () {
var _ref10 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee2() {
var refreshToken, userEmail, response;
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.prev = 0;
refreshToken = (user === null || user === void 0 ? void 0 : user.refreshToken) || _jsCookie.default.get('refreshToken');
userEmail = (user === null || user === void 0 ? void 0 : user.emailId) || localStorage.getItem('userEmail');
_context2.next = 5;
return _axios.default.post(logoutApi, {
email: userEmail,
refreshToken: refreshToken
}, config);
case 5:
response = _context2.sent;
if (!(response.status !== 200)) {
_context2.next = 8;
break;
}
throw new Error('Logout failed');
case 8:
// Remove cookies
_jsCookie.default.remove('authToken');
_jsCookie.default.remove('refreshToken'); // Also remove refresh token cookie
_jsCookie.default.remove('userName');
_jsCookie.default.remove('logintime');
_jsCookie.default.remove('name');
_jsCookie.default.remove('_ga');
_jsCookie.default.remove('_ga_NRS9PX9R2K');
_jsCookie.default.remove('emailId');
// Clear storage
localStorage.clear();
sessionStorage.clear();
toast.success("Logged out successfully", {
style: {
background: '#333',
color: '#fff',
borderRadius: '10px',
padding: '10px 14px'
}
});
setUser(null);
window.location.href = '/';
_context2.next = 27;
break;
case 23:
_context2.prev = 23;
_context2.t0 = _context2["catch"](0);
console.error("Logout failed", _context2.t0);
toast.error("Logout failed. Please try again.");
case 27:
case "end":
return _context2.stop();
}
}, _callee2, null, [[0, 23]]);
}));
return function handleLogout() {
return _ref10.apply(this, arguments);
};
}();
(0, _react.useEffect)(function () {
var handleClickOutside = function handleClickOutside(event) {
if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
setSidebarOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return function () {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setSidebarOpen]);
var renderMenuItem = function renderMenuItem(item) {
var isSelected = location.pathname === item.path || item.subItems && item.subItems.some(function (subItem) {
return location.pathname === subItem.path;
});
var listItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledListItem, {
button: true,
component: _reactRouterDom.Link,
to: item.path || "#",
onClick: function onClick(e) {
if (item.subItems && sidebarOpen) {
e.preventDefault();
handleSubMenuToggle(item.name);
}
},
selected: isSelected,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
sx: {
color: item.color,
minWidth: 40
},
children: /*#__PURE__*/_react.default.cloneElement(item.icon, {
style: {
fontSize: 24
}
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
primary: item.name,
primaryTypographyProps: {
fontWeight: isSelected ? "bold" : "medium",
variant: "body1"
},
sx: {
opacity: sidebarOpen ? 1 : 0,
transition: theme.transitions.create("opacity", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
}
}), sidebarOpen && item.subItems && (openSubMenu === item.name ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ExpandLess, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ExpandMore, {}))]
});
var tooltipContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipContent, {
elevation: 6,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipTitle, {
variant: "h6",
children: item.name
}), item.subItems && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
disablePadding: true,
children: item.subItems.map(function (subItem) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipListItem, {
button: true,
component: _reactRouterDom.Link,
to: subItem.path,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
sx: {
color: item.color,
minWidth: 40
},
children: /*#__PURE__*/_react.default.cloneElement(subItem.icon, {
style: {
fontSize: 20
}
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
primary: subItem.name,
primaryTypographyProps: {
variant: "body1",
fontWeight: location.pathname === subItem.path ? "bold" : "normal"
}
})]
}, subItem.name);
})
})]
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTooltip, {
title: !sidebarOpen ? tooltipContent : "",
placement: "right",
arrow: true,
children: listItem
}), item.subItems && sidebarOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
in: openSubMenu === item.name,
timeout: "auto",
unmountOnExit: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SubMenuContainer, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
component: "div",
disablePadding: true,
children: item.subItems.map(function (subItem) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledListItem, {
button: true,
component: _reactRouterDom.Link,
to: subItem.path,
selected: location.pathname === subItem.path,
sx: {
pl: 4
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
sx: {
color: item.color,
minWidth: 40
},
children: /*#__PURE__*/_react.default.cloneElement(subItem.icon, {
style: {
fontSize: 20
}
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
primary: subItem.name,
primaryTypographyProps: {
variant: "body2",
fontWeight: location.pathname === subItem.path ? "bold" : "normal"
}
})]
}, subItem.name);
})
})
})
})]
}, item.name);
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
position: 'fixed',
left: '0px',
zIndex: 40,
display: "flex",
height: "96.28%"
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDrawer, {
variant: "permanent",
open: sidebarOpen,
sx: {
width: sidebarOpen ? drawerWidth : collapsedWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
}),
"& .MuiDrawer-paper": {
width: sidebarOpen ? drawerWidth : collapsedWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
ref: sidebarRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
p: 2,
px: "20px",
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
height: 61,
overflow: "hidden",
bgcolor: "rgb(32,15,48)",
color: "white"
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
color: "inherit",
"aria-label": "toggle drawer",
edge: "start",
onClick: function onClick() {
return setSidebarOpen(function (prev) {
return !prev;
});
},
sx: {
color: "white",
marginRight: 3,
bgcolor: "purple"
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Menu, {
sx: {
fontSize: "1.5rem"
}
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "h4",
noWrap: true,
component: "div",
sx: {
fontWeight: "bold",
opacity: sidebarOpen ? 0.8 : 0,
transition: theme.transitions.create("opacity", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
children: sidebarOpen ? "NestBiz" : "NB"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
sx: {
mt: 2
},
children: sidebarItems.map(renderMenuItem)
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
p: 2,
backgroundColor: "rgba(255, 255, 255, 0.05)"
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTooltip, {
title: !sidebarOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipContent, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
p: 2,
width: 220
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
mb: 2
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
sx: {
width: 48,
height: 48,
bgcolor: "primary.main",
color: "primary.contrastText",
fontSize: '1.5rem',
cursor: "pointer",
fontWeight: 'bold',
mb: 3.2
},
children: (user === null || user === void 0 || (_user$name = user.name) === null || _user$name === void 0 || (_user$name = _user$name.charAt(0)) === null || _user$name === void 0 ? void 0 : _user$name.toUpperCase()) || ""
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipTitle, {
variant: "h6",
sx: {
width: '100%'
},
children: user.name
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
sx: {
my: 1.5
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
fullWidth: true,
variant: "outlined",
startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ExitToApp, {}),
onClick: handleLogout,
sx: {
mt: 1,
color: 'primary.main',
cursor: "pointer",
borderColor: 'primary.main',
'&:hover': {
backgroundColor: 'primary.main',
color: 'primary.contrastText'
},
textTransform: 'none',
fontWeight: 'medium'
},
children: "Logout"
})]
})
}) : "",
placement: "right",
arrow: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 1,
mb: sidebarOpen ? 2 : 0
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
sx: {
width: 48,
height: 48,
bgcolor: "primary.main",
color: "primary.contrastText",
fontSize: '1.5rem',
fontWeight: 'bold'
},
children: (user === null || user === void 0 || (_user$name2 = user.name) === null || _user$name2 === void 0 || (_user$name2 = _user$name2.charAt(0)) === null || _user$name2 === void 0 ? void 0 : _user$name2.toUpperCase()) || ""
}), sidebarOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "subtitle1",
sx: {
color: "white",
textAlign: "center"
},
children: user.name
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
sx: {
color: "rgba(255, 255, 255, 0.7)",
textAlign: "center"
},
children: user.email
})]
})]
})
}), sidebarOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledListItem, {
button: true,
component: _reactRouterDom.Link,
to: "/setting",
sx: {
borderRadius: "8px",
mt: 2,
width: "100%",
display: 'flex',
justifyContent: "center",
backgroundColor: "#2337c6",
opacity: 0.79,
"&:hover": {
backgroundColor: "rgba(255, 255, 255, 0.08)"
}
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
sx: {
minWidth: 'auto',
mr: 4
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Edit, {
sx: {
color: "white"
}
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
primary: "Manage Profile",
primaryTypographyProps: {
color: "white"
},
sx: {
fontSize: '1.2rem'
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledListItem, {
button: true,
onClick: handleLogout,
sx: {
borderRadius: "8px",
mt: 2,
width: "100%",
display: 'flex',
justifyContent: "center",
backgroundColor: "rgba(32, 15, 48, 1)",
"&:hover": {
backgroundColor: "rgba(255, 255, 255, 0.08)"
}
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
sx: {
minWidth: 'auto',
mr: 4
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.ExitToApp, {
sx: {
color: "white"
}
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
primary: "Logout",
primaryTypographyProps: {
color: "white"
},
sx: {
fontSize: '1.2rem'
}
})]
})]
})]
})]
})
})
});
}