update responsive design

src/components/Navbar.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import { useWalletStore } from "@/stores/wallet";
 const walletStore = useWalletStore();
 const { connected, address } = storeToRefs(walletStore);
+const isMobile = inject("isMobile");
 
 const showNavbar = ref(true);
 const lastScrollPosition = ref(0);
@@ -37,7 +38,7 @@ onBeforeUnmount(() => {
 					</router-link>
 				</div>
 				<div class="navbar-text">Bloodline</div>
-				<div class="navbar-center">
+				<div class="navbar-center" v-if="!isMobile">
 					<div class="navbar-social-links">
 						<div class="social-bloodline-badge">
 							<div class="social-bloodline-badge-icon">
@@ -60,8 +61,13 @@ onBeforeUnmount(() => {
 					</div>
 				</div>
 				<div class="navbar-end">
-					<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
-					<span v-else> {{ address }}</span>
+					<div v-if="!isMobile">
+						<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
+						<span v-else> {{ address }}</span>
+					</div>
+					<div v-else class="hamburger-menu">
+						<font-awesome-icon :icon="['fas', 'bars']" />
+					</div>
 				</div>
 			</div>
 		</div>
@@ -78,7 +84,9 @@ header
         width: 100%
         transform: translate3d(0,0,0)
         transition: transform .3s ease,visibility 0s .3s linear
-        height: 128px
+        height: 82px
+        @media (min-width: 992px)
+            height: 128px
         &.navbar--hidden
             transform: translate3d(0,-100%,0)
         .navbar-inner
@@ -89,10 +97,18 @@ header
             align-items: center
             @media (min-width: 992px)
                 padding: 16px 24px
+            .navbar-icon
+                img
+                    height: 50px
+                    width: 50px
             .navbar-text
                 font-family: 'Vampire', sans-serif
-                font-size: 64px
+                font-size: 36px
+                margin-left: 16px
                 letter-spacing: 0.138em
+                line-height: 73.107px
+                @media (min-width: 992px)
+                    font-size: 64px
             .navbar-center
                 display: flex
                 margin-left: auto
@@ -105,10 +121,15 @@ header
                         border-radius: 14px
                         background-color: #0F0F0F
                         display: flex
+                        &:hover,&:active,&:focus
+                            background-color: lighten(#0F0F0F, 10%)
+                            cursor: pointer
                         .social-bloodline-badge-icon
                             margin-right: 8px
             .navbar-end
                 display: flex
-                flex: 0 0 200px
-                justify-content: flex-end
+                margin-left: auto
+                .hamburger-menu
+                    color: var(--purple)
+                    font-size: 42px
 </style>