add lfgm image to mobile nav

AstarNetwork · Oct 14, 2024 · f5a0bba · f5a0bba
1 parent fc01c38
commit f5a0bba
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/src/components/header/mobile/MobileNav.vue b/src/components/header/mobile/MobileNav.vue
@@ -47,7 +47,9 @@
             </div>
           </router-link>
         </nav>
-
+        <a class="lfgm-mobile" :href="lfgmUrl">
+          <img :src="require('src/assets/img/lfgm.svg')" alt="LFGM" />
+        </a>
         <div class="gradient-bg">
           <astar-domains />
           <blog-posts />
@@ -84,10 +86,10 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue';
-import { useBreakpoints } from 'src/hooks';
-import { Path as RoutePath } from 'src/router/routes';
 import { useRouter } from 'vue-router';
-import { useNetworkInfo } from 'src/hooks';
+import { useBreakpoints, useNetworkInfo } from 'src/hooks';
+import { Path as RoutePath } from 'src/router/routes';
+import { lfgmUrl } from 'src/links';
 import { useStore } from 'src/store';
 import { providerEndpoints } from 'src/config/chainEndpoints';
 import AstarDomains from './AstarDomains.vue';
@@ -117,6 +119,7 @@ export default defineComponent({
       RoutePath,
       network,
       isZkyoto,
+      lfgmUrl,
     };
   },
 });
@@ -203,4 +206,15 @@ export default defineComponent({
   gap: 16px;
   padding: 0 16px;
 }
+
+.lfgm-mobile {
+  display: flex;
+  justify-content: center;
+  margin: 40px 0px;
+  img {
+    width: 100%;
+    height: 150px;
+    background: $navy-3;
+  }
+}
 </style>