Skip to content

Commit d7555ca

Browse files
mrholekmrholek
committed
Merge branch 'v5' of https://github.com/coreui/coreui into v5
2 parents cbcafbf + 3f01860 commit d7555ca

File tree

9 files changed

+600
-26
lines changed

9 files changed

+600
-26
lines changed

‎dist/css/coreui.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/coreui.rtl.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎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
@@ -33,11 +33,106 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
3333
- `.sidebar-footer` for optional footer.
3434
- `.sidebar-toggler` for use with our minimizer plugin.
3535

36-
## Example
36+
## Examples
3737

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

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

89245
### Methods
@@ -139,6 +295,8 @@ Sidebars use local CSS variables on `.sidebar`, `.sidebar-backdrop`, `.sidebar-n
139295

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

298+
{{< scss-docs name="sidebar-overlaid-css-vars" file="scss/sidebar/_sidebar.scss" >}}
299+
142300
{{< scss-docs name="sidebar-narrow-css-vars" file="scss/sidebar/_sidebar-narrow.scss" >}}
143301

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

0 commit comments

Comments
 (0)