refactor(CSidebar): improve responsive behavior

Author: mrholek

packages/coreui-vue/src/components/sidebar/CSidebar.ts

@@ -70,7 +70,10 @@ const CSidebar = defineComponent({
     /**
      * Toggle the visibility of sidebar component.
      */
-    visible: Boolean,
+    visible: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   emits: [
     /**
@@ -96,8 +99,6 @@ const CSidebar = defineComponent({
       props.visible !== undefined ? props.visible : props.overlaid ? false : true,
     )
 
-    // const visible = ref(props.visible)
-
     watch(inViewport, () => {
       emit('visible-change', inViewport.value)
       inViewport.value ? emit('show') : emit('hide')
@@ -194,7 +195,8 @@ const CSidebar = defineComponent({
               [`sidebar-${props.position}`]: props.position,
               [`sidebar-${props.size}`]: props.size,
               'sidebar-narrow-unfoldable': props.unfoldable,
-              show: (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
+              show:
+                (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
               hide: visibleDesktop.value === false && !mobile.value && !props.overlaid,
             },
             attrs.class,