Skip to content

Commit 91905a5

Browse files
francoispluchinofrancoispluchino
committed
Allow to define the responsive breakpoint to force open the sidebar
1 parent b9eb3f4 commit 91905a5

File tree

4 files changed

+48
-18
lines changed

4 files changed

+48
-18
lines changed

‎scss/_sidebar-core.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@
188188
}
189189

190190
.fxp-sidebar-force-open ~ & {
191-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
191+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
192192
z-index: -1;
193193
opacity: 0;
194194
}
@@ -282,7 +282,7 @@
282282
// Responsive
283283
// -------------------------
284284

285-
@media (max-width: (map-get($sidebar-grid-breakpoints, 'md') - 1)) {
285+
@media (max-width: (map-get($sidebar-grid-breakpoints, $sidebar-mobile-breakpoint) - 1)) {
286286
.fxp-sidebar {
287287
width: 80%;
288288
-webkit-transform: translate3d(-100%, 0px, 0px);
@@ -320,15 +320,15 @@
320320
}
321321
}
322322

323-
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
323+
@media (max-width: (map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint) - 1)) {
324324
.fxp-sidebar-force-open {
325325
&.fxp-sidebar:not(.fxp-sidebar-open) + .fxp-sidebar-swipe {
326326
left: 0;
327327
}
328328
}
329329
}
330330

331-
@media (min-width: ((map-get($sidebar-grid-breakpoints, 'lg') - 1) + 1)) {
331+
@media (min-width: ((map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint) - 1) + 1)) {
332332
.fxp-sidebar {
333333
&.fxp-sidebar-open-init {
334334
-webkit-transform: translate3d(0px, 0px, 0px);
@@ -379,7 +379,7 @@
379379
}
380380
}
381381

382-
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
382+
@media (max-width: (map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint) - 1)) {
383383
.fxp-sidebar,
384384
.fxp-sidebar-swipe {
385385
top: 0 !important;

‎scss/_sidebar-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
// Responsive
130130
// -------------------------
131131

132-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
132+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
133133
.fxp-sidebar.fxp-sidebar-locked {
134134
&.fxp-sidebar-default {
135135
border-color: $sidebar-default-border-color;

‎scss/_variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ $sidebar-grid-breakpoints: $grid-breakpoints !default;
3737

3838
$sidebar-container-max-widths: $container-max-widths !default;
3939

40+
$sidebar-force-open-breakpoint: 'lg' !default;
41+
$sidebar-mobile-breakpoint: 'md' !default;
42+
4043
// Custom Sidebar
4144
// -------------------------
4245

‎scss/_wrapper.scss‎

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
}
1313

1414
&.fxp-sidebar-open ~ .fxp-sidebar-obfuscator {
15-
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
15+
@media (max-width: (map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint) - 1)) {
1616
z-index: $zindex-sidebar-obfuscator-fixed;
1717
}
1818
}
1919
}
2020
}
2121

22-
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
22+
@media (max-width: (map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint) - 1)) {
2323
.fxp-sidebar:not(.fxp-sidebar-full-locked) {
2424
&.fxp-sidebar-fixed-top,
2525
&.fxp-sidebar-fixed-bottom {
@@ -36,7 +36,7 @@
3636
}
3737
}
3838

39-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
39+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
4040
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked) {
4141
&.fxp-sidebar-static-top,
4242
&.fxp-sidebar-static-bottom {
@@ -47,7 +47,7 @@
4747
}
4848

4949
&.fxp-sidebar-open ~ .fxp-sidebar-obfuscator {
50-
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
50+
@media (max-width: (map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint) - 1)) {
5151
z-index: $zindex-sidebar-obfuscator-static;
5252
}
5353
}
@@ -97,7 +97,7 @@
9797

9898
.container-main {
9999
&.container-force-open-left {
100-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
100+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
101101
padding-left: $sidebar-width;
102102

103103
> .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
@@ -107,7 +107,7 @@
107107
}
108108

109109
&.container-force-open-right {
110-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
110+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
111111
padding-right: $sidebar-width;
112112

113113
> .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
@@ -120,6 +120,15 @@
120120
&.container-force-open-right {
121121
> .container,
122122
> .navbar > .container {
123+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xs')) {
124+
width: map-get($sidebar-container-max-widths, 'xs') - $sidebar-width;
125+
}
126+
@media (min-width: map-get($sidebar-grid-breakpoints, 'sm')) {
127+
width: map-get($sidebar-container-max-widths, 'sm') - $sidebar-width;
128+
}
129+
@media (min-width: map-get($sidebar-grid-breakpoints, 'md')) {
130+
width: map-get($sidebar-container-max-widths, 'md') - $sidebar-width;
131+
}
123132
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
124133
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-width;
125134
}
@@ -141,15 +150,15 @@
141150
&.container-full-locked {
142151
&.container-force-open-left {
143152
> .navbar > .container-fluid {
144-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
153+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
145154
padding-left: unquote('calc(#{$sidebar-width} + #{$sidebar-container-padding-x})');
146155
}
147156
}
148157
}
149158

150159
&.container-force-open-right {
151160
> .navbar > .container-fluid {
152-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
161+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
153162
padding-right: unquote('calc(#{$sidebar-width} + #{$sidebar-container-padding-x})');
154163
}
155164
}
@@ -159,6 +168,15 @@
159168
&.container-force-open-left.container-force-open-right {
160169
> .container,
161170
> .navbar > .container {
171+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xs')) {
172+
width: map-get($sidebar-container-max-widths, 'xs') - ($sidebar-width * 2);
173+
}
174+
@media (min-width: map-get($sidebar-grid-breakpoints, 'sm')) {
175+
width: map-get($sidebar-container-max-widths, 'sm') - ($sidebar-width * 2);
176+
}
177+
@media (min-width: map-get($sidebar-grid-breakpoints, 'md')) {
178+
width: map-get($sidebar-container-max-widths, 'md') - ($sidebar-width * 2);
179+
}
162180
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
163181
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width * 2);
164182
}
@@ -184,24 +202,24 @@
184202
}
185203

186204
&.container-mini-left {
187-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
205+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
188206
padding-left: $sidebar-mini-width;
189207
}
190208

191209
> .navbar > .container-fluid {
192-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
210+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
193211
padding-left: unquote('calc(#{$sidebar-mini-width} + #{$sidebar-container-padding-x})');
194212
}
195213
}
196214
}
197215

198216
&.container-mini-right {
199-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
217+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
200218
padding-right: $sidebar-mini-width;
201219
}
202220

203221
> .navbar > .container-fluid {
204-
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
222+
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
205223
padding-right: unquote('calc(#{$sidebar-mini-width} + #{$sidebar-container-padding-x})');
206224
}
207225
}
@@ -211,6 +229,15 @@
211229
&.container-mini-right {
212230
> .container,
213231
> .navbar > .container {
232+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xs')) {
233+
width: map-get($sidebar-container-max-widths, 'xs') - $sidebar-mini-width;
234+
}
235+
@media (min-width: map-get($sidebar-grid-breakpoints, 'sm')) {
236+
width: map-get($sidebar-container-max-widths, 'sm') - $sidebar-mini-width;
237+
}
238+
@media (min-width: map-get($sidebar-grid-breakpoints, 'md')) {
239+
width: map-get($sidebar-container-max-widths, 'md') - $sidebar-mini-width;
240+
}
214241
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
215242
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-mini-width;
216243
}

0 commit comments

Comments
 (0)