From 1d045b3cd4164ba6ef2388ca9dc88b73824cbbbc Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Thu, 11 May 2023 12:26:41 +0800
Subject: [PATCH 1/7] feat: wallet

---
 src/modules/[chain]/index.vue | 95 ++++++++++++++++++++++++-----------
 1 file changed, 66 insertions(+), 29 deletions(-)

diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 730f1ac0..99ac8b89 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -13,8 +13,8 @@ import ProposalListItem from '@/components/ProposalListItem.vue';
 
 const blockchain = useBlockchain();
 const store = useIndexModule();
-const walletStore = useWalletStore()
-const format = useFormatter()
+const walletStore = useWalletStore();
+const format = useFormatter();
 
 const coinInfo = computed(() => {
   return store.coinInfo;
@@ -22,7 +22,7 @@ const coinInfo = computed(() => {
 
 onMounted(() => {
   store.loadDashboard();
-  walletStore.loadMyAsset()
+  walletStore.loadMyAsset();
 });
 
 const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
@@ -33,7 +33,7 @@ blockchain.$subscribe((m, s) => {
     ['chainName', 'endpoint'].includes(m.events.key)
   ) {
     store.loadDashboard();
-    walletStore.loadMyAsset()
+    walletStore.loadMyAsset();
   }
 });
 function shortName(name: string, id: string) {
@@ -68,19 +68,19 @@ const comLinks = [
 
 // wallet box
 const change = computed(() => {
-  const token = walletStore.balanceOfStakingToken
-  return token? format.priceChanges(token.denom) : 0
-})
-const color= computed(() => {
-  switch(true) {
-    case change.value > 0: 
-      return "text-green-600"
+  const token = walletStore.balanceOfStakingToken;
+  return token ? format.priceChanges(token.denom) : 0;
+});
+const color = computed(() => {
+  switch (true) {
+    case change.value > 0:
+      return 'text-green-600';
     case change.value === 0:
-      return "text-grey-500"
+      return 'text-grey-500';
     case change.value < 0:
-      return "text-red-600"
+      return 'text-red-600';
   }
-})
+});
 </script>
 
 <template>
@@ -235,18 +235,59 @@ const color= computed(() => {
       </div>
     </div>
 
-    <div class="bg-transparent rounded mt-4 border-2 border-primary">
+    <div class="bg-base-100 rounded mt-4 shadow">
       <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
-        {{ walletStore.currentAddress || "Not Connected" }}
-        <span v-if="walletStore.currentAddress" class="float-right font-light text-sm">More</span>
+        {{ walletStore.currentAddress || 'Not Connected' }}
+        <span
+          v-if="walletStore.currentAddress"
+          class="float-right font-light text-sm"
+          >More</span
+        >
       </div>
-      <div class="grid grid-cols-1 md:grid-cols-4 auto-cols-auto gap-4 px-4 pb-8 py-4">
-        <div class="bg-base-100">{{ format.formatToken(walletStore.balanceOfStakingToken) }}
-          <br><span :class="color">{{ format.showChanges(change) }}<small>%</small></span>{{ format.tokenValue(walletStore.balanceOfStakingToken) }}</div>
-        <div class="bg-base-100">{{ format.formatToken(walletStore.stakingAmount) }}
-        <br> {{ format.tokenValue(walletStore.stakingAmount) }}</div>
-        <div class="bg-base-100">{{ format.formatToken(walletStore.rewardAmount) }}</div>
-        <div class="bg-base-100">{{ format.formatToken(walletStore.unbondingAmount) }}</div>
+      <div
+        class="grid grid-cols-1 md:grid-cols-4 auto-cols-auto gap-4 px-4 pb-6"
+      >
+        <div class="bg-gray-100 dark:bg-base-content rounded-sm px-4 py-3">
+          <div class="text-sm mb-1">Balance</div>
+          <div class="text-lg font-semibold text-main">
+            {{ format.formatToken(walletStore.balanceOfStakingToken) }}
+          </div>
+          <div class="text-sm">
+            <span :class="color"
+              >{{ format.showChanges(change) }}<small>%</small>
+            </span>
+            <span class="ml-1">{{
+              format.tokenValue(walletStore.balanceOfStakingToken)
+            }}</span>
+          </div>
+        </div>
+        <div class="bg-gray-100 dark:bg-base-content rounded-sm px-4 py-3">
+          <div class="text-sm mb-1">Staking</div>
+          <div class="text-lg font-semibold text-main">
+            {{ format.formatToken(walletStore.stakingAmount) }}
+          </div>
+          <div class="text-sm">
+            {{ format.tokenValue(walletStore.stakingAmount) }}
+          </div>
+        </div>
+        <div class="bg-gray-100 dark:bg-base-content rounded-sm px-4 py-3">
+          <div class="text-sm mb-1">Reward</div>
+          <div class="text-lg font-semibold text-main">
+            {{ format.formatToken(walletStore.rewardAmount) }}
+          </div>
+          <div class="text-sm">
+            {{ format.tokenValue(walletStore.rewardAmount) }}
+          </div>
+        </div>
+        <div class="bg-gray-100 dark:bg-base-content rounded-sm px-4 py-3">
+          <div class="text-sm mb-1">Unbonding</div>
+          <div class="text-lg font-semibold text-main">
+            {{ format.formatToken(walletStore.unbondingAmount) }}
+          </div>
+          <div class="text-sm">
+            {{ format.tokenValue(walletStore.unbondingAmount) }}
+          </div>
+        </div>
       </div>
 
       <div>
@@ -255,12 +296,8 @@ const color= computed(() => {
         </div>
       </div>
 
-      <div>
-
-      </div>
+      <div></div>
     </div>
-
-
   </div>
 </template>
 

From 7139b76606f853cd4da986d98c777e7f26f830d8 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Thu, 11 May 2023 17:22:15 +0800
Subject: [PATCH 2/7] feat: clear bg-base-content

---
 src/components/ChainSummary.vue               | 2 +-
 src/modules/[chain]/index.vue                 | 8 ++++----
 src/plugins/vuetify/@core/components/I18n.vue | 2 +-
 tailwind.config.js                            | 2 --
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/ChainSummary.vue b/src/components/ChainSummary.vue
index ff6536e5..20a9371d 100644
--- a/src/components/ChainSummary.vue
+++ b/src/components/ChainSummary.vue
@@ -27,7 +27,7 @@ const addFavor = (e: Event) => {
 <template>
   <RouterLink
     :to="`/${name}`"
-    class="bg-base-100 hover:bg-base-content rounded shadow flex items-center px-3 py-3 cursor-pointer"
+    class="bg-base-100 hover:bg-gray-100 dark:hover:bg-[#373f59] rounded shadow flex items-center px-3 py-3 cursor-pointer"
   >
     <div class="w-8 h-8 rounded-full overflow-hidden">
       <img :src="conf.logo" />
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index 99ac8b89..f8ffb8d3 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -247,7 +247,7 @@ const color = computed(() => {
       <div
         class="grid grid-cols-1 md:grid-cols-4 auto-cols-auto gap-4 px-4 pb-6"
       >
-        <div class="bg-gray-100 dark:bg-base-content rounded-sm px-4 py-3">
+        <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">Balance</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.balanceOfStakingToken) }}
@@ -261,7 +261,7 @@ const color = computed(() => {
             }}</span>
           </div>
         </div>
-        <div class="bg-gray-100 dark:bg-base-content rounded-sm px-4 py-3">
+        <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">Staking</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.stakingAmount) }}
@@ -270,7 +270,7 @@ const color = computed(() => {
             {{ format.tokenValue(walletStore.stakingAmount) }}
           </div>
         </div>
-        <div class="bg-gray-100 dark:bg-base-content rounded-sm px-4 py-3">
+        <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">Reward</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.rewardAmount) }}
@@ -279,7 +279,7 @@ const color = computed(() => {
             {{ format.tokenValue(walletStore.rewardAmount) }}
           </div>
         </div>
-        <div class="bg-gray-100 dark:bg-base-content rounded-sm px-4 py-3">
+        <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">Unbonding</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.unbondingAmount) }}
diff --git a/src/plugins/vuetify/@core/components/I18n.vue b/src/plugins/vuetify/@core/components/I18n.vue
index 5b4c9e70..f0998796 100644
--- a/src/plugins/vuetify/@core/components/I18n.vue
+++ b/src/plugins/vuetify/@core/components/I18n.vue
@@ -45,7 +45,7 @@ function changeLang(lang: string){
     >
       <li v-for="lang in props.languages" :key="lang.i18nLang">
         <a
-          class="hover:bg-base-content"
+          class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
           :class="{ 'text-primary': currentLang === lang.i18nLang }"
           @click="changeLang(lang.i18nLang)"
           >{{ lang.label }}</a
diff --git a/tailwind.config.js b/tailwind.config.js
index 38e17d4e..39b5c07f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,7 +22,6 @@ module.exports = {
         light: {
           ...require('daisyui/src/colors/themes')['[data-theme=light]'],
           primary: '#666cff',
-          'base-content': '#e9eaeb',
         },
       },
       {
@@ -30,7 +29,6 @@ module.exports = {
           ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
           primary: '#666cff',
           'base-100': '#2a334c',
-          'base-content': '#373f57',
         },
       },
     ],

From 7d26cd3f4afbc9d2c188bb288bd0690254e10347 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Thu, 11 May 2023 18:33:01 +0800
Subject: [PATCH 3/7] feat: DefaultLayout && Chain Profile

---
 src/layouts/components/ChainProfile.vue  | 136 ++++++++++++++---------
 src/layouts/components/DefaultLayout.vue |  26 +++++
 2 files changed, 107 insertions(+), 55 deletions(-)

diff --git a/src/layouts/components/ChainProfile.vue b/src/layouts/components/ChainProfile.vue
index 66b81d0e..c28458c2 100644
--- a/src/layouts/components/ChainProfile.vue
+++ b/src/layouts/components/ChainProfile.vue
@@ -11,62 +11,88 @@ chainStore.$subscribe((m, s) => {
 </script>
 
 <template>
-  <VListItem class="m-0 p-0">
-    <template #prepend>
-      <VBadge
-        dot
-        location="bottom right"
-        offset-x="3"
-        offset-y="3"
-        bordered
-        color="success"
-        class="mr-2"
+  <div class="flex items-center">
+    <div class="dropdown">
+      <div tabindex="0" class="p-1 relative mr-3 cursor-pointer">
+        <img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
+        <div
+          class="w-2 h-2 rounded-full bg-yes absolute right-0 bottom-0"
+        ></div>
+      </div>
+      <div
+        class="dropdown-content menu shadow bg-base-100 rounded-box max-h-[300px] overflow-auto"
       >
-        <VAvatar class="cursor-pointer" color="primary" variant="tonal">
-          <VImg :src="chainStore.logo" />
+        <div>
+          <!-- rest -->
+          <div
+            class="px-4 py-2 text-sm text-gray-400"
+            v-if="chainStore.current?.endpoints?.rest"
+          >
+            Rest Endpoint
+          </div>
+          <div tabindex="0">
+            <div
+              v-for="(item, index) in chainStore.current?.endpoints?.rest"
+              @click="chainStore.setRestEndpoint(item)"
+              class="px-4 py-2 hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
+              :key="index"
+            >
+              <div class="flex flex-col items-start">
+                <div class="flex items-center justify-between w-full">
+                  <div class="text-gray-500 dark:text-gray-200 capitalize">
+                    {{ item.provider }}
+                  </div>
 
-          <!-- SECTION Menu -->
-          <VMenu activator="parent" location="bottom start" offset="14px">
-            <VList>
-              <!-- 👉 Rest -->
-              <VListSubheader
-                v-if="chainStore.current?.endpoints?.rest"
-                title="Rest Endpoint"
-              />
-              <VListItem
-                v-for="i in chainStore.current?.endpoints?.rest"
-                link
-                @click="chainStore.setRestEndpoint(i)"
-              >
-                <VListItemTitle
-                  >{{ i.provider }}
-                  <VIcon
-                    v-if="i.address === chainStore.endpoint?.address"
-                    icon="mdi-check"
-                    color="success"
-                /></VListItemTitle>
-                <VListItemSubtitle>{{ i.address }}</VListItemSubtitle>
-              </VListItem>
+                  <span
+                    v-if="item.address === chainStore.endpoint?.address"
+                    class="bg-yes inline-block h-2 w-2 rounded-full"
+                  />
+                </div>
+                <div class="text-gray-400 text-xs whitespace-nowrap">
+                  {{ item.address }}
+                </div>
+              </div>
+            </div>
+          </div>
 
-              <VListSubheader
-                v-if="chainStore.current?.endpoints?.grpc"
-                title="gRPC Endpoint"
-              />
-              <VListItem v-for="i in chainStore.current?.endpoints?.grpc" link>
-                <VListItemTitle>{{ i.provider }}</VListItemTitle>
-                <VListItemSubtitle>{{ i.address }}</VListItemSubtitle>
-              </VListItem>
-            </VList>
-          </VMenu>
-          <!-- !SECTION -->
-        </VAvatar>
-      </VBadge>
-    </template>
-    <VListItemTitle>{{
-      baseStore.latest.block?.header?.chain_id || chainStore.chainName || ''
-    }}</VListItemTitle>
-    <VListItemSubtitle>
-      {{ chainStore.connErr || chainStore.endpoint.address }}</VListItemSubtitle
-    >
-  </VListItem>
+          <!-- grpc -->
+          <div
+            class="px-4 py-2 text-sm text-gray-400"
+            v-if="chainStore.current?.endpoints?.grpc"
+          >
+            gRPC Endpoint
+          </div>
+          <ul tabindex="0">
+            <li
+              v-for="(item, index) in chainStore.current?.endpoints?.grpc"
+              :key="index"
+            >
+              <div class="flex flex-col items-start">
+                <div class="flex items-center justify-between w-full">
+                  <p class="text-gray-500 dark:text-gray-200 capitalize">
+                    {{ item?.provider }}
+                  </p>
+                </div>
+                <div class="text-gray-400 text-xs whitespace-nowrap">
+                  {{ item?.address }}
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        class="capitalize text-base font-semibold text-gray-600 dark:text-gray-200"
+      >
+        {{
+          baseStore.latest.block?.header?.chain_id || chainStore.chainName || ''
+        }}
+      </div>
+      <div class="text-xs text-gray-500 dark:text-gray-400">
+        {{ chainStore.connErr || chainStore.endpoint.address }}
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 25a16b95..c75ce792 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -50,6 +50,32 @@ blockchain.$subscribe((m, s) => {
 </script>
 
 <template>
+  <div>
+    <div class="flex items-center py-3 px-5">
+      <div class="text-2xl pr-3 cursor-pointer xl:hidden">
+        <Icon icon="mdi-menu" />
+      </div>
+
+      <UserProfile />
+
+      <div class="flex-1"></div>
+
+      <!-- <NavSearchBar />-->
+      <NavBarNotifications class="hidden md:inline-block" />
+      <NavBarI18n class="hidden md:inline-block" />
+      <NavbarThemeSwitcher class="hidden md:inline-block" />
+      <NavBarWallet class="md:inline-block" />
+    </div>
+
+    <!-- 👉 Pages -->
+    <RouterView v-slot="{ Component }">
+      <Transition :name="appRouteTransition" mode="out-in">
+        <Component :is="Component" />
+      </Transition>
+    </RouterView>
+
+    <newFooter />
+  </div>
   <VerticalNavLayout :nav-items="blockchain.computedChainMenu">
     <!-- 👉 navbar -->
     <template #navbar="{ toggleVerticalOverlayNavActive }">

From 358a2c48485af22c248555468b702bc1b0dd4d60 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Thu, 11 May 2023 18:48:57 +0800
Subject: [PATCH 4/7] feat: side bar

---
 src/layouts/components/DefaultLayout.vue | 97 +++++-------------------
 1 file changed, 17 insertions(+), 80 deletions(-)

diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index c75ce792..59ecc379 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -50,40 +50,18 @@ blockchain.$subscribe((m, s) => {
 </script>
 
 <template>
-  <div>
-    <div class="flex items-center py-3 px-5">
-      <div class="text-2xl pr-3 cursor-pointer xl:hidden">
-        <Icon icon="mdi-menu" />
+  <div class="">
+    <div class="w-64 fixed left-0 top-0 bottom-0 overflow-auto">
+      <div v-for="(item, index) of blockchain.computedChainMenu" :key="index">
+        <div>{{ item?.title }}</div>
+        <div v-for="(el, key) of item?.children" :key="key">
+          {{ el?.title }}
+        </div>
       </div>
-
-      <UserProfile />
-
-      <div class="flex-1"></div>
-
-      <!-- <NavSearchBar />-->
-      <NavBarNotifications class="hidden md:inline-block" />
-      <NavBarI18n class="hidden md:inline-block" />
-      <NavbarThemeSwitcher class="hidden md:inline-block" />
-      <NavBarWallet class="md:inline-block" />
     </div>
-
-    <!-- 👉 Pages -->
-    <RouterView v-slot="{ Component }">
-      <Transition :name="appRouteTransition" mode="out-in">
-        <Component :is="Component" />
-      </Transition>
-    </RouterView>
-
-    <newFooter />
-  </div>
-  <VerticalNavLayout :nav-items="blockchain.computedChainMenu">
-    <!-- 👉 navbar -->
-    <template #navbar="{ toggleVerticalOverlayNavActive }">
+    <div class="ml-64 px-5">
       <div class="flex items-center py-3">
-        <div
-          class="text-2xl pr-3 cursor-pointer xl:hidden"
-          @click="toggleVerticalOverlayNavActive(true)"
-        >
+        <div class="text-2xl pr-3 cursor-pointer xl:hidden">
           <Icon icon="mdi-menu" />
         </div>
 
@@ -97,56 +75,15 @@ blockchain.$subscribe((m, s) => {
         <NavbarThemeSwitcher class="hidden md:inline-block" />
         <NavBarWallet class="md:inline-block" />
       </div>
-    </template>
 
-    <!-- 👉 Pages -->
-    <RouterView v-slot="{ Component }">
-      <Transition :name="appRouteTransition" mode="out-in">
-        <Component :is="Component" />
-      </Transition>
-    </RouterView>
+      <!-- 👉 Pages -->
+      <RouterView v-slot="{ Component }">
+        <Transition :name="appRouteTransition" mode="out-in">
+          <Component :is="Component" />
+        </Transition>
+      </RouterView>
 
-    <!-- 👉 Footer -->
-    <template #footer>
-      <!-- <Footer /> -->
       <newFooter />
-    </template>
-
-    <!-- 👉 Customizer -->
-    <!-- <TheCustomizer />  -->
-  </VerticalNavLayout>
+    </div>
+  </div>
 </template>
-
-<style lang="scss">
-@keyframes rotate-180 {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(180deg);
-  }
-}
-
-@keyframes rotate-back-180 {
-  from {
-    transform: rotate(180deg);
-  }
-
-  to {
-    transform: rotate(0deg);
-  }
-}
-
-.layout-vertical-nav {
-  .nav-header {
-    .header-action {
-      animation-duration: 0s;
-      animation-duration: 0.35s;
-      animation-fill-mode: forwards;
-      animation-name: v-bind(verticalNavHeaderActionAnimationName);
-      transform: rotate(0deg);
-    }
-  }
-}
-</style>

From bfa3936dbb47620ade88b0ea318507f3f0bccf9f Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 12 May 2023 01:05:40 +0800
Subject: [PATCH 5/7] feat: side bar style

---
 src/layouts/components/DefaultLayout.vue | 123 +++++++++++++++++++----
 src/style.css                            |  14 +++
 2 files changed, 115 insertions(+), 22 deletions(-)

diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 59ecc379..f31f3c14 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -11,7 +11,6 @@ import UserProfile from '@/layouts/components/ChainProfile.vue';
 import { useDashboard } from '@/stores/useDashboard';
 
 // @layouts plugin
-import { VerticalNavLayout } from '@layouts';
 import NavBarI18n from './NavBarI18n.vue';
 import NavSearchBar from './NavSearchBar.vue';
 import NavBarNotifications from './NavBarNotifications.vue';
@@ -20,23 +19,7 @@ import TheCustomizer from '@/plugins/vuetify/@core/components/TheCustomizer.vue'
 import Breadcrumbs from './Breadcrumbs.vue';
 import { useBlockchain } from '@/stores';
 
-const {
-  appRouteTransition,
-  isLessThanOverlayNavBreakpoint,
-  isVerticalNavCollapsed,
-} = useThemeConfig();
-const { width: windowWidth } = useWindowSize();
-
-// ℹ️ Provide animation name for vertical nav collapse icon.
-const verticalNavHeaderActionAnimationName = ref<
-  null | 'rotate-180' | 'rotate-back-180'
->(null);
-
-watch(isVerticalNavCollapsed, (val) => {
-  verticalNavHeaderActionAnimationName.value = val
-    ? 'rotate-180'
-    : 'rotate-back-180';
-});
+const { appRouteTransition } = useThemeConfig();
 
 const dashboard = useDashboard();
 dashboard.initial();
@@ -51,11 +34,107 @@ blockchain.$subscribe((m, s) => {
 
 <template>
   <div class="">
-    <div class="w-64 fixed left-0 top-0 bottom-0 overflow-auto">
+    <div class="w-64 fixed left-0 top-0 bottom-0 overflow-auto bg-base-100">
+      <div class="flex items-center pl-4 py-4 mb-1">
+        <img class="w-10 h-10" src="../../assets/logo.svg" />
+        <h1 class="flex-1 ml-3 text-2xl font-bold dark:text-white">Ping.pub</h1>
+        <div class="pr-4 cursor-pointer xl:hidden">
+          <Icon icon="mdi-close" class="text-3xl" />
+        </div>
+      </div>
       <div v-for="(item, index) of blockchain.computedChainMenu" :key="index">
-        <div>{{ item?.title }}</div>
-        <div v-for="(el, key) of item?.children" :key="key">
-          {{ el?.title }}
+        <div
+          v-if="item?.title && item?.children?.length"
+          class="collapse"
+          :class="{ 'collapse-arrow': item?.children?.length > 0 }"
+        >
+          <input type="checkbox" />
+          <div
+            class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          >
+            <Icon
+              v-if="item?.icon?.icon"
+              :icon="item?.icon?.icon"
+              class="text-xl mr-2"
+              :class="{
+                'text-yellow-500': item?.title === 'Favorite',
+                'text-blue-500': item?.title !== 'Favorite',
+              }"
+            />
+            <img
+              v-if="item?.icon?.image"
+              v-lazy="item?.icon?.image"
+              class="w-6 h-6 rounded-full mr-3"
+            />
+            <div
+              class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
+            >
+              {{ item?.title }}
+            </div>
+            <div
+              v-if="item?.badgeContent"
+              class="mr-6 badge badge-sm badge-primary"
+            >
+              {{ item?.badgeContent }}
+            </div>
+          </div>
+          <div class="collapse-content">
+            <div class="menu bg-base-100 w-full">
+              <RouterLink
+                v-for="(el, key) of item?.children"
+                :key="key"
+                class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
+                :to="el?.to"
+              >
+                <img
+                  v-if="el?.icon?.image"
+                  v-lazy="el?.icon?.image"
+                  class="w-6 h-6 rounded-full mr-3"
+                />
+                <div class="text-base text-gray-500 dark:text-gray-300">
+                  {{ $t(el?.title) }}
+                </div>
+              </RouterLink>
+            </div>
+          </div>
+        </div>
+
+        <RouterLink
+          :to="item?.to"
+          v-if="item?.title && !item?.children?.length"
+          class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
+          <Icon
+            v-if="item?.icon?.icon"
+            :icon="item?.icon?.icon"
+            class="text-xl mr-2"
+            :class="{
+              'text-yellow-500': item?.title === 'Favorite',
+              'text-blue-500': item?.title !== 'Favorite',
+            }"
+          />
+          <img
+            v-if="item?.icon?.image"
+            v-lazy="item?.icon?.image"
+            class="w-6 h-6 rounded-full mr-3"
+          />
+          <div
+            class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200"
+          >
+            {{ item?.title }}
+          </div>
+          <div
+            v-if="item?.badgeContent"
+            class="mr-6 badge badge-sm badge-primary"
+          >
+            {{ item?.badgeContent }}
+          </div>
+        </RouterLink>
+        <div
+          v-if="item?.heading"
+          class="px-4 text-sm pt-4 text-gray-400 pb-2 uppercase"
+        >
+          {{ item?.heading }}
         </div>
       </div>
     </div>
diff --git a/src/style.css b/src/style.css
index 2f33f540..6fd2af3d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -15,3 +15,17 @@
     --bg-active: #242b40;
   }
 }
+
+.collapse-title,
+:where(.collapse > input[type='checkbox']) {
+  padding: 0;
+  padding-right: 0;
+  min-height: unset;
+}
+
+.collapse-open :where(.collapse-content),
+.collapse:focus:not(.collapse-close) :where(.collapse-content),
+.collapse:not(.collapse-close)
+  :where(input[type='checkbox']:checked ~ .collapse-content) {
+  padding-bottom: 0;
+}

From a5affa079a9ff337d675bae63bed15e8ac0b500f Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 12 May 2023 01:39:33 +0800
Subject: [PATCH 6/7] feat: sidebar style

---
 src/layouts/components/ChainProfile.vue  |  8 +++--
 src/layouts/components/DefaultLayout.vue | 46 ++++++++++++++++++------
 tailwind.config.js                       |  1 -
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/layouts/components/ChainProfile.vue b/src/layouts/components/ChainProfile.vue
index c28458c2..83ac687a 100644
--- a/src/layouts/components/ChainProfile.vue
+++ b/src/layouts/components/ChainProfile.vue
@@ -82,15 +82,17 @@ chainStore.$subscribe((m, s) => {
         </div>
       </div>
     </div>
-    <div>
+    <div class="flex-1 w-0">
       <div
-        class="capitalize text-base font-semibold text-gray-600 dark:text-gray-200"
+        class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200"
       >
         {{
           baseStore.latest.block?.header?.chain_id || chainStore.chainName || ''
         }}
       </div>
-      <div class="text-xs text-gray-500 dark:text-gray-400">
+      <div
+        class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden lg:block"
+      >
         {{ chainStore.connErr || chainStore.endpoint.address }}
       </div>
     </div>
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index f31f3c14..988b14b4 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
+import { ref } from 'vue';
 import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfig';
 
 // Components
@@ -30,15 +31,21 @@ blockchain.$subscribe((m, s) => {
     blockchain.initial();
   }
 });
+
+const sidebarShow = ref(false);
 </script>
 
 <template>
   <div class="">
-    <div class="w-64 fixed left-0 top-0 bottom-0 overflow-auto bg-base-100">
+    <!-- sidebar -->
+    <div
+      class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
+      :class="{ block: sidebarShow, 'hidden xl:block': !sidebarShow }"
+    >
       <div class="flex items-center pl-4 py-4 mb-1">
         <img class="w-10 h-10" src="../../assets/logo.svg" />
         <h1 class="flex-1 ml-3 text-2xl font-bold dark:text-white">Ping.pub</h1>
-        <div class="pr-4 cursor-pointer xl:hidden">
+        <div class="pr-4 cursor-pointer xl:hidden" @click="sidebarShow = false">
           <Icon icon="mdi-close" class="text-3xl" />
         </div>
       </div>
@@ -63,7 +70,7 @@ blockchain.$subscribe((m, s) => {
             />
             <img
               v-if="item?.icon?.image"
-              v-lazy="item?.icon?.image"
+              :src="item?.icon?.image"
               class="w-6 h-6 rounded-full mr-3"
             />
             <div
@@ -82,16 +89,28 @@ blockchain.$subscribe((m, s) => {
             <div class="menu bg-base-100 w-full">
               <RouterLink
                 v-for="(el, key) of item?.children"
+                @click="sidebarShow = false"
                 :key="key"
                 class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
                 :to="el?.to"
+                :class="{
+                  'bg-primary':
+                    $route.path === el?.to?.path && item?.title !== 'Favorite',
+                }"
               >
                 <img
                   v-if="el?.icon?.image"
-                  v-lazy="el?.icon?.image"
+                  :src="el?.icon?.image"
                   class="w-6 h-6 rounded-full mr-3"
                 />
-                <div class="text-base text-gray-500 dark:text-gray-300">
+                <div
+                  class="text-base text-gray-500 dark:text-gray-300"
+                  :class="{
+                    'text-white':
+                      $route.path === el?.to?.path &&
+                      item?.title !== 'Favorite',
+                  }"
+                >
                   {{ $t(el?.title) }}
                 </div>
               </RouterLink>
@@ -102,6 +121,7 @@ blockchain.$subscribe((m, s) => {
         <RouterLink
           :to="item?.to"
           v-if="item?.title && !item?.children?.length"
+          @click="sidebarShow = false"
           class="collapse-title px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
         >
           <Icon
@@ -115,7 +135,7 @@ blockchain.$subscribe((m, s) => {
           />
           <img
             v-if="item?.icon?.image"
-            v-lazy="item?.icon?.image"
+            :src="item?.icon?.image"
             class="w-6 h-6 rounded-full mr-3"
           />
           <div
@@ -138,15 +158,21 @@ blockchain.$subscribe((m, s) => {
         </div>
       </div>
     </div>
-    <div class="ml-64 px-5">
-      <div class="flex items-center py-3">
-        <div class="text-2xl pr-3 cursor-pointer xl:hidden">
+    <div class="xl:ml-64 px-5">
+      <!-- header -->
+      <div
+        class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 mt-4 shadow"
+      >
+        <div
+          class="text-2xl pr-3 cursor-pointer xl:hidden"
+          @click="sidebarShow = true"
+        >
           <Icon icon="mdi-menu" />
         </div>
 
         <UserProfile />
 
-        <div class="flex-1"></div>
+        <div class="flex-1 w-0"></div>
 
         <!-- <NavSearchBar />-->
         <NavBarNotifications class="hidden md:inline-block" />
diff --git a/tailwind.config.js b/tailwind.config.js
index 39b5c07f..9fe2fad4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,6 @@ module.exports = {
         yes: '#3fb68b',
         no: '#ff5353',
         info: '#00b2ff',
-        primary: '#666cff',
         main: 'var(--text-main)',
         secondary: 'var(--text-secondary)',
         active: 'var(--bg-active)',

From ef741848bfad2ac3534e995da16e7276c4fef6b9 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 12 May 2023 01:58:17 +0800
Subject: [PATCH 7/7] feat: logo

---
 src/layouts/components/DefaultLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 988b14b4..37410b50 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -44,7 +44,7 @@ const sidebarShow = ref(false);
     >
       <div class="flex items-center pl-4 py-4 mb-1">
         <img class="w-10 h-10" src="../../assets/logo.svg" />
-        <h1 class="flex-1 ml-3 text-2xl font-bold dark:text-white">Ping.pub</h1>
+        <h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">Ping.pub</h1>
         <div class="pr-4 cursor-pointer xl:hidden" @click="sidebarShow = false">
           <Icon icon="mdi-close" class="text-3xl" />
         </div>