Skip to content

Commit 6c38191

Browse files
MAKUSrefMAKUSref
committed
Update README.md
1 parent 4a82dde commit 6c38191

File tree

1 file changed

+287
-1
lines changed

1 file changed

+287
-1
lines changed

‎README.md‎

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

0 commit comments

Comments
 (0)