Skip to content

Commit 46b7857

Browse files
MAKUSrefMAKUSref
committed
Add examples
1 parent 37420c2 commit 46b7857

18 files changed

+962
-1
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
build

‎License.pdf‎

252 KB
Binary file not shown.

‎README.md‎

Lines changed: 286 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,286 @@
1-
# react-side-navbar
1+
Side Navbar is an additional navigation component that provides extensive support and a clear way for navigating through complex websites with hundreds of links and subpages.
2+
3+
Check out [React Side Navbar Documentation](https://mdbootstrap.com/docs/react/extended/side-navbar/) for detailed instructions & even more examples.
4+
5+
## Basic example
6+
7+
![React Side Navbar](https://mdbootstrap.com/img/Marketing/github/side-navbar/basic.png)
8+
9+
```js
10+
import React, { useState } from 'react';
11+
import {
12+
MDBContainer,
13+
MDBNavbar,
14+
MDBNavbarBrand,
15+
MDBNavbarToggler,
16+
MDBIcon,
17+
MDBNavbarNav,
18+
MDBNavbarItem,
19+
MDBNavbarLink,
20+
MDBDropdown,
21+
MDBDropdownToggle,
22+
MDBDropdownMenu,
23+
MDBDropdownItem,
24+
MDBDropdownLink,
25+
MDBCollapse,
26+
MDBRipple,
27+
MDBBadge,
28+
MDBInput,
29+
MDBListGroup,
30+
MDBListGroupItem
31+
} from 'mdb-react-ui-kit';
32+
33+
export default function Basic() {
34+
const [showShow, setShowShow] = useState(false);
35+
36+
const toggleShow = () => setShowShow(!showShow);
37+
38+
return (
39+
<>
40+
<link
41+
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
42+
rel="stylesheet"
43+
/>
44+
<MDBCollapse show={showShow} tag="nav" className="d-lg-block bg-white sidebar">
45+
<div className="position-sticky">
46+
<MDBListGroup flush className="mx-3 mt-4">
47+
48+
<MDBRipple rippleTag='span'>
49+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded rounded'>
50+
<MDBIcon fas icon="tachometer-alt me-3" />
51+
Main Dashboard
52+
</MDBListGroupItem>
53+
</MDBRipple>
54+
55+
<MDBRipple rippleTag='span'>
56+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded' active aria-current='true'>
57+
<MDBIcon fas icon="chart-area me-3" />
58+
Website traffic
59+
</MDBListGroupItem>
60+
</MDBRipple>
61+
62+
<MDBRipple rippleTag='span'>
63+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'>
64+
<MDBIcon fas icon="lock me-3" />
65+
Password
66+
</MDBListGroupItem>
67+
</MDBRipple>
68+
69+
<MDBRipple rippleTag='span'>
70+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'>
71+
<MDBIcon fas icon="chart-line me-3" />
72+
Analitics
73+
</MDBListGroupItem>
74+
</MDBRipple>
75+
76+
<MDBRipple rippleTag='span'>
77+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'>
78+
<MDBIcon fas icon="chart-pie me-3" />
79+
SEO
80+
</MDBListGroupItem>
81+
</MDBRipple>
82+
83+
<MDBRipple rippleTag='span'>
84+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'>
85+
<MDBIcon far icon="chart-bar me-3" />
86+
Orders
87+
</MDBListGroupItem>
88+
</MDBRipple>
89+
90+
<MDBRipple rippleTag='span'>
91+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'>
92+
<MDBIcon fas icon="globe me-3" />
93+
International
94+
</MDBListGroupItem>
95+
</MDBRipple>
96+
97+
<MDBRipple rippleTag='span'>
98+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'>
99+
<MDBIcon fas icon="building me-3" />
100+
Partners
101+
</MDBListGroupItem>
102+
</MDBRipple>
103+
104+
<MDBRipple rippleTag='span'>
105+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'>
106+
<MDBIcon fas icon="calendar me-3" />
107+
Calendar
108+
</MDBListGroupItem>
109+
</MDBRipple>
110+
111+
<MDBRipple rippleTag='span'>
112+
<MDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'>
113+
<MDBIcon fas icon="users me-3" />
114+
User
115+
</MDBListGroupItem>
116+
</MDBRipple>
117+
118+
<MDBRipple rippleTag='span'>
119+
<MDBListGroupItem tag='a' href='#' action className='border-0 rounded'>
120+
<MDBIcon fas icon="money-bill me-3" />
121+
Sales
122+
</MDBListGroupItem>
123+
</MDBRipple>
124+
</MDBListGroup>
125+
</div>
126+
</MDBCollapse>
127+
128+
<MDBNavbar expand='lg' light bgColor='light'>
129+
<MDBContainer fluid>
130+
<MDBNavbarNav className="d-flex flex-row align-items-center w-auto">
131+
<MDBNavbarToggler
132+
type='button'
133+
aria-label='Toggle navigation'
134+
onClick={toggleShow}
135+
>
136+
<MDBIcon icon='bars' fas />
137+
</MDBNavbarToggler>
138+
<MDBNavbarBrand href='#'>
139+
<img
140+
src='https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp'
141+
height='30'
142+
alt=''
143+
loading='lazy'
144+
/>
145+
</MDBNavbarBrand>
146+
147+
<MDBCollapse navbar>
148+
<MDBNavbarItem className="d-flex align-items-center">
149+
<MDBInput label='Search (ctrl + "/" to focus)' id='form1' type='text' />
150+
<MDBIcon fas icon="search mx-2" />
151+
</MDBNavbarItem>
152+
</MDBCollapse>
153+
154+
155+
</MDBNavbarNav>
156+
<MDBNavbarNav className="d-flex flex-row justify-content-end w-auto">
157+
158+
<MDBNavbarItem className='me-3 me-lg-0 d-flex align-items-center'>
159+
<MDBDropdown>
160+
161+
<MDBDropdownToggle tag="a" href="#!" className="hidden-arrow nav-link">
162+
<MDBIcon fas icon="bell" />
163+
<MDBBadge color='danger' notification pill>
164+
1
165+
</MDBBadge>
166+
</MDBDropdownToggle>
167+
168+
<MDBDropdownMenu>
169+
<MDBDropdownItem>
170+
<MDBDropdownLink href="#">Some news</MDBDropdownLink>
171+
</MDBDropdownItem>
172+
<MDBDropdownItem>
173+
<MDBDropdownLink href="#">Another news</MDBDropdownLink>
174+
</MDBDropdownItem>
175+
<MDBDropdownItem>
176+
<MDBDropdownLink href="#">Something else here</MDBDropdownLink>
177+
</MDBDropdownItem>
178+
</MDBDropdownMenu>
179+
</MDBDropdown>
180+
</MDBNavbarItem>
181+
182+
183+
<MDBNavbarItem className='me-3 me-lg-0'>
184+
<MDBNavbarLink href='#'>
185+
<MDBIcon fas icon='fill-drip' />
186+
</MDBNavbarLink>
187+
</MDBNavbarItem>
188+
<MDBNavbarItem className='me-3 me-lg-0'>
189+
<MDBNavbarLink href='#'>
190+
<MDBIcon fab icon='github' />
191+
</MDBNavbarLink>
192+
</MDBNavbarItem>
193+
194+
<MDBNavbarItem className='me-3 me-lg-0 d-flex align-items-center'>
195+
<MDBDropdown>
196+
197+
<MDBDropdownToggle tag="a" href="#!" className="hidden-arrow nav-link">
198+
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" className="rounded-circle" height="22" alt="" loading="lazy" />
199+
</MDBDropdownToggle>
200+
201+
<MDBDropdownMenu>
202+
<MDBDropdownItem>
203+
<MDBDropdownLink href="#">My profile</MDBDropdownLink>
204+
</MDBDropdownItem>
205+
<MDBDropdownItem>
206+
<MDBDropdownLink href="#">Settings</MDBDropdownLink>
207+
</MDBDropdownItem>
208+
<MDBDropdownItem>
209+
<MDBDropdownLink href="#">Logout</MDBDropdownLink>
210+
</MDBDropdownItem>
211+
</MDBDropdownMenu>
212+
</MDBDropdown>
213+
</MDBNavbarItem>
214+
</MDBNavbarNav>
215+
216+
</MDBContainer>
217+
</MDBNavbar>
218+
</>
219+
);
220+
}
221+
```
222+
223+
```css
224+
body {
225+
background-color: #fbfbfb;
226+
}
227+
228+
@media (min-width: 992px) {
229+
.sidebar {
230+
height: unset!important;
231+
}
232+
}
233+
234+
/* Sidebar */
235+
.sidebar {
236+
position: fixed;
237+
top: 0;
238+
bottom: 0;
239+
left: 0;
240+
padding: 58px 0 0;
241+
/* Height of navbar */
242+
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
243+
width: 240px;
244+
/* z-index: 600; */
245+
}
246+
247+
.sidebar.show {
248+
height: 100vh;
249+
}
250+
251+
@media (max-width: 992px) {
252+
.sidebar {
253+
width: 100%;
254+
}
255+
}
256+
257+
.sidebar .active {
258+
border-radius: 5px;
259+
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
260+
}
261+
262+
.sidebar-sticky {
263+
position: relative;
264+
top: 0;
265+
height: calc(100vh - 48px);
266+
padding-top: 0.5rem;
267+
overflow-x: hidden;
268+
overflow-y: auto;
269+
/* Scrollable contents if viewport is shorter than content. */
270+
}
271+
```
272+
273+
## How to use?
274+
275+
1. Download MDB React - free UI KIT
276+
277+
2. Choose your favourite customized component and click on the image
278+
279+
3. Copy & paste the code into your MDB project
280+
281+
[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)
282+
283+
## More examples
284+
285+
[React Side Navbar Collapse:
286+
![React Side Navbar Collapse](https://mdbootstrap.com/img/Marketing/github/side-navbar/collapse.png)](https://mdbootstrap.com/docs/react/extended/side-navbar/#section-collapse)

‎package.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "@mdbootstrap/react-side-navbar",
3+
"version": "1.0.0",
4+
"description": "Side Navbar is an additional navigation component that provides extensive support and a clear way for navigating through complex websites with hundreds of links and subpages.",
5+
"dependencies": {
6+
"mdb-react-ui-kit": "^4.0.0",
7+
"react": "^18.1.0",
8+
"react-dom": "^18.1.0",
9+
"react-router-dom": "^6.3.0",
10+
"react-scripts": "5.0.1",
11+
"web-vitals": "^2.1.4"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"keywords": [
20+
"bootstrap",
21+
"navigation",
22+
"bootstrap5",
23+
"menu",
24+
"sidebar",
25+
"responsive-design",
26+
"bootstrap-template",
27+
"bootstrap-navigation",
28+
"bootstrap-slidebar",
29+
"bootstrap-sidenav",
30+
"template",
31+
"react"
32+
],
33+
"author": "MDBootstrap",
34+
"license": "MIT",
35+
"browserslist": {
36+
"production": [
37+
">0.2%",
38+
"not dead",
39+
"not op_mini all"
40+
],
41+
"development": [
42+
"last 1 chrome version",
43+
"last 1 firefox version",
44+
"last 1 safari version"
45+
]
46+
}
47+
}

‎public/favicon.ico‎

3.78 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<link
14+
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
15+
rel="stylesheet"
16+
/>
17+
<link
18+
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
19+
rel="stylesheet"
20+
/>
21+
22+
<!--
23+
manifest.json provides metadata used when your web app is installed on a
24+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
25+
-->
26+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
27+
<!--
28+
Notice the use of %PUBLIC_URL% in the tags above.
29+
It will be replaced with the URL of the `public` folder during the build.
30+
Only files inside the `public` folder can be referenced from the HTML.
31+
32+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
33+
work correctly both with client-side routing and a non-root public URL.
34+
Learn how to configure a non-root public URL by running `npm run build`.
35+
-->
36+
<title>MDBReact5 Template App</title>
37+
</head>
38+
<body>
39+
<noscript>You need to enable JavaScript to run this app.</noscript>
40+
<div id="root"></div>
41+
<!--
42+
This HTML file is a template.
43+
If you open it directly in the browser, you will see an empty page.
44+
45+
You can add webfonts, meta tags, or analytics to this file.
46+
The build step will place the bundled scripts into the <body> tag.
47+
48+
To begin the development, run `npm start` or `yarn start`.
49+
To create a production bundle, use `npm run build` or `yarn build`.
50+
-->
51+
</body>
52+
</html>

‎public/logo192.png‎

5.22 KB
Loading

‎public/logo512.png‎

9.44 KB
Loading

0 commit comments

Comments
 (0)