feat: DefaultLayout && Chain Profile

src/layouts/components/ChainProfile.vue

@@ -11,62 +11,88 @@ chainStore.$subscribe((m, s) => {
 </script>
 
 <template>
-  <VListItem class="m-0 p-0">
+  <div class="flex items-center">
-    <template #prepend>
+    <div class="dropdown">
-      <VBadge
+      <div tabindex="0" class="p-1 relative mr-3 cursor-pointer">
-        dot
+        <img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
-        location="bottom right"
+        <div
-        offset-x="3"
+          class="w-2 h-2 rounded-full bg-yes absolute right-0 bottom-0"
-        offset-y="3"
+        ></div>
-        bordered
+      </div>
-        color="success"
+      <div
-        class="mr-2"
+        class="dropdown-content menu shadow bg-base-100 rounded-box max-h-[300px] overflow-auto"
       >
-        <VAvatar class="cursor-pointer" color="primary" variant="tonal">
+        <div>
-          <VImg :src="chainStore.logo" />
+          <!-- rest -->
-
+          <div
-          <!-- SECTION Menu -->
+            class="px-4 py-2 text-sm text-gray-400"
-          <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
+            Rest Endpoint
-                  >{{ i.provider }}
+          </div>
-                  <VIcon
+          <div tabindex="0">
-                    v-if="i.address === chainStore.endpoint?.address"
+            <div
-                    icon="mdi-check"
+              v-for="(item, index) in chainStore.current?.endpoints?.rest"
-                    color="success"
+              @click="chainStore.setRestEndpoint(item)"
-                /></VListItemTitle>
+              class="px-4 py-2 hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
-                <VListItemSubtitle>{{ i.address }}</VListItemSubtitle>
+              :key="index"
-              </VListItem>
+            >
+              <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>
 
-              <VListSubheader
+                  <span
-                v-if="chainStore.current?.endpoints?.grpc"
+                    v-if="item.address === chainStore.endpoint?.address"
-                title="gRPC Endpoint"
+                    class="bg-yes inline-block h-2 w-2 rounded-full"
                   />
-              <VListItem v-for="i in chainStore.current?.endpoints?.grpc" link>
+                </div>
-                <VListItemTitle>{{ i.provider }}</VListItemTitle>
+                <div class="text-gray-400 text-xs whitespace-nowrap">
-                <VListItemSubtitle>{{ i.address }}</VListItemSubtitle>
+                  {{ item.address }}
-              </VListItem>
+                </div>
-            </VList>
+              </div>
-          </VMenu>
+            </div>
-          <!-- !SECTION -->
+          </div>
-        </VAvatar>
+
-      </VBadge>
+          <!-- grpc -->
-    </template>
+          <div
-    <VListItemTitle>{{
+            class="px-4 py-2 text-sm text-gray-400"
-      baseStore.latest.block?.header?.chain_id || chainStore.chainName || ''
+            v-if="chainStore.current?.endpoints?.grpc"
-    }}</VListItemTitle>
-    <VListItemSubtitle>
-      {{ chainStore.connErr || chainStore.endpoint.address }}</VListItemSubtitle
           >
-  </VListItem>
+            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>

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 }">