improve layout

src/layouts/components/DefaultLayout.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 // Components
 import newFooter from '@/layouts/components/NavFooter.vue';
@@ -9,16 +9,18 @@ import NavbarSearch from '@/layouts/components/NavbarSearch.vue';
 import ChainProfile from '@/layouts/components/ChainProfile.vue';
 
 import { useDashboard } from '@/stores/useDashboard';
-import { useBlockchain } from '@/stores';
+import { useBaseStore, useBlockchain } from '@/stores';
 
 import NavBarI18n from './NavBarI18n.vue';
 import NavBarWallet from './NavBarWallet.vue';
 import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '../types';
+import dayjs from 'dayjs';
 
 const dashboard = useDashboard();
 dashboard.initial();
 const blockchain = useBlockchain();
 blockchain.randomSetupEndpoint();
+const baseStore = useBaseStore();
 
 const current = ref(''); // the current chain
 const temp = ref('')
@@ -56,6 +58,17 @@ function selected(route: any, nav: NavLink) {
   const b = route.path === nav.to?.path || route.path.startsWith(nav.to?.path) && nav.title.indexOf('dashboard') === -1
   return b
 }
+const blocktime = computed(() => {
+  return dayjs(baseStore.latest?.block?.header?.time)
+});
+
+const behind = computed(() => {
+  const current = dayjs().subtract(10, 'minute')
+  return blocktime.value.isBefore(current)
+});
+
+dayjs()
+
 </script>
 
 <template>
@@ -89,12 +102,13 @@ function selected(route: any, nav: NavLink) {
           :tabindex="index"
           class="collapse"
           :class="{
-            'collapse-arrow': item?.children?.length > 0,
+            'collapse-arrow':index > 0 && item?.children?.length > 0,
             'collapse-open': index === 0 && sidebarOpen,
             'collapse-close': index === 0 && !sidebarOpen,
           }"
         >
           <input
+            v-if="index > 0"
             type="checkbox"
             class="cursor-pointer !h-10 block"
             @click="changeOpen(index)"
@@ -211,7 +225,20 @@ function selected(route: any, nav: NavLink) {
         </div>
       </div>
       <div class="px-2">
-        <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
+          <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
+            Tools
+          </div>
+          <RouterLink to="/wallet/suggest"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          >
+            <Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
+            <div
+              class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200"
+            >
+              Wallet Helper
+            </div>
+          </RouterLink>
+          <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
           {{ $t('module.sponsors') }}
         </div>
         <a
@@ -259,21 +286,6 @@ function selected(route: any, nav: NavLink) {
             Becole
           </div>
         </a>
-
-          <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
-            Tools
-          </div>
-          <RouterLink to="/wallet/suggest"
-          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
-          >
-            <Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
-            <div
-              class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200"
-            >
-              Wallet Helper
-            </div>
-          </RouterLink>
-
         <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">{{ $t('module.links') }}</div>
         <a
           href="https://twitter.com/ping_pub"
@@ -339,6 +351,16 @@ function selected(route: any, nav: NavLink) {
 
       <!-- 👉 Pages -->
       <div style="min-height: calc(100vh - 180px);">
+          <div v-if="behind" class="alert alert-error mb-4">
+              <div class="flex gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                      class="stroke-current flex-shrink-0 w-6 h-6">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  </svg>
+                  <span>{{ $t('pages.out_of_sync') }} {{ blocktime.format() }} ({{ blocktime.fromNow() }})</span>
+              </div>
+          </div>
         <RouterView v-slot="{ Component }">
           <Transition mode="out-in">
             <Component :is="Component" />

src/plugins/i18n/locales/en.json

@@ -31,6 +31,7 @@
     "description": "Cosmos Ecosystem Blockchains 🚀",
     "search_placeholder": "Search Chain",
     "description_all": "We couldn't find the page you are looking for.",
+    "out_of_sync": "The latest block was produced at ",
     "btn_index": "Back to Home"
   },
   "account": {