changes

Author: Nirav Joshi

README.md

@@ -34,18 +34,19 @@ For any Issues, create new issue on https://github.com/adminmart/react-mui-sideb
 import React from "react";
 
 import { Sidebar, Menu, MenuItem, Submenu, Logo } from "react-mui-sidebar";
-
+import AccessAlarms from "@mui/icons-material/AccessAlarms";
+import CottageOutlinedIcon from '@mui/icons-material/CottageOutlined';
 const App = () => {
   return (
     <Sidebar width={"270px"}>
       <Logo img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png">
         AdminMart
       </Logo>
       <Menu subHeading="HOME">
-        <MenuItem link="/" badge={true}>
+        <MenuItem icon={<CottageOutlinedIcon/>} link="/" badge={true}>  {/* Set badge to boolean true */}
           Modern
         </MenuItem>
-        <MenuItem>eCommerce</MenuItem>
+        <MenuItem icon={<AccessAlarms/>}>eCommerce</MenuItem>
         <MenuItem>Analytical</MenuItem>
       </Menu>
       <Menu subHeading="APPS">
@@ -149,6 +150,17 @@ export default App;
 | :---- | :------- | :--------- | --------------------------- |
 | `img` | `string` | `Logo url` | set the logo of the sidebar |
 
+#### User Profile LogOut Api Reference
+
+```http
+  <Logo></Logo>
+```
+
+| Props      | Type       | Default    | Description                 |
+| :----------| :--------- | :--------- | --------------------------- |
+| `onLogout` | `function` | `void`     | set the logo of the sidebar |
+
+
 ## Contributing
 
 Contributions are always welcome!

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mui-sidebar",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "react mui sidebar",
   "main": "dist/index.js",
   "type": "module",

package.json

@@ -6,8 +6,8 @@ import { Logo } from "./components/Logo";
 import { Menu } from "./components/Menu";
 import { MenuItem } from "./components/MenuItem";
 import { Submenu } from './components/Submenu';
-
-
+import AccessAlarms from "@mui/icons-material/AccessAlarms";
+import CottageOutlinedIcon from '@mui/icons-material/CottageOutlined';
 
 function App() {
   return (
@@ -16,10 +16,10 @@ function App() {
         AdminMart
       </Logo>
       <Menu subHeading="HOME">
-        <MenuItem link="/" badge={true}>  {/* Set badge to boolean true */}
+        <MenuItem icon={<CottageOutlinedIcon/>} link="/" badge={true}>  {/* Set badge to boolean true */}
           Modern
         </MenuItem>
-        <MenuItem>eCommerce</MenuItem>
+        <MenuItem icon={<AccessAlarms/>}>eCommerce</MenuItem>
         <MenuItem>Analytical</MenuItem>
       </Menu>
       <Menu subHeading="APPS">

src/App.tsx

@@ -81,9 +81,9 @@ const MenuItem = React.forwardRef<HTMLAnchorElement, MenuItemProps>(
       alignItems: "center",
       gap: "10px",
       marginBottom: "0px",
-      padding: "0px 0px",
+      padding: "0px",
       cursor: "pointer",
-      marginLeft: "-10px",
+      
       color: "inherit",
     }));
 

src/components/MenuItem.tsx

@@ -8,13 +8,15 @@ interface ProfileProps {
     designation?: string;
     userimg?: string;
     isCollapse?: boolean;
+    onLogout?: () => void;
 }
 
 const Profile = React.forwardRef<HTMLDivElement, ProfileProps>(({
     userName = "",
     designation = "",
     userimg = "",
-    isCollapse = false
+    isCollapse = false,
+    onLogout
 }, ref) => {
     const theme = useTheme();
     return (
@@ -34,7 +36,7 @@ const Profile = React.forwardRef<HTMLDivElement, ProfileProps>(({
                             {designation}
                         </Typography>
                     </Box>
-                    <Box sx={{ ml: 'auto' }}>
+                    <Box sx={{ ml: 'auto' }} onClick={onLogout}>
                         <Tooltip title="Logout" placement="top">
                             {/* <Link to="/">  Wrap the IconButton with Link */}
                                 <IconButton