Skip to content

Commit 29a399d

Browse files
mrholekmrholek
committed
docs: update content
1 parent 8e6dab6 commit 29a399d

File tree

3 files changed

+181
-13
lines changed

3 files changed

+181
-13
lines changed

‎docs/assets/scss/_component-examples.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,16 @@
107107
.pagination {
108108
margin-bottom: 0;
109109
}
110+
111+
// Sidebar
112+
.sidebar-narrow,
113+
.sidebar-narrow-unfoldable {
114+
position: static;
115+
}
116+
117+
.sidebar-narrow-unfoldable {
118+
min-height: 550px;
119+
}
110120
}
111121

112122
//

‎docs/content/components/sidebar.md‎

Lines changed: 170 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,106 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
3030
- `.sidebar-footer` for optional footer.
3131
- `.sidebar-toggler` for use with our minimizer plugin.
3232

33-
## Example
33+
## Examples
3434

35-
{{< example >}}
36-
{{< sidebar.inline >}}
37-
<div class="sidebar sidebar-show">
35+
### Sidebar component
36+
37+
Below is an sidebar example that is shown by default on desktop devices.
38+
39+
{{< example class="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">}}
40+
<div class="sidebar border-end">
41+
<div class="sidebar-header border-bottom">
42+
<div class="sidebar-brand">CoreUI</div>
43+
</div>
44+
<ul class="sidebar-nav">
45+
<li class="nav-title">Nav Title</li>
46+
<li class="nav-item">
47+
<a class="nav-link" href="#">
48+
<i class="nav-icon cil-speedometer"></i> Nav item
49+
</a>
50+
</li>
51+
<li class="nav-item">
52+
<a class="nav-link" href="#">
53+
<i class="nav-icon cil-speedometer"></i> With badge
54+
<span class="badge bg-primary ms-auto">NEW</span>
55+
</a>
56+
</li>
57+
<li class="nav-item nav-group show">
58+
<a class="nav-link nav-group-toggle" href="#">
59+
<i class="nav-icon cil-puzzle"></i> Nav dropdown
60+
</a>
61+
<ul class="nav-group-items">
62+
<li class="nav-item">
63+
<a class="nav-link" href="#">
64+
<span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
65+
</a>
66+
</li>
67+
<li class="nav-item">
68+
<a class="nav-link" href="#">
69+
<span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
70+
</a>
71+
</li>
72+
</ul>
73+
</li>
74+
<li class="nav-item mt-5">
75+
<a class="nav-link" href="https://coreui.io">
76+
<i class="nav-icon cil-cloud-download"></i> Download CoreUI</a>
77+
</li>
78+
<li class="nav-item">
79+
<a class="nav-link" href="https://coreui.io/pro/">
80+
<i class="nav-icon cil-layers"></i> Try CoreUI
81+
<strong>PRO</strong>
82+
</a>
83+
</li>
84+
</ul>
85+
<div class="sidebar-footer border-top d-flex">
86+
<button class="sidebar-toggler" type="button"></button>
87+
</div>
88+
</div>
89+
{{< /example >}}
90+
91+
### Narrow sidebar
92+
93+
Add the `.sidebar-narrow` class to make the sidebar narrow.
94+
95+
{{< example class="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">}}
96+
<div class="sidebar sidebar-narrow border-end">
97+
<div class="sidebar-header border-bottom">
98+
<div class="sidebar-brand">CUI</div>
99+
</div>
100+
<ul class="sidebar-nav">
101+
<li class="nav-item">
102+
<a class="nav-link" href="#">
103+
<i class="nav-icon cil-speedometer"></i>
104+
</a>
105+
</li>
106+
<li class="nav-item">
107+
<a class="nav-link" href="#">
108+
<i class="nav-icon cil-speedometer"></i>
109+
</a>
110+
</li>
111+
<li class="nav-item">
112+
<a class="nav-link" href="https://coreui.io">
113+
<i class="nav-icon cil-cloud-download"></i>
114+
</li>
115+
<li class="nav-item">
116+
<a class="nav-link" href="https://coreui.io/pro/">
117+
<i class="nav-icon cil-layers"></i>
118+
</a>
119+
</li>
120+
</ul>
121+
</div>
122+
{{< /example >}}
123+
124+
### Unfoldable sidebar
125+
126+
Add the `.sidebar-narrow-unfoldable` class to make the sidebar narrow with unfoldable on hover.
127+
128+
{{< example class="bg-body-secondary p-0 rounded-bottom-0 overflow-hidden">}}
129+
<div class="sidebar sidebar-narrow-unfoldable border-end">
130+
<div class="sidebar-header border-bottom">
131+
<div class="sidebar-brand">CUI</div>
132+
</div>
38133
<ul class="sidebar-nav">
39134
<li class="nav-title">Nav Title</li>
40135
<li class="nav-item">
@@ -45,42 +140,103 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
45140
<li class="nav-item">
46141
<a class="nav-link" href="#">
47142
<i class="nav-icon cil-speedometer"></i> With badge
48-
<span class="badge bg-primary">NEW</span>
143+
<span class="badge bg-primary ms-auto">NEW</span>
49144
</a>
50145
</li>
51-
<li class="nav-item nav-group">
146+
<li class="nav-item nav-group show">
52147
<a class="nav-link nav-group-toggle" href="#">
53148
<i class="nav-icon cil-puzzle"></i> Nav dropdown
54149
</a>
55150
<ul class="nav-group-items">
56151
<li class="nav-item">
57152
<a class="nav-link" href="#">
58-
<i class="nav-icon cil-puzzle"></i> Nav dropdown item
153+
<span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
59154
</a>
60155
</li>
61156
<li class="nav-item">
62157
<a class="nav-link" href="#">
63-
<i class="nav-icon cil-puzzle"></i> Nav dropdown item
158+
<span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
64159
</a>
65160
</li>
66161
</ul>
67162
</li>
68163
<li class="nav-item mt-auto">
69-
<a class="nav-link nav-link-success" href="https://coreui.io">
164+
<a class="nav-link" href="https://coreui.io">
165+
<i class="nav-icon cil-cloud-download"></i> Download CoreUI</a>
166+
</li>
167+
<li class="nav-item">
168+
<a class="nav-link" href="https://coreui.io/pro/">
169+
<i class="nav-icon cil-layers"></i> Try CoreUI
170+
<strong>PRO</strong>
171+
</a>
172+
</li>
173+
</ul>
174+
</div>
175+
{{< /example >}}
176+
177+
## Dark sidebar
178+
179+
Change the appearance of sidebars with the `.sidebar-dark` class.
180+
181+
{{< example class="p-0 rounded-bottom-0 overflow-hidden">}}
182+
<div class="sidebar sidebar-dark border-end">
183+
<div class="sidebar-header border-bottom">
184+
<div class="sidebar-brand">CoreUI</div>
185+
</div>
186+
<ul class="sidebar-nav">
187+
<li class="nav-title">Nav Title</li>
188+
<li class="nav-item">
189+
<a class="nav-link" href="#">
190+
<i class="nav-icon cil-speedometer"></i> Nav item
191+
</a>
192+
</li>
193+
<li class="nav-item">
194+
<a class="nav-link" href="#">
195+
<i class="nav-icon cil-speedometer"></i> With badge
196+
<span class="badge bg-primary ms-auto">NEW</span>
197+
</a>
198+
</li>
199+
<li class="nav-item nav-group show">
200+
<a class="nav-link nav-group-toggle" href="#">
201+
<i class="nav-icon cil-puzzle"></i> Nav dropdown
202+
</a>
203+
<ul class="nav-group-items">
204+
<li class="nav-item">
205+
<a class="nav-link" href="#">
206+
<span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
207+
</a>
208+
</li>
209+
<li class="nav-item">
210+
<a class="nav-link" href="#">
211+
<span class="nav-icon"><span class="nav-icon-bullet"></span></span> Nav dropdown item
212+
</a>
213+
</li>
214+
</ul>
215+
</li>
216+
<li class="nav-item mt-5">
217+
<a class="nav-link" href="https://coreui.io">
70218
<i class="nav-icon cil-cloud-download"></i> Download CoreUI</a>
71219
</li>
72220
<li class="nav-item">
73-
<a class="nav-link nav-link-danger" href="https://coreui.io/pro/">
221+
<a class="nav-link" href="https://coreui.io/pro/">
74222
<i class="nav-icon cil-layers"></i> Try CoreUI
75223
<strong>PRO</strong>
76224
</a>
77225
</li>
78226
</ul>
79-
<button class="sidebar-toggler" type="button"></button>
227+
<div class="sidebar-footer border-top d-flex">
228+
<button class="sidebar-toggler" type="button"></button>
229+
</div>
80230
</div>
81-
{{< /sidebar.inline >}}
82231
{{< /example >}}
83232

233+
## Placement
234+
235+
By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.
236+
237+
- `.sidebar-start` places sidebar on the left of the viewport (shown above)
238+
- `.sidebar-end` places sidebar on the right of the viewport
239+
84240
## JavaScript behavior
85241

86242
### Methods
@@ -136,6 +292,8 @@ Sidebars use local CSS variables on `.sidebar`, `.sidebar-backdrop`, `.sidebar-n
136292

137293
{{< scss-docs name="sidebar-css-vars" file="scss/sidebar/_sidebar.scss" >}}
138294

295+
{{< scss-docs name="sidebar-overlaid-css-vars" file="scss/sidebar/_sidebar.scss" >}}
296+
139297
{{< scss-docs name="sidebar-narrow-css-vars" file="scss/sidebar/_sidebar-narrow.scss" >}}
140298

141299
{{< scss-docs name="sidebar-nav-css-vars" file="scss/sidebar/_sidebar-nav.scss" >}}

‎docs/content/migration.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ aliases: "/migration/"
77
toc: true
88
---
99

10-
## v5.0.0-alpha.2
10+
## v5.0.0
1111

1212
### CSS variables
1313

0 commit comments

Comments
 (0)