Skip to content

Commit 8abf33f

Browse files
wrappixelTeamwrappixelTeam
committed
updated_ts
1 parent 045ba2c commit 8abf33f

21 files changed

+888
-0
lines changed

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
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+
## Installation
20+
21+
To install react mui sidebar npm package
22+
23+
```bash
24+
npm i react-mui-sidebar
25+
```
26+
27+
## Issues
28+
29+
For any Issues, create new issue on https://github.com/adminmart/react-mui-sidebar/issues
30+
31+
## Usage/Examples
32+
33+
```javascript
34+
import React from "react";
35+
36+
import { Sidebar, Menu, MenuItem, Submenu, Logo } from "react-mui-sidebar";
37+
38+
const App = () => {
39+
return (
40+
<Sidebar width={"270px"}>
41+
<Logo img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png">
42+
AdminMart
43+
</Logo>
44+
<Menu subHeading="HOME">
45+
<MenuItem link="/" badge="true">
46+
Modern
47+
</MenuItem>
48+
<MenuItem>eCommerce</MenuItem>
49+
<MenuItem>Analytical</MenuItem>
50+
</Menu>
51+
<Menu subHeading="APPS">
52+
<MenuItem>Chat</MenuItem>
53+
<MenuItem>Calendar</MenuItem>
54+
</Menu>
55+
<Menu subHeading="OTHERS">
56+
<Submenu title="Menu Level">
57+
<MenuItem>Post</MenuItem>
58+
<MenuItem>Details</MenuItem>
59+
<Submenu title="Level 2">
60+
<MenuItem>new</MenuItem>
61+
<MenuItem>Hello</MenuItem>
62+
</Submenu>
63+
</Submenu>
64+
65+
<MenuItem>Chip</MenuItem>
66+
<MenuItem target="_blank" link="google.com">
67+
External Link
68+
</MenuItem>
69+
</Menu>
70+
</Sidebar>
71+
);
72+
};
73+
74+
export default App;
75+
```
76+
77+
## API Reference
78+
79+
#### Sidebar Api Reference
80+
81+
```http
82+
<Sidebar></Sidebar>
83+
```
84+
85+
| Props | Type | Default | Description |
86+
| :-------------------- | :-------- | :--------------- | ----------------------------------------------------- |
87+
| `width` | `string` | `260px` | set the width of sidebar |
88+
| `textColor` | `string` | `#2b2b2b` | set this color to all MenuItem and SubMenu of sidebar |
89+
| `isCollapse` | `boolean` | `false` | set the Sidebar to mini sidebar |
90+
| `themeColor` | `string` | `#5d87ff` | set the theme primary color |
91+
| `themeSecondaryColor` | `string` | `#49beff` | set the theme secondary color |
92+
| `mode` | `string` | `light` | set the mode of the Sidebar light or Dark |
93+
| `direction` | `string` | `ltr` | set the direction of Sidebar ltr or rtl |
94+
| `userName` | `string` | `Mathew` | set the user name of User Profile |
95+
| `designation` | `string` | `Designer` | set the user designation of User Profile |
96+
| `showProfile` | `boolean` | `true` | show the user profile true or false |
97+
| `userimg` | `string` | `user image url` | set the image of user in User Profile |
98+
| `onLogout` | `function`| `handleLogout` | set the logout function for user logout |
99+
100+
#### Menu Api Reference
101+
102+
```http
103+
<Menu></Menu>
104+
```
105+
106+
| Props | Type | Default | Description |
107+
| :----------- | :------- | :------ | ------------------ |
108+
| `subHeading` | `string` | `menu` | menu heading title |
109+
110+
#### Submenu Api Reference
111+
112+
```http
113+
<Submenu></Submenu>
114+
```
115+
116+
| Props | Type | Default | Description |
117+
| :------------- | :---------- | :------------------------------------ | --------------------------------- |
118+
| `title` | `string` | `blank` | title of the submenu |
119+
| `icon` | `component` | `mui icon - <FiberManualRecordIcon/>` | set icon of submenu |
120+
| `borderRadius` | `string` | `8px` | set border radius of Submenu |
121+
| `textFontSize` | `string` | `14px` | set text Font Size of the submenu |
122+
| `disabled` | `boolean` | `false` | enable/disable the Submenu |
123+
124+
#### MenuItem Api Reference
125+
126+
```http
127+
<MenuItem></MenuItem>
128+
```
129+
130+
| Props | Type | Default | Description |
131+
| :------------- | :---------- | :------------------------------------ | --------------------------------------------- |
132+
| `icon` | `component` | `mui icon - <FiberManualRecordIcon/>` | set icon of menu item |
133+
| `link` | `string` | `#` | pass link for component to redirect |
134+
| `badge` | `boolean` | `false` | set the badge on menu items |
135+
| `badgeColor` | `string` | `primary` | set badge color |
136+
| `badgeContent` | `string` | `6` | set content on badge |
137+
| `textFontSize` | `string` | `14px` | set font size of menu item |
138+
| `borderRadius` | `string` | `8px` | set border radius of menu item |
139+
| `disabled` | `boolean` | `false` | enable/disable the menu item |
140+
| `badgeType` | `string` | `filled` | set badgeType of menu item filled or outlined |
141+
| `target` | `string` | `` | set target of menu item \_blank |
142+
143+
#### Logo Api Reference
144+
145+
```http
146+
<Logo></Logo>
147+
```
148+
149+
| Props | Type | Default | Description |
150+
| :---- | :------- | :--------- | --------------------------- |
151+
| `img` | `string` | `Logo url` | set the logo of the sidebar |
152+
153+
## Contributing
154+
155+
Contributions are always welcome!
156+
157+
Please adhere to this project's `code of conduct`.

‎eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
)

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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>

‎package.json‎

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

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.css‎

Whitespace-only changes.

‎src/App.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
import './App.css';
3+
4+
import { Sidebar } from "./components/Sidebar";
5+
import { Logo } from "./components/Logo";
6+
import { Menu } from "./components/Menu";
7+
import { MenuItem } from "./components/MenuItem";
8+
import { Submenu } from './components/Submenu';
9+
import AccessAlarms from "@mui/icons-material/AccessAlarms";
10+
import CottageOutlinedIcon from '@mui/icons-material/CottageOutlined';
11+
12+
function App() {
13+
return (
14+
<Sidebar width={"270px"}>
15+
<Logo img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png">
16+
AdminMart
17+
</Logo>
18+
<Menu subHeading="HOME">
19+
<MenuItem icon={<CottageOutlinedIcon/>} link="/" badge={true}> {/* Set badge to boolean true */}
20+
Modern
21+
</MenuItem>
22+
<MenuItem icon={<AccessAlarms/>}>eCommerce</MenuItem>
23+
<MenuItem>Analytical</MenuItem>
24+
</Menu>
25+
<Menu subHeading="APPS">
26+
<MenuItem>Chat</MenuItem>
27+
<MenuItem>Calendar</MenuItem>
28+
</Menu>
29+
<Menu subHeading="OTHERS">
30+
<Submenu title="Menu Level">
31+
<MenuItem>Post</MenuItem>
32+
<MenuItem>Details</MenuItem>
33+
<Submenu title="Level 2">
34+
<MenuItem>new</MenuItem>
35+
<MenuItem>Hello</MenuItem>
36+
</Submenu>
37+
</Submenu>
38+
39+
<MenuItem>Chip</MenuItem>
40+
<MenuItem target="_blank" link="google.com">
41+
External Link
42+
</MenuItem>
43+
</Menu>
44+
</Sidebar>
45+
);
46+
}
47+
48+
export default App;

‎src/assets/react.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Logo.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import * as React from "react";
2+
import { styled } from "@mui/material/styles";
3+
import Link from "@mui/material/ListItemText";
4+
import Box from "@mui/material/Box";
5+
import Typography from "@mui/material/Typography";
6+
import { SidebarContext } from "./Sidebar";
7+
8+
type LogoProps = {
9+
children: React.ReactNode;
10+
img?: string;
11+
};
12+
13+
const Logo = (
14+
({ children, img = "https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png" }:LogoProps) => {
15+
const customizer = React.useContext(SidebarContext);
16+
17+
const LogoStyled:any = styled(Link)(() => ({
18+
whiteSpace: "nowrap",
19+
overflow: customizer.isCollapse ? 'hidden' : 'visible',
20+
WebkitLineClamp: '1',
21+
fontSize: '2rem',
22+
padding: '15px 22px',
23+
textOverflow: 'ellipsis',
24+
}));
25+
26+
return (
27+
<LogoStyled href="/" >
28+
{img === "" ? (
29+
<Typography variant="body1">
30+
{children}
31+
</Typography>
32+
) : (
33+
<Box
34+
component="img"
35+
sx={{
36+
display: "flex",
37+
alignItems: "center",
38+
}}
39+
src={img}
40+
/>
41+
)}
42+
</LogoStyled>
43+
);
44+
}
45+
);
46+
47+
export {Logo};

0 commit comments

Comments
 (0)