Skip to content

Commit 876ca1a

Browse files
committed
refactor(Sidebar): update hide method
1 parent f016481 commit 876ca1a

File tree

2 files changed

+50
-0
lines changed

2 files changed

+50
-0
lines changed

js/src/sidebar.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const DefaultType = {}
3434

3535
const CLASS_NAME_BACKDROP = 'sidebar-backdrop'
3636
const CLASS_NAME_FADE = 'fade'
37+
const CLASS_NAME_HIDE = 'hide'
3738
const CLASS_NAME_SHOW = 'show'
3839
const CLASS_NAME_SIDEBAR = 'sidebar'
3940
const CLASS_NAME_SIDEBAR_NARROW = 'sidebar-narrow'
@@ -44,6 +45,7 @@ const REGEXP_SIDEBAR_SELF_HIDING = /sidebar-self-hiding/
4445

4546
const EVENT_HIDE = `hide${EVENT_KEY}`
4647
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
48+
const EVENT_RESIZE = 'resize'
4749
const EVENT_SHOW = `show${EVENT_KEY}`
4850
const EVENT_SHOWN = `shown${EVENT_KEY}`
4951
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
@@ -94,6 +96,10 @@ class Sidebar extends BaseComponent {
9496
show() {
9597
EventHandler.trigger(this._element, EVENT_SHOW)
9698

99+
if (this._element.classList.contains(CLASS_NAME_HIDE)) {
100+
this._element.classList.remove(CLASS_NAME_HIDE)
101+
}
102+
97103
if (REGEXP_SIDEBAR_SELF_HIDING.test(this._element.className)) {
98104
this._element.classList.add(CLASS_NAME_SHOW)
99105
}
@@ -124,6 +130,8 @@ class Sidebar extends BaseComponent {
124130

125131
if (this._element.classList.contains(CLASS_NAME_SHOW)) {
126132
this._element.classList.remove(CLASS_NAME_SHOW)
133+
} else {
134+
this._element.classList.add(CLASS_NAME_HIDE)
127135
}
128136

129137
if (this._isMobile()) {
@@ -315,6 +323,18 @@ class Sidebar extends BaseComponent {
315323
event.preventDefault()
316324
this.hide()
317325
})
326+
327+
EventHandler.on(window, EVENT_RESIZE, () => {
328+
// eslint-disable-next-line no-console
329+
console.log('resized')
330+
// eslint-disable-next-line no-console
331+
console.log(this._mobile)
332+
// eslint-disable-next-line no-console
333+
console.log(this._show)
334+
if (this._isMobile() && this._isVisible()) {
335+
this.hide()
336+
}
337+
})
318338
}
319339

320340
// Static

scss/sidebar/_sidebar.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,21 @@
2929
}
3030
}
3131

32+
&.hide {
33+
&:not(.sidebar-end){
34+
@include ltr-rtl("margin-left", - $sidebar-width);
35+
~ * {
36+
--#{$variable-prefix}sidebar-occupy-start: 0;
37+
}
38+
}
39+
&.sidebar-end {
40+
@include ltr-rtl("margin-right", - $sidebar-width);
41+
~ * {
42+
--#{$variable-prefix}sidebar-occupy-end: 0;
43+
}
44+
}
45+
}
46+
3247
&[class*="bg-"] {
3348
border-color: rgba($black, .1);
3449
}
@@ -48,6 +63,21 @@
4863
--#{$variable-prefix}sidebar-occupy-end: #{$value};
4964
}
5065
}
66+
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+
}
80+
}
5181
}
5282
}
5383

0 commit comments

Comments
 (0)