chore: adjust mobile sidebar

src/components/_global/icons/brands/LinkedinIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    fill="#000000"
+    width="800px"
+    height="800px"
+    viewBox="-2 -2 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMinYMin"
+    class="jam jam-linkedin"
+  >
+    <path
+      d="M19.959 11.719v7.379h-4.278v-6.885c0-1.73-.619-2.91-2.167-2.91-1.182 0-1.886.796-2.195 1.565-.113.275-.142.658-.142 1.043v7.187h-4.28s.058-11.66 0-12.869h4.28v1.824l-.028.042h.028v-.042c.568-.875 1.583-2.126 3.856-2.126 2.815 0 4.926 1.84 4.926 5.792zM2.421.026C.958.026 0 .986 0 2.249c0 1.235.93 2.224 2.365 2.224h.028c1.493 0 2.42-.989 2.42-2.224C4.787.986 3.887.026 2.422.026zM.254 19.098h4.278V6.229H.254v12.869z"
+    />
+  </svg>
+</template>

src/components/_global/icons/brands/TelegramIcon.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    id="Layer_1"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 300 300"
+    style="enable-background: new 0 0 300 300"
+    xml:space="preserve"
+  >
+    <g id="XMLID_496_">
+      <path
+        id="XMLID_497_"
+        d="M5.299,144.645l69.126,25.8l26.756,86.047c1.712,5.511,8.451,7.548,12.924,3.891l38.532-31.412
+		c4.039-3.291,9.792-3.455,14.013-0.391l69.498,50.457c4.785,3.478,11.564,0.856,12.764-4.926L299.823,29.22
+		c1.31-6.316-4.896-11.585-10.91-9.259L5.218,129.402C-1.783,132.102-1.722,142.014,5.299,144.645z M96.869,156.711l135.098-83.207
+		c2.428-1.491,4.926,1.792,2.841,3.726L123.313,180.87c-3.919,3.648-6.447,8.53-7.163,13.829l-3.798,28.146
+		c-0.503,3.758-5.782,4.131-6.819,0.494l-14.607-51.325C89.253,166.16,91.691,159.907,96.869,156.711z"
+      />
+    </g>
+  </svg>
+</template>

src/components/navs/AppNav/AppSidebar/SidebarContent.vue

@@ -3,19 +3,17 @@ import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
+import GithubIcon from '@/components/_global/icons/brands/GithubIcon.vue';
+import LinkedinIcon from '@/components/_global/icons/brands/LinkedinIcon.vue';
+import TelegramIcon from '@/components/_global/icons/brands/TelegramIcon.vue';
+import TwitterIcon from '@/components/_global/icons/brands/TwitterIcon.vue';
 import AppLogo from '@/components/images/AppLogo.vue';
 import { version } from '@/composables/useApp';
 import useConfig from '@/composables/useConfig';
-import useDarkMode from '@/composables/useDarkMode';
+import { Goals, trackGoal } from '@/composables/useFathom';
+import useNetwork from '@/composables/useNetwork';
 import { sleep } from '@/lib/utils';
 import useWeb3 from '@/services/web3/useWeb3';
-import useNetwork from '@/composables/useNetwork';
-import { Goals, trackGoal } from '@/composables/useFathom';
-import TwitterIcon from '@/components/_global/icons/brands/TwitterIcon.vue';
-import DiscordIcon from '@/components/_global/icons/brands/DiscordIcon.vue';
-import MediumIcon from '@/components/_global/icons/brands/MediumIcon.vue';
-import YoutubeIcon from '@/components/_global/icons/brands/YoutubeIcon.vue';
-import GithubIcon from '@/components/_global/icons/brands/GithubIcon.vue';
 
 /**
  * PROPS & EMITS
@@ -25,7 +23,6 @@ const emit = defineEmits(['close']);
 /**
  * COMPOSABLES
  */
-const { darkMode, toggleDarkMode } = useDarkMode();
 const { blockNumber } = useWeb3();
 const { networkConfig } = useConfig();
 const { networkSlug } = useNetwork();
@@ -38,32 +35,18 @@ const router = useRouter();
 const blockIcon = ref<HTMLDivElement>();
 
 const navLinks = [
-  { label: t('pool'), path: '/', goal: Goals.ClickNavPools },
   { label: t('swap'), path: `/${networkSlug}/swap`, goal: Goals.ClickNavSwap },
-  {
-    label: t('claim'),
-    path: `/${networkSlug}/claim`,
-    goal: Goals.ClickNavClaim,
-  },
-  {
-    label: t('portfolio'),
-    path: `/${networkSlug}/portfolio`,
-    goal: Goals.ClickNavPortfolio,
-  },
-  { label: 'veBAL', path: `/${networkSlug}/vebal`, goal: Goals.ClickNavVebal },
+  { label: t('pool'), path: '/', goal: Goals.ClickNavPools },
+  { label: t('vote'), path: '/', goal: Goals.ClickNavPools },
+  { label: t('dashboard'), path: '/', goal: Goals.ClickNavPools },
 ];
 
 const ecosystemLinks = [
-  { label: t('build'), url: 'https://balancer.fi/build' },
-  { label: t('blog'), url: 'https://medium.com/balancer-protocol' },
   { label: t('docs'), url: 'https://docs.balancer.fi/' },
-  { label: t('governance'), url: 'https://vote.balancer.fi/#/' },
-  { label: t('analytics'), url: 'https://dune.xyz/balancerlabs' },
+  { label: t('tokens'), url: 'https://forum.balancer.fi/' },
   { label: t('forum'), url: 'https://forum.balancer.fi/' },
-  {
-    label: t('grants'),
-    url: 'http://grants.balancer.community',
-  },
+  { label: t('support'), url: 'https://forum.balancer.fi/' },
+  { label: t('analytics'), url: 'https://forum.balancer.fi/' },
 ];
 
 const socialLinks = {
@@ -72,23 +55,17 @@ const socialLinks = {
     url: 'https://twitter.com/BalancerLabs',
   },
   DiscordIcon: {
-    component: DiscordIcon,
+    component: TelegramIcon,
     url: 'https://discord.balancer.fi/',
   },
-  MediumIcon: {
-    component: MediumIcon,
-    url: 'https://medium.com/balancer-protocol',
-  },
-
-  YoutubeIcon: {
-    component: YoutubeIcon,
-    url: 'https://www.youtube.com/channel/UCBRHug6Hu3nmbxwVMt8x_Ow',
-  },
-
   GithubIcon: {
     url: 'https://github.com/balancer/',
     component: GithubIcon,
   },
+  LinkedinIcon: {
+    url: 'https://github.com/balancer/',
+    component: LinkedinIcon,
+  },
 };
 
 /**
@@ -148,13 +125,13 @@ watch(blockNumber, async () => {
       </BalLink>
     </div>
 
-    <div class="px-4 mt-6">
+    <!-- <div class="px-4 mt-6">
       <div class="mt-2 side-bar-btn" @click="toggleDarkMode">
         <MoonIcon v-if="!darkMode" class="mr-2" />
         <SunIcon v-else class="mr-2" />
         <span>{{ darkMode ? 'Light' : 'Dark' }} mode</span>
       </div>
-    </div>
+    </div> -->
 
     <div class="grid grid-rows-1 grid-flow-col auto-cols-min gap-2 px-4 mt-4">
       <BalLink