Skip to content

Commit 42c998e

Browse files
mrholekmrholek
committed
fix(Sidebar): update responsive behavior; sidebar emits wrong --cui-sidebar-occupy-start and --cui-sidebar-occupy-end on mobile devices when sidebar width is not default.
1 parent b758628 commit 42c998e

File tree

2 files changed

+37
-101
lines changed

2 files changed

+37
-101
lines changed

‎js/src/sidebar.js‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,10 @@ const CLASS_NAME_BACKDROP = 'sidebar-backdrop'
3333
const CLASS_NAME_FADE = 'fade'
3434
const CLASS_NAME_HIDE = 'hide'
3535
const CLASS_NAME_SHOW = 'show'
36-
const CLASS_NAME_SIDEBAR = 'sidebar'
3736
const CLASS_NAME_SIDEBAR_NARROW = 'sidebar-narrow'
3837
const CLASS_NAME_SIDEBAR_OVERLAID = 'sidebar-overlaid'
3938
const CLASS_NAME_SIDEBAR_NARROW_UNFOLDABLE = 'sidebar-narrow-unfoldable'
4039

41-
const REGEXP_SIDEBAR_SELF_HIDING = /sidebar-self-hiding/
42-
4340
const EVENT_HIDE = `hide${EVENT_KEY}`
4441
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
4542
const EVENT_RESIZE = 'resize'
@@ -70,8 +67,6 @@ class Sidebar extends BaseComponent {
7067
this._unfoldable = this._isUnfoldable()
7168
this._backdrop = null
7269
this._addEventListeners()
73-
74-
// Data.set(element, DATA_KEY, this)
7570
}
7671

7772
// Getters
@@ -97,11 +92,8 @@ class Sidebar extends BaseComponent {
9792
this._element.classList.remove(CLASS_NAME_HIDE)
9893
}
9994

100-
if (REGEXP_SIDEBAR_SELF_HIDING.test(this._element.className)) {
101-
this._element.classList.add(CLASS_NAME_SHOW)
102-
}
103-
10495
if (this._isMobile()) {
96+
this._element.classList.add(CLASS_NAME_SHOW)
10597
this._showBackdrop()
10698
}
10799

@@ -124,16 +116,12 @@ class Sidebar extends BaseComponent {
124116

125117
if (this._element.classList.contains(CLASS_NAME_SHOW)) {
126118
this._element.classList.remove(CLASS_NAME_SHOW)
127-
} else {
128-
this._element.classList.add(CLASS_NAME_HIDE)
129-
}
130-
131-
if (this._isVisible()) {
132-
this._element.classList.add(CLASS_NAME_HIDE)
133119
}
134120

135121
if (this._isMobile()) {
136122
this._removeBackdrop()
123+
} else {
124+
this._element.classList.add(CLASS_NAME_HIDE)
137125
}
138126

139127
const complete = () => {
@@ -217,14 +205,6 @@ class Sidebar extends BaseComponent {
217205
return config
218206
}
219207

220-
_createShowClass() {
221-
if (this._breakpoint && !this._isMobile()) {
222-
return `${CLASS_NAME_SIDEBAR}-${this._breakpoint}-${CLASS_NAME_SHOW}`
223-
}
224-
225-
return `${CLASS_NAME_SIDEBAR}-${CLASS_NAME_SHOW}`
226-
}
227-
228208
_isMobile() {
229209
return Boolean(window.getComputedStyle(this._element, null).getPropertyValue('--cui-is-mobile'))
230210
}
@@ -244,10 +224,7 @@ class Sidebar extends BaseComponent {
244224
_isVisible() {
245225
const rect = this._element.getBoundingClientRect()
246226
return (
247-
rect.top >= 0 &&
248-
rect.left >= 0 &&
249-
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
250-
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
227+
rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
251228
)
252229
}
253230

‎scss/sidebar/_sidebar.scss‎

Lines changed: 33 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
.sidebar {
2+
--#{$variable-prefix}sidebar-width: #{$sidebar-width};
3+
~ * {
4+
--#{$variable-prefix}sidebar-width: #{$sidebar-width};
5+
}
6+
27
position: relative;
38
display: flex;
49
// $sidebar-width is the width of the columns
5-
flex: 0 0 $sidebar-width;
10+
flex: 0 0 var(--#{$variable-prefix}sidebar-width);
611
flex-direction: column;
712
// put the nav on the left
813
order: -1;
9-
width: $sidebar-width;
14+
width: var(--#{$variable-prefix}sidebar-width);
1015
padding: $sidebar-padding-y $sidebar-padding-x;
1116
color: var(--#{$variable-prefix}sidebar-color, $sidebar-color);
1217
background: var(--#{$variable-prefix}sidebar-bg, $sidebar-bg);
@@ -17,29 +22,31 @@
1722
&:not(.sidebar-end){
1823
@include ltr-rtl("margin-left", 0);
1924
~ * {
20-
--#{$variable-prefix}sidebar-occupy-start: #{$sidebar-width};
25+
--#{$variable-prefix}sidebar-occupy-start: #{var(--#{$variable-prefix}sidebar-width)};
2126
}
2227
}
2328

2429
&.sidebar-end {
2530
order: 99;
2631
@include ltr-rtl("margin-right", 0);
2732
~ * {
28-
--#{$variable-prefix}sidebar-occupy-end: #{$sidebar-width};
33+
--#{$variable-prefix}sidebar-occupy-end: #{var(--#{$variable-prefix}sidebar-width)};
2934
}
3035
}
3136

32-
&.hide {
33-
&:not(.sidebar-end){
34-
@include ltr-rtl("margin-left", - $sidebar-width);
35-
~ * {
36-
--#{$variable-prefix}sidebar-occupy-start: 0;
37+
@include media-breakpoint-up($mobile-breakpoint) {
38+
&.hide {
39+
&:not(.sidebar-end){
40+
@include ltr-rtl("margin-left", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
41+
~ * {
42+
--#{$variable-prefix}sidebar-occupy-start: 0;
43+
}
3744
}
38-
}
39-
&.sidebar-end {
40-
@include ltr-rtl("margin-right", - $sidebar-width);
41-
~ * {
42-
--#{$variable-prefix}sidebar-occupy-end: 0;
45+
&.sidebar-end {
46+
@include ltr-rtl("margin-right", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
47+
~ * {
48+
--#{$variable-prefix}sidebar-occupy-end: 0;
49+
}
4350
}
4451
}
4552
}
@@ -50,33 +57,10 @@
5057

5158
@each $width, $value in $sidebar-widths {
5259
&.sidebar-#{$width} {
53-
flex: 0 0 $value;
54-
width: $value;
55-
56-
&:not(.sidebar-end) {
57-
~ * {
58-
--#{$variable-prefix}sidebar-occupy-start: #{$value};
59-
}
60-
}
61-
&.sidebar-end {
62-
~ * {
63-
--#{$variable-prefix}sidebar-occupy-end: #{$value};
64-
}
65-
}
60+
--#{$variable-prefix}sidebar-width: #{$value};
6661

67-
&.hide {
68-
&:not(.sidebar-end){
69-
@include ltr-rtl("margin-left", - $value);
70-
~ * {
71-
--#{$variable-prefix}sidebar-occupy-start: 0;
72-
}
73-
}
74-
&.sidebar-end {
75-
@include ltr-rtl("margin-right", - $value);
76-
~ * {
77-
--#{$variable-prefix}sidebar-occupy-end: 0;
78-
}
79-
}
62+
~ * {
63+
--#{$variable-prefix}sidebar-width: #{$value};
8064
}
8165
}
8266
}
@@ -129,17 +113,25 @@
129113
bottom: 0;
130114
z-index: $zindex-fixed + 1;
131115

132-
&:not(.sidebar-end){
116+
&:not(.sidebar-end) {
133117
@include ltr-rtl("left", 0);
134118
~ * {
135119
--#{$variable-prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
136120
}
121+
122+
&:not(.show) {
123+
@include ltr-rtl("margin-left", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
124+
}
137125
}
138126
&.sidebar-end {
139127
@include ltr-rtl("right", 0);
140128
~ * {
141129
--#{$variable-prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
142130
}
131+
132+
&:not(.show) {
133+
@include ltr-rtl("margin-right", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
134+
}
143135
}
144136
}
145137
}
@@ -262,36 +254,3 @@
262254
&.show { opacity: $sidebar-backdrop-opacity; }
263255
}
264256
}
265-
266-
// Responsive behavior
267-
@each $breakpoint in map-keys($grid-breakpoints) {
268-
@include media-breakpoint-down(breakpoint-next($breakpoint)) {
269-
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
270-
.sidebar:not(.show).sidebar-self-hiding#{$infix} {
271-
&:not(.sidebar-end) {
272-
@include ltr-rtl("margin-left", - $sidebar-width);
273-
274-
@each $width, $value in $sidebar-widths {
275-
&.sidebar-#{$width} {
276-
@include ltr-rtl("margin-left", - $value);
277-
}
278-
}
279-
~ * {
280-
--#{$variable-prefix}sidebar-occupy-start: 0;
281-
}
282-
}
283-
&.sidebar-end {
284-
@include ltr-rtl("margin-right", - $sidebar-width);
285-
286-
@each $width, $value in $sidebar-widths {
287-
&.sidebar-#{$width} {
288-
@include ltr-rtl("margin-right", - $value);
289-
}
290-
}
291-
~ * {
292-
--#{$variable-prefix}sidebar-occupy-end: 0;
293-
}
294-
}
295-
}
296-
}
297-
}

0 commit comments

Comments
 (0)