feat(components): allow to only hide offcanvas on breakpoint

packages/components/src/offcanvas/style.scss

@@ -1,24 +1,34 @@
-.msp-offcanvas {
+@use "@mini-strap/core/mixins";
+
+:root {
   --msp-offcanvas-anim-duration: var(--msp-anim-duration-md);
   --msp-offcanvas-anim-curve-in: cubic-bezier(0.22, 0.61, 0.36, 1);
   --msp-offcanvas-anim-curve-out: cubic-bezier(0.55, 0.06, 0.68, 0.19);
 
+  --msp-offcanvas-width: 15ch;
+}
+
+.msp-offcanvas {
+  position: fixed;
+  width: var(--msp-offcanvas-width);
+  height: 100vh;
+  top: 0;
+  left: -100%;
+
+  transition: left var(--msp-offcanvas-anim-duration)
+    var(--msp-offcanvas-anim-curve-out);
+
   &-content {
+    position: relative;
     overflow: hidden;
-    position: fixed;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     z-index: 5;
 
-    background-color: var(--msp-color-bg);
-
-    top: 0;
-    left: -100%;
+    background-color: var(--msp-color-bg-surface-1);
 
     padding: var(--msp-spacing-3);
 
-    transition: left var(--msp-offcanvas-anim-duration)
-      var(--msp-offcanvas-anim-curve-out);
-
     &-body,
     &-header,
     &-footer {
@@ -28,6 +38,11 @@
   }
 
   &.show {
+    left: 0;
+
+    transition: left var(--msp-offcanvas-anim-duration)
+      var(--msp-offcanvas-anim-curve-in);
+
     .msp-offcanvas-backdrop {
       opacity: 40%;
       left: 0;
@@ -37,13 +52,6 @@
           var(--msp-offcanvas-anim-curve-in),
         left 0s linear;
     }
-
-    .msp-offcanvas-content {
-      left: 0;
-
-      transition: left var(--msp-offcanvas-anim-duration)
-        var(--msp-offcanvas-anim-curve-in);
-    }
   }
 
   .msp-offcanvas-backdrop {
@@ -64,3 +72,18 @@
       left 0s linear var(--msp-offcanvas-anim-duration);
   }
 }
+
+@include mixins.responsive using($breakpoint, $size) {
+  .msp-offcanvas.msp-offcanvas-#{$breakpoint} {
+    width: var(--msp-offcanvas-width);
+    left: 0;
+
+    & ~ * {
+      margin-left: var(--msp-offcanvas-width);
+    }
+
+    .msp-offcanvas-backdrop {
+      display: none !important;
+    }
+  }
+}