Skip to content

Commit 8f9ba8e

Browse files
mrholekmrholek
committed
refactor(Sidebar): change default responsive behaviour
1 parent 2407a0c commit 8f9ba8e

File tree

5 files changed

+173
-79
lines changed

5 files changed

+173
-79
lines changed

‎docs/content/4.0/migration.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ aliases: "/migration/"
77
toc: true
88
---
99

10+
## v4.0.0-alpha.1
11+
12+
### Sidebar
13+
14+
- Change responsive behavior
15+
1016
## v4.0.0-alpha.0
1117

1218
### Browser support

‎js/src/sidebar.js

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,17 @@ const DefaultType = {
3838

3939
const CLASS_NAME_BACKDROP = 'sidebar-backdrop'
4040
const CLASS_NAME_FADE = 'fade'
41+
const CLASS_NAME_HIDE = 'hide'
4142
const CLASS_NAME_SHOW = 'show'
4243
const CLASS_NAME_SIDEBAR = 'sidebar'
4344
const CLASS_NAME_SIDEBAR_NARROW = 'sidebar-narrow'
4445
const CLASS_NAME_SIDEBAR_OVERLAID = 'sidebar-overlaid'
46+
const CLASS_NAME_SIDEBAR_SELF_HIDDING = 'sidebar-self-hidding'
4547
const CLASS_NAME_SIDEBAR_NARROW_UNFOLDABLE = 'sidebar-narrow-unfoldable'
4648

4749
// eslint-disable-next-line prefer-regex-literals
48-
const REGEXP_SIDEBAR_SHOW = new RegExp('sidebar.*show')
50+
const REGEXP_SIDEBAR_SELF_HIDING = /sidebar-self-hiding/
51+
// const REGEXP_SIDEBAR_SHOW = new RegExp('sidebar.*show')
4952
const REGEXP_SIDEBAR_SHOW_BREAKPOINT = /sidebar-(sm|md|lg|xl|xxl)-show/
5053

5154
const EVENT_HIDE = `hide${EVENT_KEY}`
@@ -94,14 +97,22 @@ class Sidebar extends BaseComponent {
9497

9598
// Public
9699

97-
show(breakpoint) {
100+
show() {
98101
EventHandler.trigger(this._element, EVENT_SHOW)
99102

100-
if (typeof breakpoint !== 'undefined') {
101-
this._breakpoint = breakpoint
103+
// if (typeof breakpoint !== 'undefined') {
104+
// this._breakpoint = breakpoint
105+
// }
106+
107+
// this._element.classList.add(this._createShowClass())
108+
109+
if (this._element.classList.contains(CLASS_NAME_HIDE)) {
110+
this._element.classList.remove(CLASS_NAME_HIDE)
102111
}
103112

104-
this._element.classList.add(this._createShowClass())
113+
if (this._element.className.match(REGEXP_SIDEBAR_SELF_HIDING)) {
114+
this._element.classList.add(CLASS_NAME_SHOW)
115+
}
105116

106117
if (this._isMobile()) {
107118
this._showBackdrop()
@@ -127,11 +138,21 @@ class Sidebar extends BaseComponent {
127138
hide() {
128139
EventHandler.trigger(this._element, EVENT_HIDE)
129140

130-
this._element.classList.forEach(className => {
131-
if (className.match(REGEXP_SIDEBAR_SHOW)) {
132-
this._element.classList.remove(className)
133-
}
134-
})
141+
if (this._element.classList.contains(CLASS_NAME_SHOW)) {
142+
this._element.classList.remove(CLASS_NAME_SHOW)
143+
}
144+
145+
this._element.classList.add(CLASS_NAME_HIDE)
146+
147+
// if (!this._element.className.match(REGEXP_SIDEBAR_SELF_HIDING)) {
148+
// this._element.classList.add(CLASS_NAME_HIDE)
149+
// }
150+
151+
// this._element.classList.forEach(className => {
152+
// if (className.match(REGEXP_SIDEBAR_SHOW)) {
153+
// this._element.classList.remove(className)
154+
// }
155+
// })
135156

136157
if (this._isMobile()) {
137158
this._removeBackdrop()
@@ -154,17 +175,19 @@ class Sidebar extends BaseComponent {
154175
emulateTransitionEnd(this._element, transitionDuration)
155176
}
156177

157-
toggle(breakpoint) {
178+
toggle() {
179+
// eslint-disable-next-line no-console
180+
console.log(this._show)
158181
if (this._show) {
159182
this.hide()
160183
return
161184
}
162185

163-
if (breakpoint === 'all') {
164-
this._breakpoint = false
165-
this.show(this._breakpoint)
166-
return
167-
}
186+
// if (breakpoint === 'all') {
187+
// this._breakpoint = false
188+
// this.show(this._breakpoint)
189+
// return
190+
// }
168191

169192
this.show()
170193
}

‎scss/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1535,7 +1535,7 @@ $sidebar-bg: $gray-base !default;
15351535
$sidebar-border-width: 0 !default;
15361536
$sidebar-border-color: transparent !default;
15371537
$sidebar-transition: margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
1538-
$sidebar-reliant-transition: margin .15s !default;
1538+
$sidebar-reliant-transition: width .15s !default;
15391539

15401540
$sidebar-brand-height: 4rem !default;
15411541
$sidebar-brand-color: $high-emphasis-light !default;

‎scss/sidebar/_sidebar-narrow.scss

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@include media-breakpoint-up($mobile-breakpoint) {
33
z-index: $zindex-fixed + 1;
44
flex: 0 0 $sidebar-narrow-width;
5+
width: $sidebar-narrow-width;
56
padding-bottom: $sidebar-toggler-height;
67
overflow: visible;
78

@@ -53,6 +54,8 @@
5354
}
5455

5556
.sidebar-narrow-unfoldable {
57+
position: fixed !important;
58+
z-index: $zindex-fixed + 1;
5659

5760
&:not(:hover) {
5861
@extend %sidebar-narrow;
@@ -69,41 +72,63 @@
6972
transform: rotate(0deg);
7073
}
7174
}
75+
76+
~ * {
77+
--#{$variable-prefix}sidebar-width: #{$sidebar-narrow-width};
78+
}
7279
}
7380

7481
// Responsive behavior
75-
// stylelint-disable selector-max-class
7682
@each $breakpoint in map-keys($grid-breakpoints) {
77-
@include media-breakpoint-up($breakpoint) {
83+
@include media-breakpoint-down($breakpoint) {
7884
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
79-
.sidebar.sidebar#{$infix}-show,
80-
.sidebar.sidebar-show {
81-
&:not(.sidebar-right){
82-
margin-left: 0;
83-
@include media-breakpoint-up($mobile-breakpoint) {
84-
&.sidebar-fixed {
85-
&.sidebar-narrow,
86-
&.sidebar-narrow-unfoldable {
87-
~ [data-coreui-reliant="sidebar"] {
88-
margin-left: $sidebar-narrow-width;
89-
}
90-
}
91-
}
85+
.sidebar:not(.show).sidebar-self-hiding#{$infix} {
86+
&.sidebar-narrow,
87+
&.sidebar-narrow-unfoldable {
88+
&:not(.sidebar-right) {
89+
margin-left: - $sidebar-narrow-width;
9290
}
93-
}
94-
&.sidebar-right {
95-
margin-right: 0;
96-
@include media-breakpoint-up($mobile-breakpoint) {
97-
&.sidebar-fixed {
98-
&.sidebar-narrow,
99-
&.sidebar-narrow-unfoldable {
100-
~ [data-coreui-reliant="sidebar"] {
101-
margin-right: $sidebar-narrow-width;
102-
}
103-
}
104-
}
91+
&.sidebar-right {
92+
margin-right: - $sidebar-narrow-width;
10593
}
10694
}
10795
}
10896
}
10997
}
98+
99+
// Responsive behavior
100+
// stylelint-disable selector-max-class
101+
// @each $breakpoint in map-keys($grid-breakpoints) {
102+
// @include media-breakpoint-up($breakpoint) {
103+
// $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
104+
// .sidebar.sidebar#{$infix}-show,
105+
// .sidebar.sidebar-show {
106+
// &:not(.sidebar-right){
107+
// margin-left: 0;
108+
// @include media-breakpoint-up($mobile-breakpoint) {
109+
// &.sidebar-fixed {
110+
// &.sidebar-narrow,
111+
// &.sidebar-narrow-unfoldable {
112+
// ~ [data-coreui-reliant="sidebar"] {
113+
// margin-left: $sidebar-narrow-width;
114+
// }
115+
// }
116+
// }
117+
// }
118+
// }
119+
// &.sidebar-right {
120+
// margin-right: 0;
121+
// @include media-breakpoint-up($mobile-breakpoint) {
122+
// &.sidebar-fixed {
123+
// &.sidebar-narrow,
124+
// &.sidebar-narrow-unfoldable {
125+
// ~ [data-coreui-reliant="sidebar"] {
126+
// margin-right: $sidebar-narrow-width;
127+
// }
128+
// }
129+
// }
130+
// }
131+
// }
132+
// }
133+
// }
134+
// }

‎scss/sidebar/_sidebar.scss

Lines changed: 75 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -35,27 +35,39 @@
3535
}
3636

3737
&:not(.sidebar-right){
38-
margin-left: - $sidebar-width;
38+
// margin-left: - $sidebar-width;
39+
margin-left: 0;
3940
}
4041

4142
&.sidebar-right {
4243
order: 99;
43-
margin-right: - $sidebar-width;
44+
// margin-right: - $sidebar-width;
45+
margin-right: 0;
46+
4447
}
4548

4649
&[class*="bg-"] {
4750
border-color: rgba($black, .1);
4851
}
4952

53+
&.hide {
54+
&:not(.sidebar-right){
55+
margin-left: - $sidebar-width;
56+
}
57+
&.sidebar-right {
58+
margin-right: - $sidebar-width;
59+
}
60+
}
61+
5062
@each $width, $value in $sidebar-widths {
5163
&.sidebar-#{$width} {
5264
flex: 0 0 $value;
5365
width: $value;
5466

55-
&:not(.sidebar-right){
67+
&:not(.sidebar-right).hide {
5668
margin-left: - $value;
5769
}
58-
&.sidebar-right {
70+
&.sidebar-right.hide {
5971
margin-right: - $value;
6072
}
6173
}
@@ -219,46 +231,74 @@
219231
}
220232

221233
// Responsive behavior
222-
// stylelint-disable selector-max-class
223234
@each $breakpoint in map-keys($grid-breakpoints) {
224-
@include media-breakpoint-up($breakpoint) {
235+
@include media-breakpoint-down($breakpoint) {
225236
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
226-
.sidebar.sidebar#{$infix}-show,
227-
.sidebar.sidebar-show {
228-
&:not(.sidebar-right){
229-
margin-left: 0;
230-
@include media-breakpoint-up($mobile-breakpoint) {
231-
&.sidebar-fixed {
232-
~ [data-coreui-reliant="sidebar"] {
233-
margin-left: $sidebar-width;
234-
}
235-
@each $width, $value in $sidebar-widths {
236-
&.sidebar-#{$width} {
237-
~ [data-coreui-reliant="sidebar"] {
238-
margin-left: $value;
239-
}
240-
}
241-
}
237+
.sidebar:not(.show).sidebar-self-hiding#{$infix} {
238+
&:not(.sidebar-right) {
239+
margin-left: - $sidebar-width;
240+
241+
@each $width, $value in $sidebar-widths {
242+
&.sidebar-#{$width} {
243+
margin-left: - $value;
242244
}
243245
}
244246
}
245247
&.sidebar-right {
246-
margin-right: 0;
247-
@include media-breakpoint-up($mobile-breakpoint) {
248-
&.sidebar-fixed {
249-
~ [data-coreui-reliant="sidebar"] {
250-
margin-right: $sidebar-width;
251-
}
252-
@each $width, $value in $sidebar-widths {
253-
&.sidebar-#{$width} {
254-
~ [data-coreui-reliant="sidebar"] {
255-
margin-right: $value;
256-
}
257-
}
258-
}
248+
margin-right: - $sidebar-width;
249+
250+
@each $width, $value in $sidebar-widths {
251+
&.sidebar-#{$width} {
252+
margin-right: - $value;
259253
}
260254
}
261255
}
262256
}
263257
}
264258
}
259+
260+
// Responsive behavior
261+
// stylelint-disable selector-max-class
262+
// @each $breakpoint in map-keys($grid-breakpoints) {
263+
// @include media-breakpoint-up($breakpoint) {
264+
// $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
265+
// .sidebar.sidebar#{$infix}-show,
266+
// .sidebar.sidebar-show {
267+
// &:not(.sidebar-right){
268+
// margin-left: 0;
269+
// @include media-breakpoint-up($mobile-breakpoint) {
270+
// &.sidebar-fixed {
271+
// ~ [data-coreui-reliant="sidebar"] {
272+
// margin-left: $sidebar-width;
273+
// }
274+
// @each $width, $value in $sidebar-widths {
275+
// &.sidebar-#{$width} {
276+
// ~ [data-coreui-reliant="sidebar"] {
277+
// margin-left: $value;
278+
// }
279+
// }
280+
// }
281+
// }
282+
// }
283+
// }
284+
// &.sidebar-right {
285+
// margin-right: 0;
286+
// @include media-breakpoint-up($mobile-breakpoint) {
287+
// &.sidebar-fixed {
288+
// ~ [data-coreui-reliant="sidebar"] {
289+
// margin-right: $sidebar-width;
290+
// }
291+
// @each $width, $value in $sidebar-widths {
292+
// &.sidebar-#{$width} {
293+
// ~ [data-coreui-reliant="sidebar"] {
294+
// margin-right: $value;
295+
// }
296+
// }
297+
// }
298+
// }
299+
// }
300+
// }
301+
// }
302+
// }
303+
// }
304+
//

0 commit comments

Comments
 (0)