├── src
    ├── App.css
    ├── index.css
    ├── index.ts
    ├── main.tsx
    ├── components
    │   ├── Links.tsx
    │   ├── Menu.tsx
    │   ├── Logo.tsx
    │   ├── UserProfile.tsx
    │   ├── Sidebar.tsx
    │   ├── Submenu.tsx
    │   └── MenuItem.tsx
    ├── App.tsx
    └── assets
    │   └── react.svg
├── dist
    ├── main.d.ts
    ├── App.d.ts
    ├── index.d.ts
    ├── components
    │   ├── Menu.d.ts
    │   ├── Links.d.ts
    │   ├── Logo.d.ts
    │   ├── UserProfile.d.ts
    │   ├── Submenu.d.ts
    │   ├── MenuItem.d.ts
    │   └── Sidebar.d.ts
    └── vite.svg
├── tsconfig.tsbuildinfo
├── .gitignore
├── index.html
├── tsconfig.json
├── vite.config.ts
├── eslint.config.js
├── public
    └── vite.svg
├── package.json
└── README.md


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/dist/main.d.ts:
--------------------------------------------------------------------------------
1 | export {};
2 | 


--------------------------------------------------------------------------------
/dist/App.d.ts:
--------------------------------------------------------------------------------
1 | declare function App(): import("react/jsx-runtime").JSX.Element;
2 | export default App;
3 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export {Sidebar} from './components/Sidebar'
2 | export {Menu} from './components/Menu'
3 | export {Submenu} from './components/Submenu'
4 | export {MenuItem} from './components/MenuItem'
5 | export {Logo} from './components/Logo'


--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
1 | export { Sidebar } from './components/Sidebar';
2 | export { Menu } from './components/Menu';
3 | export { Submenu } from './components/Submenu';
4 | export { MenuItem } from './components/MenuItem';
5 | export { Logo } from './components/Logo';
6 | 


--------------------------------------------------------------------------------
/dist/components/Menu.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | type MenuProps = {
3 |     children: React.ReactNode;
4 |     subHeading?: string;
5 | };
6 | declare const Menu: ({ children, subHeading }: MenuProps) => import("react/jsx-runtime").JSX.Element;
7 | export { Menu };
8 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | // import './index.css'
 4 | import App from './App'
 5 | 
 6 | createRoot(document.getElementById('root')!).render(
 7 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/dist/components/Links.d.ts:
--------------------------------------------------------------------------------
1 | import { default as React, ReactNode, ElementType } from 'react';
2 | interface MenuItemProps {
3 |     component?: ElementType;
4 |     children: ReactNode;
5 |     [key: string]: any;
6 | }
7 | declare const Links: React.FC<MenuItemProps>;
8 | export default Links;
9 | 


--------------------------------------------------------------------------------
/tsconfig.tsbuildinfo:
--------------------------------------------------------------------------------
1 | {"root":["./src/app.tsx","./src/index.ts","./src/main.tsx","./src/components/links.tsx","./src/components/logo.tsx","./src/components/menu.tsx","./src/components/menuitem.tsx","./src/components/sidebar.tsx","./src/components/submenu.tsx","./src/components/userprofile.tsx"],"version":"5.6.3"}


--------------------------------------------------------------------------------
/dist/components/Logo.d.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | type LogoProps = {
 3 |     children: React.ReactNode;
 4 |     img?: string;
 5 |     href?: string;
 6 |     component?: React.ElementType;
 7 | };
 8 | declare const Logo: ({ children, img, href, component, }: LogoProps) => import("react/jsx-runtime").JSX.Element;
 9 | export { Logo };
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist-ssr
12 | *.local
13 | 
14 | # Editor directories and files
15 | .vscode/*
16 | !.vscode/extensions.json
17 | .idea
18 | .DS_Store
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/dist/components/UserProfile.d.ts:
--------------------------------------------------------------------------------
 1 | interface ProfileProps {
 2 |     userName?: string;
 3 |     designation?: string;
 4 |     userimg?: string;
 5 |     isCollapse?: boolean;
 6 |     onLogout?: () => void;
 7 | }
 8 | declare const Profile: ({ userName, designation, userimg, isCollapse, onLogout, }: ProfileProps) => import("react/jsx-runtime").JSX.Element;
 9 | export { Profile };
10 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/dist/components/Submenu.d.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | type SubmenuProps = {
 3 |     children: React.ReactNode;
 4 |     title?: string;
 5 |     icon?: React.ReactNode;
 6 |     borderRadius?: string;
 7 |     textFontSize?: string;
 8 |     disabled?: boolean;
 9 | };
10 | declare const Submenu: ({ children, title, icon, borderRadius, textFontSize, disabled, }: SubmenuProps) => import("react/jsx-runtime").JSX.Element;
11 | export { Submenu };
12 | 


--------------------------------------------------------------------------------
/src/components/Links.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactNode, ElementType } from "react";
 2 | 
 3 | interface MenuItemProps {
 4 |   component?: ElementType; // Accepts any valid component (default: "a")
 5 |   children: ReactNode;
 6 |   [key: string]: any; // Allows passing additional props dynamically
 7 | }
 8 | 
 9 | const Links: React.FC<MenuItemProps> = ({
10 |   component: Component = "a",
11 |   children,
12 |   ...props
13 | }) => {
14 |   return (
15 |     <Component {...props} style={{ textDecoration: "none" }}>
16 |       {children}
17 |     </Component>
18 |   );
19 | };
20 | 
21 | export default Links;
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 |     "moduleResolution": "bundler",
 9 |     "allowImportingTsExtensions": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "noEmit": true,
13 |     "jsx": "react-jsx",
14 |     "strict": true,
15 |     "noUnusedLocals": true,
16 |     "noUnusedParameters": true,
17 |     "noFallthroughCasesInSwitch": true,
18 |     "typeRoots": ["./dist/index.d.ts", "node_modules/@types"]
19 |   },
20 |   "include": ["src", "./index.ts"]
21 | }


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | import { defineConfig } from "vite";
 3 | import react from "@vitejs/plugin-react";
 4 | import dts from "vite-plugin-dts";
 5 | 
 6 | export default defineConfig({
 7 |   build: {
 8 |     lib: {
 9 |       entry: path.resolve(__dirname, "src/index.ts"),
10 |       name: "visudha-ui",
11 |       fileName: (format) => `index.${format}.js`,
12 |     },
13 |     rollupOptions: {
14 |       external: ["react", "react-dom"],
15 |       output: {
16 |         globals: {
17 |           react: "React",
18 |           "react-dom": "ReactDOM",
19 |         },
20 |       },
21 |     },
22 |     sourcemap: false,
23 |     emptyOutDir: true,
24 |   },
25 |   plugins: [react(), dts()],
26 | });


--------------------------------------------------------------------------------
/dist/components/MenuItem.d.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | type MenuItemProps = {
 3 |     children: React.ReactNode;
 4 |     icon?: React.ReactNode;
 5 |     component?: React.ElementType;
 6 |     badge?: boolean;
 7 |     link?: string;
 8 |     badgeColor?: "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
 9 |     badgeContent?: string;
10 |     textFontSize?: string;
11 |     borderRadius?: string;
12 |     disabled?: boolean;
13 |     badgeType?: "filled" | "outlined";
14 |     target?: string;
15 |     isSelected?: boolean;
16 | };
17 | declare const MenuItem: ({ children, icon, component, badge, link, badgeColor, badgeContent, textFontSize, borderRadius, disabled, badgeType, target, isSelected, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
18 | export { MenuItem };
19 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 | 


--------------------------------------------------------------------------------
/dist/components/Sidebar.d.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | type SidebarProps = {
 3 |     children: React.ReactNode;
 4 |     width?: string;
 5 |     collapsewidth?: string;
 6 |     textColor?: string;
 7 |     isCollapse?: boolean;
 8 |     themeColor?: string;
 9 |     themeSecondaryColor?: string;
10 |     mode?: "light" | "dark";
11 |     direction?: "ltr" | "rtl";
12 |     userName?: string;
13 |     designation?: string;
14 |     showProfile?: boolean;
15 |     userimg?: string;
16 |     onLogout?: () => void;
17 | };
18 | export declare const SidebarContext: React.Context<{
19 |     width: string;
20 |     collapsewidth: string;
21 |     textColor: string;
22 |     isCollapse: boolean;
23 |     themeColor: string;
24 | }>;
25 | declare const Sidebar: ({ children, width, collapsewidth, textColor, isCollapse, themeColor, themeSecondaryColor, mode, direction, userName, designation, showProfile, userimg, onLogout, }: SidebarProps) => import("react/jsx-runtime").JSX.Element;
26 | export { Sidebar };
27 | 


--------------------------------------------------------------------------------
/src/components/Menu.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import ListSubheader from "@mui/material/ListSubheader";
 3 | import Box from "@mui/material/Box";
 4 | import List from "@mui/material/List";
 5 | import { SidebarContext } from "./Sidebar";
 6 | 
 7 | type MenuProps = {
 8 |   children: React.ReactNode;
 9 |   subHeading?: string;
10 | };
11 | 
12 | const Menu = ({ children, subHeading = "menu" }: MenuProps) => {
13 |   const customizer = React.useContext(SidebarContext);
14 | 
15 |   return (
16 |     <Box sx={{ px: customizer.isCollapse ? 2 : 3, pt: 2 }}>
17 |       <List
18 |         component="nav"
19 |         subheader={
20 |           <ListSubheader
21 |             component="div"
22 |             sx={{
23 |               paddingY: "3px",
24 |               color: customizer.textColor,
25 |               paddingX: "0px",
26 |               lineHeight: "20px",
27 |               fontWeight: "bold",
28 |               fontSize: "12px",
29 |               background: "transparent",
30 |             }}
31 |           >
32 |             {!customizer.isCollapse ? subHeading : "..."}
33 |           </ListSubheader>
34 |         }
35 |       >
36 |         {children}
37 |       </List>
38 |     </Box>
39 |   );
40 | };
41 | 
42 | export { Menu };
43 | 


--------------------------------------------------------------------------------
/dist/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/Logo.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { styled } from "@mui/material/styles";
 3 | import Box from "@mui/material/Box";
 4 | import Typography from "@mui/material/Typography";
 5 | import { SidebarContext } from "./Sidebar";
 6 | import Links from "./Links";
 7 | 
 8 | type LogoProps = {
 9 |   children: React.ReactNode;
10 |   img?: string;
11 |   href?: string;
12 |   component?: React.ElementType;
13 | };
14 | 
15 | const Logo = ({
16 |   children,
17 |   img = "https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png",
18 |   href = "/",
19 |   component,
20 | }: LogoProps) => {
21 |   const customizer = React.useContext(SidebarContext);
22 | 
23 |   const LogoStyled: any = styled("span")(() => ({
24 |     whiteSpace: "nowrap",
25 |     overflow: customizer.isCollapse ? "hidden" : "visible",
26 |     WebkitLineClamp: "1",
27 |     display: "block",
28 | 
29 |     padding: "15px 22px",
30 |     textOverflow: "ellipsis",
31 |   }));
32 | 
33 |   return (
34 |     <Links href={href} component={component} to={href}>
35 |       <LogoStyled>
36 |         {img === "" ? (
37 |           <Typography variant="body1">{children}</Typography>
38 |         ) : (
39 |           <Box
40 |             component="img"
41 |             sx={{
42 |               display: "flex",
43 |               alignItems: "center",
44 |             }}
45 |             src={img}
46 |           />
47 |         )}
48 |       </LogoStyled>
49 |     </Links>
50 |   );
51 | };
52 | 
53 | export { Logo };
54 | 


--------------------------------------------------------------------------------
/src/components/UserProfile.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Box,
 3 |   Avatar,
 4 |   Typography,
 5 |   IconButton,
 6 |   Tooltip,
 7 |   useTheme,
 8 | } from "@mui/material";
 9 | import AlbumOutlinedIcon from "@mui/icons-material/AlbumOutlined";
10 | 
11 | interface ProfileProps {
12 |   userName?: string;
13 |   designation?: string;
14 |   userimg?: string;
15 |   isCollapse?: boolean;
16 |   onLogout?: () => void;
17 | }
18 | 
19 | const Profile = ({
20 |   userName = "",
21 |   designation = "",
22 |   userimg = "",
23 |   isCollapse = false,
24 |   onLogout,
25 | }: ProfileProps) => {
26 |   const theme = useTheme();
27 |   return (
28 |     <Box>
29 |       {isCollapse ? (
30 |         ""
31 |       ) : (
32 |         <Box
33 |           display={"flex"}
34 |           alignItems="center"
35 |           gap={2}
36 |           sx={{
37 |             m: 3,
38 |             p: 2,
39 |             borderRadius: "8px",
40 |             bgcolor: theme.palette.secondary.main + 20,
41 |           }}
42 |         >
43 |           <Avatar alt="Remy Sharp" src={userimg} />
44 | 
45 |           <Box>
46 |             <Typography variant="h6">{userName}</Typography>
47 |             <Typography variant="caption">{designation}</Typography>
48 |           </Box>
49 |           <Box sx={{ ml: "auto" }} onClick={onLogout}>
50 |             <Tooltip title="Logout" placement="top">
51 |               <IconButton color="primary" aria-label="logout" size="small">
52 |                 <AlbumOutlinedIcon />
53 |               </IconButton>
54 |             </Tooltip>
55 |           </Box>
56 |         </Box>
57 |       )}
58 |     </Box>
59 |   );
60 | };
61 | 
62 | export { Profile };
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-mui-sidebar",
 3 |   "version": "1.6.10",
 4 |   "type": "module",
 5 |   "description": "react mui sidebar",
 6 |   "main": "dist/index.umd.js",
 7 |   "module": "dist/index.es.js",
 8 |   "types": "dist/index.d.ts",
 9 |   "exports": {
10 |     ".": {
11 |       "import": "./dist/index.es.js",
12 |       "types": "./dist/index.d.ts"
13 |     }
14 |   },
15 |   "files": [
16 |     "/dist"
17 |   ],
18 |   "publishConfig": {
19 |     "access": "public"
20 |   },
21 |   "scripts": {
22 |     "dev": "vite",
23 |     "build": "tsc -b && vite build",
24 |     "lint": "eslint .",
25 |     "preview": "vite preview"
26 |   },
27 |   "repository": {
28 |     "type": "git",
29 |     "url": "git+https://github.com/adminmart/react-mui-sidebar.git"
30 |   },
31 |   "keywords": [
32 |     "react-mui-sidebar",
33 |     "sidebar",
34 |     "react"
35 |   ],
36 |   "author": "Adminmart Team",
37 |   "license": "MIT",
38 |   "bugs": {
39 |     "url": "https://github.com/adminmart/react-mui-sidebar/issues"
40 |   },
41 |   "homepage": "https://adminmart.com",
42 |   "dependencies": {
43 |     "react-router-dom": "^7.2.0",
44 |     "vite-plugin-dts": "^4.5.0"
45 |   },
46 |   "peerDependencies": {
47 |     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
48 |     "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
49 |     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
50 |     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
51 |   },
52 |   "devDependencies": {
53 |     "@emotion/react": "^11.14.0",
54 |     "@emotion/styled": "^11.14.0",
55 |     "@eslint/js": "^9.17.0",
56 |     "@mui/icons-material": "^6.4.0",
57 |     "@mui/material": "^6.4.0",
58 |     "@types/node": "^22.10.7",
59 |     "@vitejs/plugin-react": "^4.3.4",
60 |     "eslint": "^9.17.0",
61 |     "eslint-plugin-react-hooks": "^5.0.0",
62 |     "eslint-plugin-react-refresh": "^0.4.16",
63 |     "globals": "^15.14.0",
64 |     "typescript": "~5.6.2",
65 |     "typescript-eslint": "^8.18.2",
66 |     "vite": "^6.0.5"
67 |   }
68 | }


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import { Sidebar } from "./components/Sidebar";
 3 | import { Logo } from "./components/Logo";
 4 | import { Menu } from "./components/Menu";
 5 | import { MenuItem } from "./components/MenuItem";
 6 | import { Submenu } from "./components/Submenu";
 7 | import AccessAlarms from "@mui/icons-material/AccessAlarms";
 8 | import CottageOutlinedIcon from "@mui/icons-material/CottageOutlined";
 9 | import { Link, BrowserRouter } from "react-router-dom";
10 | 
11 | function App() {
12 |   return (
13 |     <BrowserRouter>
14 |       <Sidebar width={"270px"}>
15 |         <Logo
16 |           component={Link}
17 |           href="/"
18 |           img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
19 |         >
20 |           AdminMart
21 |         </Logo>
22 |         <Menu subHeading="HOME">
23 |           <MenuItem
24 |             icon={<CottageOutlinedIcon />}
25 |             component={Link}
26 |             link="/tes"
27 |             badge={true}
28 |             isSelected={true}
29 |           >
30 |             {" "}
31 |             {/* Set badge to boolean true */}
32 |             Modern
33 |           </MenuItem>
34 |           <MenuItem icon={<AccessAlarms />} component={Link} link="/test">
35 |             eCommerce
36 |           </MenuItem>
37 |           <MenuItem component={Link} link="/ana">
38 |             Analytical
39 |           </MenuItem>
40 |         </Menu>
41 |         <Menu subHeading="APPS">
42 |           <MenuItem>Chat</MenuItem>
43 |           <MenuItem>Calendar</MenuItem>
44 |         </Menu>
45 |         <Menu subHeading="OTHERS">
46 |           <Submenu title="Menu Level">
47 |             <MenuItem>Post</MenuItem>
48 |             <MenuItem>Details</MenuItem>
49 |             <Submenu title="Level 2">
50 |               <MenuItem>new</MenuItem>
51 |               <MenuItem>Hello</MenuItem>
52 |             </Submenu>
53 |           </Submenu>
54 | 
55 |           <MenuItem>Chip</MenuItem>
56 |           <MenuItem target="_blank" component={Link} link="https://google.com">
57 |             External Link
58 |           </MenuItem>
59 |         </Menu>
60 |       </Sidebar>
61 |     </BrowserRouter>
62 |   );
63 | }
64 | 
65 | export default App;
66 | 


--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { Box } from "@mui/material";
  3 | import { createTheme, ThemeProvider } from "@mui/material/styles";
  4 | import { Profile } from "./UserProfile";
  5 | 
  6 | type SidebarProps = {
  7 |   children: React.ReactNode;
  8 |   width?: string;
  9 |   collapsewidth?: string;
 10 |   textColor?: string;
 11 |   isCollapse?: boolean;
 12 |   themeColor?: string;
 13 |   themeSecondaryColor?: string;
 14 |   mode?: "light" | "dark";
 15 |   direction?: "ltr" | "rtl";
 16 |   userName?: string;
 17 |   designation?: string;
 18 |   showProfile?: boolean;
 19 |   userimg?: string;
 20 |   onLogout?: () => void;
 21 | };
 22 | 
 23 | export const SidebarContext = React.createContext({
 24 |   width: "270px",
 25 |   collapsewidth: "80px",
 26 |   textColor: "#8D939D",
 27 |   isCollapse: false,
 28 |   themeColor: "#5d87ff",
 29 | });
 30 | 
 31 | let handleLogout = () => {
 32 |   alert("Logout Successfully");
 33 | };
 34 | 
 35 | const Sidebar = ({
 36 |   children,
 37 |   width = "260px",
 38 |   collapsewidth = "80px",
 39 |   textColor = "#2b2b2b",
 40 |   isCollapse = false,
 41 |   themeColor = "#5d87ff",
 42 |   themeSecondaryColor = "#49beff",
 43 |   mode = "light",
 44 |   direction = "ltr",
 45 |   userName = "Mathew",
 46 |   designation = "Designer",
 47 |   showProfile = true,
 48 |   userimg = "https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/profile/user-1.jpg",
 49 |   onLogout = handleLogout,
 50 | }: SidebarProps) => {
 51 |   const [isSidebarHover, _setIsSidebarHover] = React.useState(false);
 52 |   const toggleWidth = isCollapse && !isSidebarHover ? collapsewidth : width;
 53 |   // const theme = useTheme();
 54 |   const myTheme = createTheme({
 55 |     direction: direction,
 56 |     palette: {
 57 |       mode: mode,
 58 |       primary: {
 59 |         main: themeColor,
 60 |       },
 61 |       secondary: {
 62 |         main: themeSecondaryColor,
 63 |         contrastText: "#fff",
 64 |       },
 65 |     },
 66 |   });
 67 | 
 68 |   if (mode === "dark") {
 69 |     textColor = "rgba(255,255,255, 0.9)";
 70 |   }
 71 | 
 72 |   return (
 73 |     <ThemeProvider theme={myTheme}>
 74 |       <Box
 75 |         dir={direction}
 76 |         sx={{
 77 |           width: toggleWidth,
 78 |           flexShrink: 0,
 79 |           fontFamily: "inherit",
 80 |           color: textColor,
 81 |         }}
 82 |       >
 83 |         <Box sx={{ width: toggleWidth }}>
 84 |           <SidebarContext.Provider
 85 |             value={{ textColor, isCollapse, width, collapsewidth, themeColor }}
 86 |           >
 87 |             {children}
 88 |           </SidebarContext.Provider>
 89 |           {showProfile ? (
 90 |             <Profile
 91 |               userName={userName}
 92 |               designation={designation}
 93 |               userimg={userimg}
 94 |               isCollapse={isCollapse}
 95 |               onLogout={onLogout}
 96 |             />
 97 |           ) : null}
 98 |         </Box>
 99 |       </Box>
100 |     </ThemeProvider>
101 |   );
102 | };
103 | 
104 | export { Sidebar };
105 | 


--------------------------------------------------------------------------------
/src/components/Submenu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import List from "@mui/material/List";
  3 | import ListItemButton from "@mui/material/ListItemButton";
  4 | import ListItemIcon from "@mui/material/ListItemIcon";
  5 | import ListItemText from "@mui/material/ListItemText";
  6 | import Collapse from "@mui/material/Collapse";
  7 | import Typography from "@mui/material/Typography";
  8 | import ExpandLess from "@mui/icons-material/ExpandLess";
  9 | import ExpandMore from "@mui/icons-material/ExpandMore";
 10 | import { styled } from "@mui/material/styles";
 11 | import Box from "@mui/material/Box";
 12 | import { SidebarContext } from "./Sidebar";
 13 | import CircleOutlined from "@mui/icons-material/CircleOutlined";
 14 | 
 15 | type SubmenuProps = {
 16 |   children: React.ReactNode;
 17 |   title?: string;
 18 |   icon?: React.ReactNode;
 19 |   borderRadius?: string;
 20 |   textFontSize?: string;
 21 |   disabled?: boolean;
 22 | };
 23 | 
 24 | const Submenu = (
 25 |   (
 26 |     {
 27 |       children,
 28 |       title = "",
 29 |       icon,
 30 |       borderRadius = "8px",
 31 |       textFontSize = "14px",
 32 |       disabled = false,
 33 |     }:SubmenuProps
 34 |   ) => {
 35 |     const customizer = React.useContext(SidebarContext);
 36 |     const [open, setOpen] = React.useState(false);
 37 | 
 38 |     const handleClick = () => {
 39 |       setOpen(!open);
 40 |     };
 41 | 
 42 |     const ListItemStyled = styled(ListItemButton)(() => ({
 43 |       whiteSpace: "nowrap",
 44 |       marginBottom: "2px",
 45 |       padding: "10px 12px",
 46 |       borderRadius: borderRadius,
 47 |       color: open ? "#fff" : customizer.textColor,
 48 |       cursor: disabled ? "default" : "pointer",
 49 |       opacity: disabled ? "0.6" : "1",
 50 |       backgroundColor: !open ? "" : customizer.themeColor,
 51 |       ".MuiListItemIcon-root": {
 52 |         color: open ? "#fff" : customizer.textColor,
 53 |       },
 54 |       "&:hover": {
 55 |         backgroundColor: open ? customizer.themeColor : customizer.themeColor + 20,
 56 |         color: open ? "#fff" : customizer.themeColor,
 57 |         ".MuiListItemIcon-root": {
 58 |           color: open ? "#fff" : customizer.themeColor,
 59 |         },
 60 |       },
 61 |     }));
 62 | 
 63 |     const ListIConStyled = styled(ListItemIcon)(() => ({
 64 |       display: "flex",
 65 |       gap: "10px",
 66 |       marginBottom: "0px",
 67 |       padding: "0px",
 68 |       minWidth: "30px",
 69 |       cursor: "pointer",
 70 |       color: "inherit",
 71 |     }));
 72 | 
 73 |     return (
 74 |       <Box>
 75 |         <ListItemStyled onClick={handleClick} sx={{ display: "flex", gap: "15px" }}>
 76 |           <ListIConStyled style={{ minWidth: "0px" }}>
 77 |             {icon ? icon : <CircleOutlined />}
 78 |           </ListIConStyled>
 79 |           {!customizer.isCollapse && (
 80 |             <>
 81 |               <ListItemText sx={{ my: 0 }}>
 82 |                 <Typography fontSize={textFontSize} sx={{ lineHeight: "1" }} variant="caption">
 83 |                   {title}
 84 |                 </Typography>
 85 |               </ListItemText>
 86 |               {open ? <ExpandLess /> : <ExpandMore />}
 87 |             </>
 88 |           )}
 89 |         </ListItemStyled>
 90 | 
 91 |         <Collapse in={open} timeout="auto" unmountOnExit>
 92 |           <List component="div" disablePadding>
 93 |             {children}
 94 |           </List>
 95 |         </Collapse>
 96 |       </Box>
 97 |     );
 98 |   }
 99 | );
100 | 
101 | export {Submenu};


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/MenuItem.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import ListItemIcon from "@mui/material/ListItemIcon";
  3 | import { styled, useTheme } from "@mui/material/styles";
  4 | import ListItemText from "@mui/material/ListItemText";
  5 | import Chip from "@mui/material/Chip";
  6 | import Typography from "@mui/material/Typography";
  7 | import Box from "@mui/material/Box";
  8 | import ListItemButton from "@mui/material/ListItemButton";
  9 | import { SidebarContext } from "./Sidebar";
 10 | import CircleOutlined from "@mui/icons-material/CircleOutlined";
 11 | import Links from "./Links";
 12 | 
 13 | type MenuItemProps = {
 14 |   children: React.ReactNode;
 15 |   icon?: React.ReactNode;
 16 |   component?: React.ElementType;
 17 |   badge?: boolean;
 18 |   link?: string;
 19 |   badgeColor?:
 20 |     | "default"
 21 |     | "primary"
 22 |     | "secondary"
 23 |     | "error"
 24 |     | "info"
 25 |     | "success"
 26 |     | "warning";
 27 |   badgeContent?: string;
 28 |   badgeTextColor?: string;
 29 |   textFontSize?: string;
 30 |   borderRadius?: string;
 31 |   disabled?: boolean;
 32 |   badgeType?: "filled" | "outlined";
 33 |   target?: string;
 34 |   isSelected?: boolean;
 35 | };
 36 | 
 37 | const MenuItem = ({
 38 |   children,
 39 |   icon,
 40 |   component,
 41 |   badge = false,
 42 |   link = "/",
 43 |   badgeColor = "secondary",
 44 |   badgeContent = "6",
 45 |   badgeTextColor = "#fff",
 46 |   textFontSize = "14px",
 47 |   borderRadius = "8px",
 48 |   disabled = false,
 49 |   badgeType = "filled",
 50 |   target = "",
 51 |   isSelected = false,
 52 | }: MenuItemProps) => {
 53 |   const customizer = React.useContext(SidebarContext);
 54 |   const theme = useTheme();
 55 |   const ListItemStyled: any = styled(ListItemButton)(() => ({
 56 |     whiteSpace: "nowrap",
 57 |     marginBottom: "2px",
 58 |     padding: "10px 12px",
 59 |     width: "100%",
 60 |     textAlign: theme.direction === "ltr" ? "left" : "right",
 61 |     borderRadius: borderRadius,
 62 |     color: customizer.textColor,
 63 |     cursor: disabled ? "default" : "pointer",
 64 |     opacity: disabled ? "0.6" : "1",
 65 |     ".MuiListItemIcon-root": {
 66 |       color: customizer.textColor,
 67 |     },
 68 |     "&:hover": {
 69 |       backgroundColor: disabled ? "#fff" : customizer.themeColor + 20,
 70 |       color: customizer.themeColor,
 71 |       ".MuiListItemIcon-root": {
 72 |         color: customizer.themeColor,
 73 |       },
 74 |     },
 75 |     "&.Mui-selected": {
 76 |       color: "white",
 77 |       backgroundColor: customizer.themeColor,
 78 |       "&:hover": {
 79 |         backgroundColor: customizer.themeColor,
 80 |         color: "white",
 81 |       },
 82 |       ".MuiListItemIcon-root": {
 83 |         color: "#fff",
 84 |       },
 85 |     },
 86 |   }));
 87 | 
 88 |   const ListIConStyled = styled(ListItemIcon)(() => ({
 89 |     display: "flex",
 90 |     justifyContent: "center",
 91 |     alignItems: "center",
 92 |     gap: "10px",
 93 |     marginBottom: "0px",
 94 |     padding: "0px",
 95 |     cursor: "pointer",
 96 | 
 97 |     color: "inherit",
 98 |   }));
 99 | 
100 |   return (
101 |     <Box>
102 |       <Links component={component} href={link} to={link}>
103 |         <ListItemStyled
104 |           sx={{ display: "flex", gap: "15px" }}
105 |           target={target}
106 |           selected={isSelected ? true : false}
107 |         >
108 |           <ListIConStyled
109 |             sx={{
110 |               minWidth: "0px",
111 |             }}
112 |           >
113 |             {icon ? icon : <CircleOutlined />}
114 |           </ListIConStyled>
115 |           {!customizer.isCollapse ? (
116 |             <>
117 |               <ListItemText sx={{ my: 0 }}>
118 |                 <Typography
119 |                   fontSize={textFontSize}
120 |                   sx={{ lineHeight: "1" }}
121 |                   variant="caption"
122 |                 >
123 |                   {children}
124 |                 </Typography>
125 |               </ListItemText>
126 | 
127 |               {badge && (
128 |                 <Chip
129 |                   label={badgeContent}
130 |                   color={badgeColor}
131 |                   variant={badgeType}
132 |                   size="small"
133 |                   sx={{ color: badgeTextColor }}
134 |                 />
135 |               )}
136 |             </>
137 |           ) : null}
138 |         </ListItemStyled>
139 |       </Links>
140 |     </Box>
141 |   );
142 | };
143 | 
144 | export { MenuItem };
145 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## React MUI Sidebar
  2 | 
  3 | React MUI Sidebar helps to create side Navigation.
  4 | 
  5 | # Live Demo
  6 | 
  7 | [Demo](https://react-mui-sidebar.vercel.app)
  8 | 
  9 | ## Authors
 10 | 
 11 | - [@adminmart](https://adminmart.com)
 12 | 
 13 | ## Screenshots
 14 | 
 15 | ![App Screenshot](https://adminmart.com/wp-content/uploads/2024/03/mui-sidebar-demo-image.jpg)
 16 | 
 17 | #
 18 | 
 19 | ## 🧩 Live Example — Dashboard Template
 20 | 
 21 | We’ve built a **complete Admin Dashboard Template** using this npm package!  
 22 | It’s the perfect example of how you can use `react-mui-sidebar` in a real-world app.
 23 | 
 24 | 
 25 | 
 26 | [![App Screenshot](https://camo.githubusercontent.com/d41985fb0401c35774203e019c8616f5556ceb62153ad349a4a56354f55569cd/68747470733a2f2f61646d696e6d6172742e636f6d2f77702d636f6e74656e742f75706c6f6164732f323032332f30332f6d6f6465726e697a652d667265652d6e6578742d6a732d61646d696e2d74656d706c6174652e706e67)](https://adminmart.com/product/modernize-free-nextjs-admin-template/?ref=43)
 27 | 
 28 | 👉 **Check it out here:** [Dashboard Template](https://adminmart.com/product/modernize-free-nextjs-admin-template/?ref=43)  
 29 | 
 30 | 
 31 | ## Installation
 32 | 
 33 | To install react mui sidebar npm package
 34 | 
 35 | ```bash
 36 |   npm i react-mui-sidebar
 37 | ```
 38 | 
 39 | ## Issues
 40 | 
 41 | For any Issues, create new issue on https://github.com/adminmart/react-mui-sidebar/issues
 42 | 
 43 | ## Usage/Examples
 44 | 
 45 | ```javascript
 46 | import React from "react";
 47 | 
 48 | import { Sidebar, Menu, MenuItem, Submenu, Logo } from "react-mui-sidebar";
 49 | import AccessAlarms from "@mui/icons-material/AccessAlarms";
 50 | import CottageOutlinedIcon from "@mui/icons-material/CottageOutlined";
 51 | {
 52 |   /* if you are using react then import link from  */
 53 | }
 54 | import { Link } from "react-router-dom";
 55 | {
 56 |   /* if you are using nextjs then import link from  */
 57 | }
 58 | import Link from "next/link";
 59 | 
 60 | const App = () => {
 61 |   return (
 62 |     <Sidebar width={"270px"}>
 63 |       <Logo
 64 |         component={Link}
 65 |         href="/"
 66 |         img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
 67 |       >
 68 |         AdminMart
 69 |       </Logo>
 70 |       <Menu subHeading="HOME">
 71 |         <MenuItem
 72 |           icon={<CottageOutlinedIcon />}
 73 |           component={Link}
 74 |           link="/tes"
 75 |           badge={true}
 76 |           isSelected={true}
 77 |         >
 78 |           {" "}
 79 |           {/* Set badge to boolean true */}
 80 |           Modern
 81 |         </MenuItem>
 82 |         <MenuItem icon={<AccessAlarms />} component={Link} link="/test">
 83 |           eCommerce
 84 |         </MenuItem>
 85 |         <MenuItem component={Link} link="/ana">
 86 |           Analytical
 87 |         </MenuItem>
 88 |       </Menu>
 89 |       <Menu subHeading="APPS">
 90 |         <MenuItem>Chat</MenuItem>
 91 |         <MenuItem>Calendar</MenuItem>
 92 |       </Menu>
 93 |       <Menu subHeading="OTHERS">
 94 |         <Submenu title="Menu Level">
 95 |           <MenuItem>Post</MenuItem>
 96 |           <MenuItem>Details</MenuItem>
 97 |           <Submenu title="Level 2">
 98 |             <MenuItem>new</MenuItem>
 99 |             <MenuItem>Hello</MenuItem>
100 |           </Submenu>
101 |         </Submenu>
102 | 
103 |         <MenuItem>Chip</MenuItem>
104 |         <MenuItem target="_blank" component={Link} link="https://google.com">
105 |           External Link
106 |         </MenuItem>
107 |       </Menu>
108 |     </Sidebar>
109 |   );
110 | };
111 | 
112 | export default App;
113 | ```
114 | 
115 | ## API Reference
116 | 
117 | #### Sidebar Api Reference
118 | 
119 | ```http
120 |   <Sidebar></Sidebar>
121 | ```
122 | 
123 | | Props                 | Type       | Default          | Description                                           |
124 | | :-------------------- | :--------- | :--------------- | ----------------------------------------------------- |
125 | | `width`               | `string`   | `260px`          | set the width of sidebar                              |
126 | | `textColor`           | `string`   | `#2b2b2b`        | set this color to all MenuItem and SubMenu of sidebar |
127 | | `isCollapse`          | `boolean`  | `false`          | set the Sidebar to mini sidebar                       |
128 | | `themeColor`          | `string`   | `#5d87ff`        | set the theme primary color                           |
129 | | `themeSecondaryColor` | `string`   | `#49beff`        | set the theme secondary color                         |
130 | | `mode`                | `string`   | `light`          | set the mode of the Sidebar light or Dark             |
131 | | `direction`           | `string`   | `ltr`            | set the direction of Sidebar ltr or rtl               |
132 | | `userName`            | `string`   | `Mathew`         | set the user name of User Profile                     |
133 | | `designation`         | `string`   | `Designer`       | set the user designation of User Profile              |
134 | | `showProfile`         | `boolean`  | `true`           | show the user profile true or false                   |
135 | | `userimg`             | `string`   | `user image url` | set the image of user in User Profile                 |
136 | | `onLogout`            | `function` | `handleLogout`   | set the logout function for user logout               |
137 | 
138 | #### Menu Api Reference
139 | 
140 | ```http
141 |   <Menu></Menu>
142 | ```
143 | 
144 | | Props        | Type     | Default | Description        |
145 | | :----------- | :------- | :------ | ------------------ |
146 | | `subHeading` | `string` | `menu`  | menu heading title |
147 | 
148 | #### Submenu Api Reference
149 | 
150 | ```http
151 |   <Submenu></Submenu>
152 | ```
153 | 
154 | | Props          | Type        | Default                               | Description                       |
155 | | :------------- | :---------- | :------------------------------------ | --------------------------------- |
156 | | `title`        | `string`    | `blank`                               | title of the submenu              |
157 | | `icon`         | `component` | `mui icon - <FiberManualRecordIcon/>` | set icon of submenu               |
158 | | `borderRadius` | `string`    | `8px`                                 | set border radius of Submenu      |
159 | | `textFontSize` | `string`    | `14px`                                | set text Font Size of the submenu |
160 | | `disabled`     | `boolean`   | `false`                               | enable/disable the Submenu        |
161 | 
162 | #### MenuItem Api Reference
163 | 
164 | ```http
165 |   <MenuItem></MenuItem>
166 | ```
167 | 
168 | | Props            | Type        | Default                               | Description                                         |
169 | | :--------------- | :---------- | :------------------------------------ | --------------------------------------------------- |
170 | | `icon`           | `component` | `mui icon - <FiberManualRecordIcon/>` | set icon of menu item                               |
171 | | `link`           | `string`    | `#`                                   | pass link for component to redirect                 |
172 | | `component `     | `component` | `Link `                               | set react router link or nextjs Link to apply route |
173 | | `badge`          | `boolean`   | `false`                               | set the badge on menu items                         |
174 | | `badgeColor`     | `string`    | `primary`                             | set badge color                                     |
175 | | `badgeTextColor` | `string`    | `#ffffff`                             | set any badge text color                            |
176 | | `badgeContent`   | `string`    | `6`                                   | set content on badge                                |
177 | | `textFontSize`   | `string`    | `14px`                                | set font size of menu item                          |
178 | | `borderRadius`   | `string`    | `8px`                                 | set border radius of menu item                      |
179 | | `disabled`       | `boolean`   | `false`                               | enable/disable the menu item                        |
180 | | `badgeType`      | `string`    | `filled`                              | set badgeType of menu item filled or outlined       |
181 | | `target`         | `string`    | ``                                    | set target of menu item \_blank                     |
182 | | `isSelected`     | `boolean`   | `false`                               | set selected menu item                              |
183 | 
184 | #### Logo Api Reference
185 | 
186 | ```http
187 |   <Logo></Logo>
188 | ```
189 | 
190 | | Props        | Type        | Default    | Description                                         |
191 | | :----------- | :---------- | :--------- | --------------------------------------------------- |
192 | | `img`        | `string`    | `Logo url` | set the logo of the sidebar                         |
193 | | `href`       | `string`    | `set url`  | set any url you wanted to redirect                  |
194 | | `component ` | `component` | `Link `    | set react router link or nextjs Link to apply route |
195 | 
196 | 
197 | ## 🔗 Related Sidebars
198 |  
199 | Looking for a Tailwind CSS alternative to this Material UI-based sidebar?  
200 | Explore our companion package below:
201 |  
202 | ### [React Tailwind Sidebar](https://www.npmjs.com/package/react-tailwind-sidebar)
203 |  
204 | A modern, responsive, and fully customizable sidebar component built with **React** and **Tailwind CSS** — perfect for creating clean and functional dashboards, admin panels, and web applications.
205 |  
206 | ---
207 |  
208 | 💡 Both `react-mui-sidebar` and `react-tailwind-sidebar` are crafted to simplify sidebar development — offering flexible layouts, effortless customization, and developer-friendly APIs.
209 | 
210 | 
211 | ## Contributing
212 | 
213 | Contributions are always welcome!
214 | 
215 | Please adhere to this project's `code of conduct`.
216 | 
217 | 


--------------------------------------------------------------------------------