Adding LFGM campaign (#1397)

* add lfgm link to links

* add lfgm asset

* add lfgm image to desktop sidebar

* add lfgm image to mobile nav

* add target as block to open new window

src/components/header/mobile/MobileNav.vue

@@ -47,7 +47,9 @@
             </div>
           </router-link>
         </nav>
-
+        <a class="lfgm-mobile" :href="lfgmUrl" target="_blank">
+          <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>

src/components/sidenav/SidebarDesktop.vue

@@ -96,6 +96,9 @@
           </div>
         </a>
       </div>
+      <a class="lfgm" :href="lfgmUrl" target="_blank">
+        <img :src="require('src/assets/img/lfgm.svg')" alt="LFGM" />
+      </a>
       <div class="menu__indicator" :class="getIndicatorClass(path)" />
     </nav>
 
@@ -115,7 +118,7 @@ import { useRouter } from 'vue-router';
 import { Path as RoutePath } from 'src/router/routes';
 import IconEcosystem from './components/IconEcosystem.vue';
 import SidebarOptionDesktop from './SidebarOptionDesktop.vue';
-import { socialUrl } from 'src/links';
+import { socialUrl, lfgmUrl } from 'src/links';
 
 export default defineComponent({
   components: {
@@ -162,6 +165,7 @@ export default defineComponent({
       RoutePath,
       socialUrl,
       isZkyoto,
+      lfgmUrl,
     };
   },
 });

src/components/sidenav/styles/sidebar-desktop.scss

@@ -37,7 +37,6 @@
 .menu {
   position: relative;
   margin-top: rem(32);
-  margin-left: 24px;
   flex-grow: 1;
 
   .row--item {
@@ -58,6 +57,7 @@
   height: 38px;
   padding: 8px;
   margin-bottom: 8px;
+  margin-left: 24px;
   border-radius: 6px;
   color: #fff;
   position: relative;
@@ -93,22 +93,24 @@
   border-radius: 6px;
   height: 38px;
   width: 176px;
+  margin-left: 24px;
 }
 
+// adding -120px to the margin-top to adjust the position because of the lgfm logo
 .menu__assets {
-  margin-top: -276px;
+  margin-top: calc(-276px - 120px);
 }
 
 .menu__dashboard {
-  margin-top: -230px;
+  margin-top: calc(-230px - 120px);
 }
 
 .menu__staking {
-  margin-top: -184px;
+  margin-top: calc(-184px - 120px);
 }
 
 .menu__bridge {
-  margin-top: -138px;
+  margin-top: calc(-138px - 120px);
 }
 
 .dummy-row {
@@ -133,3 +135,17 @@
     background: transparent;
   }
 }
+
+.lfgm {
+  display: flex;
+  align-items: center;
+  width: 224px;
+  height: 112px;
+  margin-bottom: 8px;
+  color: #fff;
+  position: relative;
+  transition: all 0.3s ease 0s;
+}
+.lfgm:hover {
+  background: $navy-3;
+}

src/links/index.ts

@@ -53,6 +53,8 @@ export const polkadotJsUrl = {
   },
 };
 
+export const lfgmUrl = 'https://lfgm.astar.network';
+
 export const getSubscanExtrinsic = ({
   subscanBase,
   hash,