feat: add governance to sidebar

packages/shared/components/Sidebar.svelte

@@ -54,6 +54,10 @@
         dashboardRoute.set(Tabs.Staking)
     }
 
+    function openGovernance() {
+        dashboardRoute.set(Tabs.Governance)
+    }
+
     const hasTitleBar = document.body.classList.contains('platform-win32')
 </script>
 
@@ -75,7 +79,7 @@
                 <Icon width="24" height="24" icon="wallet" />
             </button>
             <button
-                class="{$dashboardRoute === Tabs.Staking ? 'text-blue-500' : 'text-gray-500'} relative"
+                class="mb-8 {$dashboardRoute === Tabs.Staking ? 'text-blue-500' : 'text-gray-500'} relative"
                 on:click={openStaking}>
                 <Icon width="24" height="24" icon="tokens" />
                 {#if !$activeProfile?.hasVisitedStaking || showStakingNotification}
@@ -86,6 +90,11 @@
                     </span>
                 {/if}
             </button>
+            <button
+                class="{$dashboardRoute === Tabs.Governance ? 'text-blue-500' : 'text-gray-500'}"
+                on:click={openGovernance}>
+                <Icon width="24" height="24" icon="policy" />
+            </button>
         </div>
         <span class="flex flex-col items-center">
             <button class="mb-7 health-status" on:click={() => (showNetwork = true)}>

packages/shared/components/icon/icons.js

@@ -1174,4 +1174,31 @@ export const icons = {
             },
         ],
     },
+    policy: {
+        width: 24,
+        height: 24,
+        path: [
+            {
+                d: 'M3.99999 3.09968e-07H14.0001C16.7615 3.09968e-07 19.0001 2.23858 19.0001 5V15H17.0001V5C17.0001 3.34315 15.6569 2 14.0001 2H6.00001L6.00005 15C6.00005 16.6569 7.3432 18 9.00005 18H11.4376V20H9.00005C6.23863 20 4.00005 17.7614 4.00005 15L3.99999 3.09968e-07Z',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+            },
+            {
+                d: 'M8 18C8.32719 18 8.61768 17.8429 8.80012 17.5999C8.92563 17.4328 9 17.2251 9 17C9 16.4477 8.55228 16 8 16V14H18.5C20.1569 14 21.5 15.3431 21.5 17C21.5 18.6569 20.1569 20 18.5 20H9.00005L8 18ZM10.8293 18H18.5C19.0523 18 19.5 17.5523 19.5 17C19.5 16.4477 19.0523 16 18.5 16H10.8293C10.9398 16.3128 11 16.6494 11 17C11 17.3506 10.9398 17.6872 10.8293 18Z',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+            },
+            {
+                d: 'M3 4H4V2H3C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM6 6L6 2.62268e-07L3 0C1.34315 -1.44847e-07 1.44847e-07 1.34315 0 3C-1.44847e-07 4.65685 1.34315 6 3 6L6 6Z',
+                fillRule: 'evenodd',
+                clipRule: 'evenodd',
+            },
+            {
+                d: 'M8 5H15V7H8V5Z',
+            },
+            {
+                d: 'M8 9H13V11H8V9Z',
+            },
+        ],
+    },
 }

packages/shared/lib/typings/routes.ts

@@ -59,6 +59,7 @@ export enum Tabs {
     Wallet = 'wallet',
     Settings = 'settings',
     Staking = 'staking',
+    Governance = 'governance',
 }
 
 export enum SettingsRoutes {

packages/shared/locales/en.json

@@ -527,6 +527,9 @@
                     "description": "The incentivized staging network to advance major innovations on IOTA. Whatever happens, happens. How Shimmer evolves is up to you."
                 }
             }
+        },
+        "governance": {
+            "title": "Governance"
         }
     },
     "popups": {

packages/shared/routes/dashboard/Dashboard.svelte

@@ -3,7 +3,7 @@
     import { get } from 'svelte/store'
 
     import { Idle, Sidebar, DeveloperProfileIndicator } from 'shared/components'
-    import { Settings, Staking, Wallet } from 'shared/routes'
+    import { Settings, Staking, Wallet, Governance } from 'shared/routes'
     import { loggedIn, logout, sendParams } from 'shared/lib/app'
     import { appSettings } from 'shared/lib/appSettings'
     import { deepLinkRequestActive, parseDeepLink } from 'shared/lib/deepLinking/deepLinking'
@@ -42,6 +42,7 @@
         wallet: Wallet,
         settings: Settings,
         staking: Staking,
+        governance: Governance,
     }
 
     let startInit

packages/shared/routes/dashboard/governance/Governance.svelte

@@ -0,0 +1,7 @@
+<script lang="typescript">
+    import { GovernanceHeader } from './views'
+</script>
+
+<div class="staking-wrapper w-full h-full flex flex-col flex-nowrap px-10 py-8 flex-1 bg-gray-50 dark:bg-gray-900">
+    <GovernanceHeader />
+</div>

packages/shared/routes/dashboard/governance/views/GovernanceHeader.svelte

@@ -0,0 +1,8 @@
+<script lang="typescript">
+    import { Text } from 'shared/components'
+    import { localize } from 'shared/lib/i18n'
+</script>
+
+<div class="flex flex-row justify-between items-center pb-8">
+    <Text type="h1" classes="ml-2.5 mr-5">{localize('views.governance.title')}</Text>
+</div>

packages/shared/routes/dashboard/governance/views/index.js

@@ -0,0 +1 @@
+export { default as GovernanceHeader } from './GovernanceHeader.svelte'

packages/shared/routes/index.js

@@ -22,6 +22,7 @@ export { default as Dashboard } from 'shared/routes/dashboard/Dashboard.svelte'
 export { default as Wallet } from 'shared/routes/dashboard/wallet/Wallet.svelte'
 export { default as Settings } from 'shared/routes/dashboard/settings/Settings.svelte'
 export { default as Staking } from 'shared/routes/dashboard/staking/Staking.svelte'
+export { default as Governance } from 'shared/routes/dashboard/governance/Governance.svelte'
 
 // login
 export { default as Login } from 'shared/routes/login/Login.svelte'