update mobile

src/components/SlideoutPanel.vue

@@ -1,5 +1,5 @@
 <template>
-     <div class="slideout-overlay" :class="{'open': props.modelValue}" @click="$emit('update:modelValue', false)">
+     <div class="slideout-overlay" :class="{'open': props.modelValue}" @click="showPanel = false">
         <div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
        
             <div class="slideout-panel" @click="testClick">
@@ -19,8 +19,6 @@ const props = defineProps({
 defineEmits(["update:modelValue"]);
 
 const showPanel = inject("showPanel");
-console.log("showPanel.value", showPanel);
-const isMobile = inject("isMobile");
 
 function testClick(e) {
 	e.preventDefault();
@@ -39,20 +37,31 @@ function testClick(e) {
     .slideout-wrapper
         z-index: 100
         height: 100vh
-        right: 0
         position: fixed
         display: flex
         border: 1px solid rgba(152, 161, 192, 0.24)
         box-shadow: rgba(0, 0, 0, 0.24) 12px 16px 24px, rgba(0, 0, 0, 0.24) 12px 8px 12px, rgba(0, 0, 0, 0.32) 4px 4px 8px
-        transition: margin-right 250ms ease 0s
-        margin-right: -300px
         background-color: #2D2D2D
+        transition: margin-bottom 250ms ease 0s
+        width: 100%
+        margin-bottom: -100vh
+        bottom: 0
+        @media (min-width: 992px)
+            margin-right: -300px
+            transition: margin-right 250ms ease 0s
+            width: auto
+            right: 0
+            bottom: unset
         &.open
-            margin-right: 0
+            margin-bottom: -10vh
+            @media (min-width: 992px)
+                margin-right: 0
         .slideout-panel
-            width: 300px
+            width: 100%
             height: 100%
             padding: 24px
+            @media (min-width: 992px)
+                width: 300px
             .slideout-icon
                 cursor: pointer
                 &:hover, &:active, &:focus