Skip to content

Commit 5557919

Browse files
mrholekmrholek
committed
docs: update examples
1 parent c0803e7 commit 5557919

File tree

2 files changed

+226
-26
lines changed

2 files changed

+226
-26
lines changed

‎packages/docs/content/components/sidebar.mdx‎

Lines changed: 216 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ other_frameworks: sidebar
88
---
99

1010
import CIcon from '@coreui/icons-react'
11-
import { cilPuzzle, cilSpeedometer } from '@coreui/icons'
11+
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'
1212

1313
import {
1414
CBadge,
@@ -37,56 +37,246 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
3737

3838
## Examples
3939

40-
```jsx preview
41-
<CSidebar>
42-
<CSidebarBrand>Sidebar Brand</CSidebarBrand>
40+
### Sidebar component
41+
42+
Below is an sidebar example that is shown by default on desktop devices.
43+
44+
<Example className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">
45+
<CSidebar className="border-end">
46+
<CSidebarHeader className="border-bottom">
47+
<CSidebarBrand>CoreUI</CSidebarBrand>
48+
</CSidebarHeader>
49+
<CSidebarNav>
50+
<CNavTitle>Nav Title</CNavTitle>
51+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
52+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
53+
<CNavGroup
54+
toggler={
55+
<>
56+
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
57+
</>
58+
}
59+
>
60+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
61+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
62+
</CNavGroup>
63+
<CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
64+
<CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
65+
</CSidebarNav>
66+
<CSidebarHeader className="border-top">
67+
<CSidebarToggler />
68+
</CSidebarHeader>
69+
</CSidebar>
70+
</Example>
71+
72+
```jsx
73+
<CSidebar className="border-end">
74+
<CSidebarHeader className="border-bottom">
75+
<CSidebarBrand>CoreUI</CSidebarBrand>
76+
</CSidebarHeader>
4377
<CSidebarNav>
4478
<CNavTitle>Nav Title</CNavTitle>
45-
<CNavItem href="#">
46-
<CIcon customClassName="nav-icon" icon={cilSpeedometer} />
47-
Nav item
48-
</CNavItem>
49-
<CNavItem href="#">
50-
<CIcon customClassName="nav-icon" icon={cilSpeedometer} />
51-
With badge
52-
<CBadge color="primary ms-auto">NEW</CBadge>
53-
</CNavItem>
54-
<CNavGroup toggler="Nav dropdown">
55-
<CNavItem href="#">
56-
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown item
57-
</CNavItem>
58-
<CNavItem href="#">
59-
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown item
60-
</CNavItem>
79+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
80+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
81+
<CNavGroup
82+
toggler={
83+
<>
84+
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
85+
</>
86+
}
87+
>
88+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
89+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
6190
</CNavGroup>
91+
<CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
92+
<CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
93+
</CSidebarNav>
94+
<CSidebarHeader className="border-top">
95+
<CSidebarToggler />
96+
</CSidebarHeader>
97+
</CSidebar>
98+
```
99+
100+
### Narrow sidebar
101+
102+
Add the `narrow` property to make the sidebar narrow.
103+
104+
<Example className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">
105+
<CSidebar className="border-end" narrow>
106+
<CSidebarHeader className="border-bottom">
107+
<CSidebarBrand>CUI</CSidebarBrand>
108+
</CSidebarHeader>
109+
<CSidebarNav>
110+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
111+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
112+
<CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /></CNavItem>
113+
<CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /></CNavItem>
114+
</CSidebarNav>
115+
</CSidebar>
116+
</Example>
117+
118+
```jsx
119+
<CSidebar className="border-end" narrow>
120+
<CSidebarHeader className="border-bottom">
121+
<CSidebarBrand>CUI</CSidebarBrand>
122+
</CSidebarHeader>
123+
<CSidebarNav>
124+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
125+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /></CNavItem>
126+
<CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /></CNavItem>
127+
<CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /></CNavItem>
62128
</CSidebarNav>
63-
<CSidebarToggler />
64129
</CSidebar>
65130
```
66131

132+
### Unfoldable sidebar
133+
134+
Add the `unfoldable` property to make the sidebar narrow with unfoldable on hover.
135+
136+
<Example className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">
137+
<CSidebar className="border-end" unfoldable>
138+
<CSidebarHeader className="border-bottom">
139+
<CSidebarBrand>CUI</CSidebarBrand>
140+
</CSidebarHeader>
141+
<CSidebarNav>
142+
<CNavTitle>Nav Title</CNavTitle>
143+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
144+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
145+
<CNavGroup
146+
toggler={
147+
<>
148+
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
149+
</>
150+
}
151+
>
152+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
153+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
154+
</CNavGroup>
155+
<CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CUI</CNavItem>
156+
<CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
157+
</CSidebarNav>
158+
</CSidebar>
159+
</Example>
160+
161+
```jsx
162+
<CSidebar className="border-end" unfoldable>
163+
<CSidebarHeader className="border-bottom">
164+
<CSidebarBrand>CUI</CSidebarBrand>
165+
</CSidebarHeader>
166+
<CSidebarNav>
167+
<CNavTitle>Nav Title</CNavTitle>
168+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
169+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
170+
<CNavGroup
171+
toggler={
172+
<>
173+
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
174+
</>
175+
}
176+
>
177+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
178+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
179+
</CNavGroup>
180+
<CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
181+
<CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
182+
</CSidebarNav>
183+
</CSidebar>
184+
```
185+
186+
## Dark sidebar
187+
188+
Change the appearance of sidebars with the `colorScheme="dark"`.
189+
190+
<Example className="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">
191+
<CSidebar className="border-end" colorScheme="dark">
192+
<CSidebarHeader className="border-bottom">
193+
<CSidebarBrand>CoreUI</CSidebarBrand>
194+
</CSidebarHeader>
195+
<CSidebarNav>
196+
<CNavTitle>Nav Title</CNavTitle>
197+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
198+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
199+
<CNavGroup
200+
toggler={
201+
<>
202+
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
203+
</>
204+
}
205+
>
206+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
207+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
208+
</CNavGroup>
209+
<CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
210+
<CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
211+
</CSidebarNav>
212+
</CSidebar>
213+
</Example>
214+
215+
```jsx
216+
<CSidebar className="border-end" colorScheme="dark">
217+
<CSidebarHeader className="border-bottom">
218+
<CSidebarBrand>CoreUI</CSidebarBrand>
219+
</CSidebarHeader>
220+
<CSidebarNav>
221+
<CNavTitle>Nav Title</CNavTitle>
222+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item</CNavItem>
223+
<CNavItem href="#"><CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge <CBadge color="primary ms-auto">NEW</CBadge></CNavItem>
224+
<CNavGroup
225+
toggler={
226+
<>
227+
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
228+
</>
229+
}
230+
>
231+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
232+
<CNavItem href="#"><span className="nav-icon"><span className="nav-icon-bullet"></span></span> Nav dropdown item</CNavItem>
233+
</CNavGroup>
234+
<CNavItem href="https://coreui.io"><CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI</CNavItem>
235+
<CNavItem href="https://coreui.io/pro/"><CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI PRO</CNavItem>
236+
</CSidebarNav>
237+
</CSidebar>
238+
```
239+
240+
## Placement
241+
242+
By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.
243+
244+
- `placement="start"` places sidebar on the left of the viewport (shown above)
245+
- `placement="end"` places sidebar on the right of the viewport
246+
67247
## Customizing
68248

69249
### CSS variables
70250

71251
React sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
72252

73-
<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-css-vars"/>
253+
<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-css-vars" />
74254

75-
<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-backdrop-css-vars"/>
255+
<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-overlaid-css-vars" />
256+
257+
<ScssDocs file="sidebar/_sidebar-narrow.scss" capture="sidebar-narrow-css-vars" />
258+
259+
<ScssDocs file="sidebar/_sidebar-nav.scss" capture="sidebar-nav-css-vars" />
260+
261+
<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-toggler-css-vars" />
262+
263+
<ScssDocs file="sidebar/_sidebar.scss" capture="sidebar-backdrop-css-vars" />
76264

77265
#### How to use CSS variables
78266

79267
```jsx
80-
const vars = {
268+
const vars = {
81269
'--my-css-var': 10,
82-
'--my-another-css-var': "red"
270+
'--my-another-css-var': 'red',
83271
}
84272
return <CSidebar style={vars}>...</CSidebar>
85273
```
86274

87275
### SASS variables
88276

89-
<ScssDocs file="_variables.scss" capture="sidebar-variables"/>
277+
<ScssDocs file="_variables.scss" capture="sidebar-variables" />
278+
279+
<ScssDocs file="_variables.scss" capture="sidebar-toggler" />
90280

91281
## API
92282

‎packages/docs/src/styles/_component-examples.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,16 @@
117117
> .spinner-grow + .spinner-grow {
118118
margin-left: .25rem;
119119
}
120+
121+
// Sidebar
122+
.sidebar-narrow,
123+
.sidebar-narrow-unfoldable {
124+
position: static;
125+
}
126+
127+
.sidebar-narrow-unfoldable {
128+
min-height: 550px;
129+
}
120130
}
121131

122132
//

0 commit comments

Comments
 (0)