Refactor: Revamp breadcrumbs with transition effects and improved styling for be…

…tter usability and aesthetics.

Refactor: Revamp breadcrumbs with transition effects and improved styling for be…
…tter usability and aesthetics.
shaofan
1 parent 1ec56380
Showing 1 changed file with 44 additions and 31 deletions
src/layouts/MainLayout.vue
@@ -38,22 +38,21 @@
             <menu-unfold-outlined />
           </button>
           <div class="topbar-header-info">
-            <a-breadcrumb class="custom-breadcrumb" separator="/">
-              <a-breadcrumb-item key="home">
-                <router-link :to="auth.fallbackHomePath">
-                  <home-outlined />
-                </router-link>
-              </a-breadcrumb-item>
-              <a-breadcrumb-item v-for="bc in breadcrumbs" :key="bc.code || bc.path || bc.name">
-                <router-link v-if="bc.path && bc.path !== route.path" :to="bc.path">
-                  {{ bc.name }}
-                </router-link>
-                <span v-else :class="bc.path === route.path ? 'bc-last' : 'bc-parent'">
-                  {{ bc.name }}
-                </span>
-              </a-breadcrumb-item>
-            </a-breadcrumb>
-            <h1>{{ currentTitle }}</h1>
+            <transition name="breadcrumb-fade" mode="out-in">
+              <a-breadcrumb :key="route.path" class="custom-breadcrumb">
+                <template #separator>
+                  <span class="bc-separator"><right-outlined /></span>
+                </template>
+                <a-breadcrumb-item v-for="(bc, idx) in breadcrumbs" :key="idx">
+                  <router-link v-if="bc.path && bc.path !== route.path" :to="bc.path">
+                    <span class="bc-parent">{{ bc.name }}</span>
+                  </router-link>
+                  <span v-else :class="idx === breadcrumbs.length - 1 ? 'bc-last' : 'bc-parent'">
+                    {{ bc.name }}
+                  </span>
+                </a-breadcrumb-item>
+              </a-breadcrumb>
+            </transition>
           </div>
         </div>
         <div class="topbar-actions">
@@ -151,6 +150,7 @@ import {
   HomeOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
+  RightOutlined,
 } from '@ant-design/icons-vue'
 const router = useRouter()
@@ -322,7 +322,6 @@ function handleLogout() {
 .brand-copy strong,
 .profile-copy strong,
-.topbar-header-info h1,
 .drawer-brand strong {
   font-family: 'Outfit', sans-serif;
   color: var(--text-dark);
@@ -418,12 +417,6 @@ function handleLogout() {
   gap: 4px;
 }
-.topbar-header-info h1 {
-  margin: 0;
-  font-size: 22px;
-  line-height: 1.3;
-}
-
 :deep(.custom-breadcrumb) {
   display: flex;
   align-items: center;
@@ -435,13 +428,37 @@ function handleLogout() {
   align-items: center;
 }
-.bc-parent,
-.bc-last {
-  font-size: 13px;
+.bc-separator {
+  font-size: 11px;
+  opacity: 0.6;
+  color: var(--text-soft);
+  margin: 0 4px;
+}
+
+.bc-parent {
+  color: var(--text-soft) !important;
+  font-size: 14px;
 }
 .bc-last {
-  color: var(--text-dark);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-main) !important;
+  letter-spacing: 0.5px;
+}
+
+/* Breadcrumb transition */
+.breadcrumb-fade-enter-active,
+.breadcrumb-fade-leave-active {
+  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.breadcrumb-fade-enter-from {
+  opacity: 0;
+  transform: translateX(10px);
+}
+.breadcrumb-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
 }
 .topbar-actions,
@@ -592,9 +609,5 @@ function handleLogout() {
   .soft-sider.collapsed {
     width: auto;
   }
-
-  .topbar-header-info h1 {
-    font-size: 20px;
-  }
 }
 </style>