Skip to content

Commit dede5ad

Browse files
committed
refactor: refactor CSidebar show prop mechanism
1 parent 1bc16f4 commit dede5ad

File tree

3 files changed

+8
-19
lines changed

3 files changed

+8
-19
lines changed

src/components/Sidebar/CSidebar.vue

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ export default {
2121
},
2222
minimize: Boolean,
2323
show: {
24-
type: Boolean,
25-
default: null
24+
type: [Boolean, String],
25+
default: 'responsive'
2626
},
2727
size: {
2828
type: String,
@@ -68,24 +68,13 @@ export default {
6868
}
6969
},
7070
computed: {
71-
displayClasses () {
72-
const breakpointPrefix = this.breakpoint === false ? '' : `-${this.breakpoint}`
73-
const responsiveClass = `c-sidebar${breakpointPrefix}-show`
74-
if (this.open === false) {
75-
return null
76-
} else if (this.open === true) {
77-
return ['c-sidebar-show', breakpointPrefix ? responsiveClass : '' ]
78-
} else if (this.open === null) {
79-
return responsiveClass
80-
}
81-
},
82-
8371
sidebarClasses () {
8472
return [
8573
'c-sidebar',
8674
`c-sidebar-${this.colorScheme}`,
87-
this.displayClasses,
8875
{
76+
'c-sidebar-show': this.open === true,
77+
[`c-sidebar-${this.breakpoint}-show`]: this.open === 'responsive',
8978
'c-sidebar-fixed': this.fixed,
9079
'c-sidebar-right': this.aside,
9180
'c-sidebar-minimized': this.minimize && !this.unfoldable,
@@ -104,8 +93,8 @@ export default {
10493
this.hideOnMobileClick &&
10594
this.isOnMobile()
10695
) {
107-
this.open = false
108-
this.$emit('update:show', false)
96+
this.open = 'responsive'
97+
this.$emit('update:show', 'responsive')
10998
}
11099
},
111100
isOnMobile () {

src/components/Sidebar/tests/__snapshots__/CSidebar.spec.js.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ exports[`CSidebar .vue renders correctly 1`] = `
1010
exports[`CSidebar .vue renders correctly 2`] = `
1111
<div>
1212
<div
13-
class="c-sidebar c-sidebar-dark c-sidebar-show c-sidebar-lg-show c-sidebar-fixed"
13+
class="c-sidebar c-sidebar-dark c-sidebar-show c-sidebar-fixed"
1414
>
1515
<a
1616
href="/some-path"

src/components/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -457,7 +457,7 @@ export declare class CSidebar extends Vue {
457457
unfoldable: boolean
458458
breakpoint: [string, boolean]
459459
minimize: boolean
460-
show: boolean
460+
show: [boolean, string]
461461
hideOnMobileClick: boolean
462462
aside: boolean
463463
colorScheme: string

0 commit comments

Comments
 (0)