update desktop

AstarNetwork · Dec 17, 2024 · 8ae0475 · 8ae0475
1 parent 7e9aeeb
commit 8ae0475
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/src/components/sidenav/SidebarDesktop.vue b/src/components/sidenav/SidebarDesktop.vue
@@ -88,8 +88,8 @@
           </div>
         </a>
       </div>
-      <a class="lfgm" :href="lfgmUrl" target="_blank">
-        <img :src="require('src/assets/img/lfgm.svg')" alt="LFGM" />
+      <a class="surge" :href="surgeUrl" target="_blank">
+        <img :src="require('src/assets/img/surge_token.gif')" alt="Surge" />
       </a>
       <div class="menu__indicator" :class="getIndicatorClass(path)" />
     </nav>
@@ -101,16 +101,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
-import { useStore } from 'src/store';
-import { useGovernance, useNetworkInfo, useSidebar } from 'src/hooks';
 import { providerEndpoints } from 'src/config/chainEndpoints';
-import Logo from '../common/Logo.vue';
-import { useRouter } from 'vue-router';
+import { useGovernance, useNetworkInfo, useSidebar } from 'src/hooks';
+import { socialUrl, surgeUrl } from 'src/links';
 import { Path as RoutePath } from 'src/router/routes';
-import IconEcosystem from './components/IconEcosystem.vue';
+import { useStore } from 'src/store';
+import { computed, defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Logo from '../common/Logo.vue';
 import SidebarOptionDesktop from './SidebarOptionDesktop.vue';
-import { socialUrl, lfgmUrl } from 'src/links';
+import IconEcosystem from './components/IconEcosystem.vue';
 
 export default defineComponent({
   components: {
@@ -132,7 +132,7 @@ export default defineComponent({
     const path = computed(() => router.currentRoute.value.path.split('/')[2]);
 
     const getIndicatorClass = (path: string): string => {
-      let indicatorClassObject: Record<string, string> = {
+      const indicatorClassObject: Record<string, string> = {
         dashboard: 'menu__dashboard',
         assets: 'menu__assets',
         'dapp-staking': 'menu__staking',
@@ -158,7 +158,7 @@ export default defineComponent({
       RoutePath,
       socialUrl,
       isZkyoto,
-      lfgmUrl,
+      surgeUrl,
       isGovernanceEnabled,
       governanceUrl,
     };

diff --git a/src/components/sidenav/styles/sidebar-desktop.scss b/src/components/sidenav/styles/sidebar-desktop.scss
@@ -98,34 +98,34 @@
 
 // adding -120px to the margin-top to adjust the position because of the lgfm logo
 .menu__assets {
-  margin-top: calc(-276px - 120px);
+  margin-top: calc(-276px - 158px);
 
   &.governance_activated {
-    margin-top: calc(-276px - 120px - 46px);
+    margin-top: calc(-276px - 158px - 46px);
   }
 }
 
 .menu__dashboard {
-  margin-top: calc(-230px - 120px);
+  margin-top: calc(-230px - 158px);
 
   &.governance_activated {
-    margin-top: calc(-230px - 120px - 46px);
+    margin-top: calc(-230px - 158px - 46px);
   }
 }
 
 .menu__staking {
-  margin-top: calc(-184px - 120px);
+  margin-top: calc(-184px - 158px);
 
   &.governance_activated {
-    margin-top: calc(-184px - 120px - 46px);
+    margin-top: calc(-184px - 158px - 46px);
   }
 }
 
 .menu__bridge {
-  margin-top: calc(-138px - 120px);
+  margin-top: calc(-138px - 158px);
 
   &.governance_activated {
-    margin-top: calc(-138px - 120px - 46px);
+    margin-top: calc(-138px - 158px - 46px);
   }
 }
 
@@ -152,16 +152,19 @@
   }
 }
 
-.lfgm {
+.surge {
   display: flex;
-  align-items: center;
-  width: 224px;
-  height: 112px;
+  justify-content: center;
   margin-bottom: 8px;
   color: #fff;
   position: relative;
   transition: all 0.3s ease 0s;
+  img {
+    width: 150px;
+    height: 150px;
+  }
 }
-.lfgm:hover {
-  background: $navy-3;
+
+.surge:hover {
+  background: black;
 }