update mobile

src/components/Navbar.vue

@@ -7,8 +7,7 @@ const emit = defineEmits(["showPanel"]);
 const walletStore = useWalletStoreV2();
 const { connected, address } = storeToRefs(walletStore);
 const isMobile = inject("isMobile");
-
-const showPanel = ref(false);
+const showPanel = inject("showPanel");
 
 const showNavbar = ref(true);
 const lastScrollPosition = ref(0);
@@ -67,10 +66,10 @@ onBeforeUnmount(() => {
 				<div class="navbar-end">
 					<div v-if="!isMobile">
 						<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
-						<div v-if="!address" class="btn btn-immortal" @click="$emit('showPanel', true)">connect</div>
-						<span v-else @click="$emit('showPanel', true)"> {{ address }}</span>
+						<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div>
+						<span v-else @click="showPanel = true"> {{ address }}</span>
 					</div>
-					<div v-else class="hamburger-menu">
+					<div v-else class="hamburger-menu" @click="showPanel = true">
 						<font-awesome-icon :icon="['fas', 'bars']" />
 					</div>
 				</div>

src/components/SacrificeToken.vue

@@ -86,7 +86,7 @@
 					</div>
 				</div>
 				<div class="sacrifice-buttons-function-wrapper">
-					<div v-if="connected">
+					<div v-if="walletStore.connected">
 						<div
 							class="btn btn-immortal"
 							v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
@@ -105,7 +105,8 @@
 						</div>
 					</div>
 					<div v-else>
-						<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
+						<!-- <div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div> -->
+						<div class="btn btn-immortal" @click="showPanel = true">Connect</div>
 					</div>
 				</div>
 			</div>
@@ -115,15 +116,16 @@
 
 <script setup>
 import { ref, defineProps, watch, inject, computed } from "vue";
-import { useWalletStore } from "@/stores/wallet";
+import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import { useMemeburnerStore } from "@/stores/memeburner";
 import { storeToRefs } from "pinia";
 import Helper from "@/utils/helper.js";
 const isMobile = inject("isMobile");
+const showPanel = inject("showPanel");
 
-const walletStore = useWalletStore();
-const { contract, connected } = storeToRefs(walletStore);
+const walletStore = useWalletStoreV2();
+// const { connected } = storeToRefs(walletStore);
 
 const tokenStore = useTokenStore();
 const { activeToken, loading } = storeToRefs(tokenStore);

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