fix indicator margin for governance item (#1412)

AstarNetwork · Oct 29, 2024 · 0f7a1dc · 0f7a1dc
1 parent 254c654
commit 0f7a1dc
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/src/components/sidenav/SidebarDesktop.vue b/src/components/sidenav/SidebarDesktop.vue
@@ -132,18 +132,20 @@ export default defineComponent({
     const path = computed(() => router.currentRoute.value.path.split('/')[2]);
 
     const getIndicatorClass = (path: string): string => {
-      switch (path) {
-        case 'dashboard':
-          return 'menu__dashboard';
-        case 'assets':
-          return 'menu__assets';
-        case 'dapp-staking':
-          return 'menu__staking';
-        case 'bridge':
-          return 'menu__bridge';
-        default:
-          return 'menu__staking';
+      let indicatorClassObject: Record<string, string> = {
+        dashboard: 'menu__dashboard',
+        assets: 'menu__assets',
+        'dapp-staking': 'menu__staking',
+        bridge: 'menu__bridge',
+      };
+
+      let indicatorClass = indicatorClassObject[path] ?? 'menu__staking';
+
+      if (isGovernanceEnabled.value) {
+        indicatorClass += ' governance_activated';
       }
+
+      return indicatorClass;
     };
 
     return {

diff --git a/src/components/sidenav/styles/sidebar-desktop.scss b/src/components/sidenav/styles/sidebar-desktop.scss
@@ -99,18 +99,34 @@
 // adding -120px to the margin-top to adjust the position because of the lgfm logo
 .menu__assets {
   margin-top: calc(-276px - 120px);
+
+  &.governance_activated {
+    margin-top: calc(-276px - 120px - 46px);
+  }
 }
 
 .menu__dashboard {
   margin-top: calc(-230px - 120px);
+
+  &.governance_activated {
+    margin-top: calc(-230px - 120px - 46px);
+  }
 }
 
 .menu__staking {
   margin-top: calc(-184px - 120px);
+
+  &.governance_activated {
+    margin-top: calc(-184px - 120px - 46px);
+  }
 }
 
 .menu__bridge {
   margin-top: calc(-138px - 120px);
+
+  &.governance_activated {
+    margin-top: calc(-138px - 120px - 46px);
+  }
 }
 
 .dummy-row {