feat: add DarkMode Button

Kolektivo-Labs · Jan 22, 2024 · dfdff85 · dfdff85
1 parent 33d0f0a
commit dfdff85
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/components/navs/AppNav/AppNavActions.vue b/src/components/navs/AppNav/AppNavActions.vue
@@ -6,6 +6,7 @@ import useWeb3 from '@/services/web3/useWeb3';
 import { Goals, trackGoal } from '@/composables/useFathom';
 import AppNavAccountBtn from './AppNavAccountBtn.vue';
 import AppNavNetworkSelect from './AppNavNetworkSelect.vue';
+import DarkModeToggle from '@/components/btns/DarkModeToggle.vue';
 
 /**
  * COMPOSABLES
@@ -30,6 +31,7 @@ function connectWalletHandler() {
 
 <template>
   <div class="grid grid-rows-1 grid-flow-col gap-2">
+    <DarkModeToggle v-if="!isMobile" />
     <AppNavActivityBtn v-if="account" />
     <AppNavNetworkSelect v-if="!hideNetworkSelect" />
     <AppNavAccountBtn v-if="account" />

diff --git a/src/components/navs/AppNav/AppNavNetworkSelect.vue b/src/components/navs/AppNav/AppNavNetworkSelect.vue
@@ -165,7 +165,7 @@ function isActive(network: NetworkOption): boolean {
             :alt="network.name"
             class="mr-2 w-6 h-6 rounded-full"
           />
-          <span class="ml-1 font-medium">
+          <span class="overflow-x-hidden ml-1 max-w-full font-medium">
             {{ network.name }}
           </span>
 

diff --git a/src/components/navs/AppNav/AppSidebar/SidebarContent.vue b/src/components/navs/AppNav/AppSidebar/SidebarContent.vue
@@ -15,7 +15,7 @@ import { Goals, trackGoal } from '@/composables/useFathom';
 import useNetwork from '@/composables/useNetwork';
 import { sleep } from '@/lib/utils';
 import useWeb3 from '@/services/web3/useWeb3';
-
+import useDarkMode from '@/composables/useDarkMode';
 /**
  * PROPS & EMITS
  */
@@ -30,6 +30,7 @@ const { networkSlug } = useNetwork();
 const { t } = useI18n();
 const router = useRouter();
 const { openNpsModal } = useAppzi();
+const { darkMode, toggleDarkMode } = useDarkMode();
 
 /**
  * STATE
@@ -131,13 +132,13 @@ watch(blockNumber, async () => {
       }}</span>
     </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