new look

Author: mariojgt

Publish/Resource/js/backend/Layout/App.vue

@@ -6,22 +6,22 @@
       <div v-if="!item.children || item.children.length === 0">
         <Link
           :href="buildLinkClass(item.route)"
-          class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200"
+          class="btn btn-ghost justify-start h-auto py-3 px-3 text-sm font-medium normal-case"
           :class="isActive(item.route)
-            ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
-            : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100'"
+            ? 'btn-primary text-primary-content shadow-lg'
+            : 'text-base-content hover:bg-base-200'"
         >
           <div
             class="w-6 h-6 mr-3 flex items-center justify-center"
             v-html="item.icon"
           ></div>
-          <span class="flex-1">{{ item.menu_label }}</span>
+          <span class="flex-1 text-left">{{ item.menu_label }}</span>
           <div
             v-if="item.badge"
-            class="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full"
+            class="badge badge-sm ml-2"
             :class="isActive(item.route)
-              ? 'bg-white/20 text-white'
-              : 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'"
+              ? 'badge-neutral badge-outline'
+              : 'badge-primary'"
           >
             {{ item.badge }}
           </div>
@@ -32,10 +32,10 @@
       <div v-else>
         <button
           @click="toggleSubmenu(index)"
-          class="w-full group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200"
+          class="btn btn-ghost w-full justify-start h-auto py-3 px-3 text-sm font-medium normal-case"
           :class="isSubmenuOpen(index)
-            ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100'
-            : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100'"
+            ? 'bg-base-200 text-base-content'
+            : 'text-base-content hover:bg-base-200'"
         >
           <div
             class="w-6 h-6 mr-3 flex items-center justify-center"
@@ -56,55 +56,61 @@
         <!-- Submenu -->
         <div
           v-if="isSubmenuOpen(index)"
-          class="mt-1 ml-6 space-y-1 border-l-2 border-slate-200 dark:border-slate-700 pl-4"
+          class="collapse collapse-open"
         >
-          <Link
-            v-for="(child, childIndex) in item.children"
-            :key="childIndex"
-            :href="buildLinkClass(child.route)"
-            class="group flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200"
-            :class="isActive(child.route)
-              ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
-              : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100'"
-          >
-            <div
-              class="w-5 h-5 mr-3 flex items-center justify-center"
-              v-html="child.icon"
-            ></div>
-            <span class="flex-1">{{ child.menu_label }}</span>
-            <div
-              v-if="child.badge"
-              class="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full"
-              :class="isActive(child.route)
-                ? 'bg-white/20 text-white'
-                : 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'"
-            >
-              {{ child.badge }}
+          <div class="collapse-content pt-1 pb-0 pl-6 pr-0">
+            <div class="border-l-2 border-base-300 pl-4 space-y-1">
+              <Link
+                v-for="(child, childIndex) in item.children"
+                :key="childIndex"
+                :href="buildLinkClass(child.route)"
+                class="btn btn-ghost btn-sm justify-start h-auto py-2 px-3 text-sm font-medium normal-case w-full"
+                :class="isActive(child.route)
+                  ? 'btn-primary text-primary-content shadow-lg'
+                  : 'text-base-content/80 hover:bg-base-200 hover:text-base-content'"
+              >
+                <div
+                  class="w-5 h-5 mr-3 flex items-center justify-center"
+                  v-html="child.icon"
+                ></div>
+                <span class="flex-1 text-left">{{ child.menu_label }}</span>
+                <div
+                  v-if="child.badge"
+                  class="badge badge-xs ml-2"
+                  :class="isActive(child.route)
+                    ? 'badge-neutral badge-outline'
+                    : 'badge-primary'"
+                >
+                  {{ child.badge }}
+                </div>
+              </Link>
             </div>
-          </Link>
+          </div>
         </div>
       </div>
     </div>
 
     <!-- Quick Actions Section -->
-    <div class="pt-6 mt-6 border-t border-slate-200 dark:border-slate-700">
-      <h3 class="px-3 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">
+    <div class="divider divider-start">
+      <span class="text-xs font-semibold text-base-content/60 uppercase tracking-wider">
         Quick Actions
-      </h3>
-      <div class="space-y-2">
-        <button class="w-full group flex items-center px-3 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100 rounded-lg transition-all duration-200">
-          <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
-          </svg>
-          Create New
-        </button>
-        <button class="w-full group flex items-center px-3 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100 rounded-lg transition-all duration-200">
-          <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-          </svg>
-          Analytics
-        </button>
-      </div>
+      </span>
+    </div>
+
+    <div class="space-y-2">
+      <button class="btn btn-ghost justify-start h-auto py-2 px-3 text-sm font-medium normal-case w-full text-base-content/80 hover:bg-base-200 hover:text-base-content">
+        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+        </svg>
+        <span class="flex-1 text-left">Create New</span>
+      </button>
+
+      <button class="btn btn-ghost justify-start h-auto py-2 px-3 text-sm font-medium normal-case w-full text-base-content/80 hover:bg-base-200 hover:text-base-content">
+        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+        </svg>
+        <span class="flex-1 text-left">Analytics</span>
+      </button>
     </div>
   </nav>
 </template>

Publish/Resource/js/backend/Layout/components/DesktopNavigation.vue

@@ -2,29 +2,29 @@
 <template>
   <div class="flex flex-col h-full">
     <!-- Navigation Menu -->
-    <nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
+    <nav class="flex-1 p-4 space-y-2 overflow-y-auto">
       <div v-for="(item, index) in menuItems" :key="index">
         <!-- Single Menu Item -->
         <div v-if="!item.children || item.children.length === 0">
           <Link
             :href="buildLinkClass(item.route)"
             @click="$emit('close')"
-            class="group flex items-center px-4 py-3 text-base font-medium rounded-xl transition-all duration-200"
+            class="btn btn-ghost justify-start h-auto py-3 px-4 text-base font-medium normal-case w-full"
             :class="isActive(item.route)
-              ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
-              : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'"
+              ? 'btn-primary text-primary-content shadow-lg'
+              : 'text-base-content hover:bg-base-200'"
           >
             <div
               class="w-6 h-6 mr-4 flex items-center justify-center"
               v-html="item.icon"
             ></div>
-            <span class="flex-1">{{ item.menu_label }}</span>
+            <span class="flex-1 text-left">{{ item.menu_label }}</span>
             <div
               v-if="item.badge"
-              class="ml-2 px-2 py-1 text-xs font-semibold rounded-full"
+              class="badge badge-sm ml-2"
               :class="isActive(item.route)
-                ? 'bg-white/20 text-white'
-                : 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'"
+                ? 'badge-neutral badge-outline'
+                : 'badge-primary'"
             >
               {{ item.badge }}
             </div>
@@ -35,10 +35,10 @@
         <div v-else>
           <button
             @click="toggleSubmenu(index)"
-            class="w-full group flex items-center px-4 py-3 text-base font-medium rounded-xl transition-all duration-200"
+            class="btn btn-ghost w-full justify-start h-auto py-3 px-4 text-base font-medium normal-case"
             :class="isSubmenuOpen(index)
-              ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100'
-              : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'"
+              ? 'bg-base-200 text-base-content'
+              : 'text-base-content hover:bg-base-200'"
           >
             <div
               class="w-6 h-6 mr-4 flex items-center justify-center"
@@ -59,44 +59,49 @@
           <!-- Mobile Submenu -->
           <div
             v-if="isSubmenuOpen(index)"
-            class="mt-2 ml-8 space-y-1"
+            class="collapse collapse-open"
           >
-            <Link
-              v-for="(child, childIndex) in item.children"
-              :key="childIndex"
-              :href="buildLinkClass(child.route)"
-              @click="$emit('close')"
-              class="group flex items-center px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200"
-              :class="isActive(child.route)
-                ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
-                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800'"
-            >
-              <div
-                class="w-5 h-5 mr-3 flex items-center justify-center"
-                v-html="child.icon"
-              ></div>
-              <span class="flex-1">{{ child.menu_label }}</span>
-            </Link>
+            <div class="collapse-content pt-2 pb-0 pl-8 pr-0">
+              <div class="space-y-1">
+                <Link
+                  v-for="(child, childIndex) in item.children"
+                  :key="childIndex"
+                  :href="buildLinkClass(child.route)"
+                  @click="$emit('close')"
+                  class="btn btn-ghost btn-sm justify-start h-auto py-2.5 px-4 text-sm font-medium normal-case w-full"
+                  :class="isActive(child.route)
+                    ? 'btn-primary text-primary-content shadow-lg'
+                    : 'text-base-content/80 hover:bg-base-200'"
+                >
+                  <div
+                    class="w-5 h-5 mr-3 flex items-center justify-center"
+                    v-html="child.icon"
+                  ></div>
+                  <span class="flex-1 text-left">{{ child.menu_label }}</span>
+                </Link>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </nav>
 
     <!-- Mobile Footer Actions -->
-    <div class="border-t border-slate-200 dark:border-slate-700 p-4">
+    <div class="border-t border-base-300 p-4">
       <div class="space-y-2">
-        <button class="w-full flex items-center px-4 py-3 text-sm font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-all duration-200">
+        <button class="btn btn-ghost justify-start h-auto py-3 px-4 text-sm font-medium normal-case w-full text-base-content/80 hover:bg-base-200 hover:text-base-content">
           <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
           </svg>
-          Settings
+          <span class="flex-1 text-left">Settings</span>
         </button>
-        <button class="w-full flex items-center px-4 py-3 text-sm font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-all duration-200">
+
+        <button class="btn btn-ghost justify-start h-auto py-3 px-4 text-sm font-medium normal-case w-full text-base-content/80 hover:bg-base-200 hover:text-base-content">
           <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
           </svg>
-          Help & Support
+          <span class="flex-1 text-left">Help & Support</span>
         </button>
       </div>
     </div>

Publish/Resource/js/backend/Layout/components/MobileNavigation.vue

@@ -1,40 +1,37 @@
 <!-- ModernBreadcrumb.vue -->
 <template>
-  <div class="flex items-center space-x-2 text-sm" v-if="breadcrumbs && breadcrumbs.length > 0">
-    <!-- Home Link -->
-    <a
-      :href="getHomeUrl()"
-      class="flex items-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-200"
-    >
-      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
-      </svg>
-    </a>
-
-    <!-- Breadcrumb Items -->
-    <template v-for="(item, index) in breadcrumbs" :key="index">
-      <!-- Separator -->
-      <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-      </svg>
+  <div class="breadcrumbs text-sm" v-if="breadcrumbs && breadcrumbs.length > 0">
+    <ul>
+      <!-- Home Link -->
+      <li>
+        <a
+          :href="getHomeUrl()"
+          class="link link-hover text-base-content/60 hover:text-base-content flex items-center gap-2"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+          </svg>
+          <span class="hidden sm:inline">Home</span>
+        </a>
+      </li>
 
-      <!-- Breadcrumb Link/Text -->
-      <div class="flex items-center">
+      <!-- Breadcrumb Items -->
+      <li v-for="(item, index) in breadcrumbs" :key="index">
         <a
           v-if="item.url && index < breadcrumbs.length - 1"
           :href="item.url"
-          class="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-200 font-medium"
+          class="link link-hover text-base-content/60 hover:text-base-content font-medium"
         >
           {{ item.label }}
         </a>
         <span
           v-else
-          class="text-slate-900 dark:text-slate-100 font-semibold"
+          class="text-base-content font-semibold"
         >
           {{ item.label }}
         </span>
-      </div>
-    </template>
+      </li>
+    </ul>
   </div>
 </template>