From a98a8542ca18529666ed0b66e1f21c1f49881a6c Mon Sep 17 00:00:00 2001
From: "Taegeon Go (Alan)" <tae.gun7784@gmail.com>
Date: Tue, 29 Oct 2024 20:32:38 +0900
Subject: [PATCH] fix indicator margin for governance item

---
 src/components/sidenav/SidebarDesktop.vue     | 24 ++++++++++---------
 .../sidenav/styles/sidebar-desktop.scss       | 16 +++++++++++++
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/sidenav/SidebarDesktop.vue b/src/components/sidenav/SidebarDesktop.vue
index dd940d642..5b6f05406 100644
--- 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
index f0e6fe986..4b61453b2 100644
--- 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 {