From 1e1c3b21b8aaef4c0ca15021c4e12e6b2b8305f3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 8 Sep 2026 16:41:33 +0000
Subject: [PATCH] =?UTF-8?q?Agrupar=20el=20men=C3=BA=20principal=20y=20acer?=
 =?UTF-8?q?car=20el=20ribbon=20al=20mockup.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El menú queda en una sola fila con iconos, desplegables por módulo y
sin wrap; el ribbon se compacta como tarjeta de acciones.

Co-authored-by: alberto.martinez <alberto.martinez@mrdev.mx>
---
 web-panel/assets/css/app.css        |   6 +-
 web-panel/assets/css/desktop-v2.css | 187 +++++++++++++++++++++++++++-
 web-panel/components/AppRibbon.vue  |   2 +-
 web-panel/layouts/default.vue       |  84 ++++++++++---
 4 files changed, 256 insertions(+), 23 deletions(-)

diff --git a/web-panel/assets/css/app.css b/web-panel/assets/css/app.css
index b52c61f..ed1183e 100644
--- a/web-panel/assets/css/app.css
+++ b/web-panel/assets/css/app.css
@@ -27,6 +27,7 @@ html, body, #__nuxt {
   min-height: 44px;
   padding: 0 8px !important;
   flex-shrink: 0;
+  flex-wrap: nowrap;
 }
 .menubar-link {
   display: flex;
@@ -50,9 +51,8 @@ html, body, #__nuxt {
   box-shadow: inset 0 -2px 0 #1c4a7a;
 }
 .ribbon.p-toolbar {
-  border-radius: 0 !important;
-  border: none !important;
-  border-bottom: 1px solid #d5dde6 !important;
+  border-radius: 8px !important;
+  border: 1px solid #e1e6ed !important;
   background: #fff !important;
   padding: 4px 10px 6px !important;
   flex-shrink: 0;
diff --git a/web-panel/assets/css/desktop-v2.css b/web-panel/assets/css/desktop-v2.css
index a905613..44ee5e9 100644
--- a/web-panel/assets/css/desktop-v2.css
+++ b/web-panel/assets/css/desktop-v2.css
@@ -782,7 +782,7 @@ html, body, #__nuxt {
   padding-inline: 16px;
   font-size: 13px;
 }
-.menubar-link > i { display: none; }
+.menubar-link > i { display: inline-flex; }
 .menubar-link.is-active {
   box-shadow: inset 0 -3px 0 #2f6fe4;
 }
@@ -2236,3 +2236,188 @@ html.dark .p-dialog .p-dialog-header-icon {
 .cost-warn { background: #fff8e1 !important; color: #e65100 !important; }
 .cost-critical { background: #ffebee !important; color: #b42318 !important; }
 .cost-critical-text { color: #b42318; font-weight: 600; }
+
+/* Grouped menubar: single row, icons, card-style submenus. */
+.menubar.p-menubar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  min-height: 52px;
+  height: 52px;
+  overflow: visible;
+}
+.brand-lockup {
+  height: 52px;
+  min-width: 148px;
+  padding-right: 18px;
+}
+.menubar .p-menubar-start,
+.menubar .p-menubar-end {
+  flex: 0 0 auto;
+}
+.menubar .p-menubar-root-list {
+  display: flex;
+  flex-wrap: nowrap !important;
+  align-items: stretch;
+  min-width: 0;
+  flex: 1 1 auto;
+  gap: 2px;
+  margin: 0;
+  overflow: visible;
+}
+.menubar .p-menubar-item {
+  flex: 0 0 auto;
+}
+.menubar-link {
+  min-height: 52px;
+  height: 52px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding-inline: 11px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: #243044;
+}
+.menubar-link > i {
+  display: inline-flex !important;
+  font-size: 13px;
+  color: #4b6380;
+}
+.menubar-link .menubar-chevron {
+  margin-left: 1px;
+  font-size: 10px;
+  opacity: .7;
+}
+.menubar-link.is-active {
+  color: #1f5fd1;
+  box-shadow: inset 0 -3px 0 #2f6fe4;
+}
+.menubar-link.is-active > i,
+.menubar-link.is-active .menubar-chevron {
+  color: #2f6fe4;
+}
+.menubar .p-menubar-submenu {
+  min-width: 228px;
+  padding: 6px;
+  margin-top: 0;
+  border: 1px solid #e1e6ed;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 10px 28px rgba(23, 32, 51, .12);
+}
+.menubar .p-menubar-submenu .p-menubar-item-content {
+  border-radius: 6px;
+}
+.menubar .p-menubar-submenu .menubar-link {
+  width: 100%;
+  min-height: 38px;
+  height: 38px;
+  padding: 0 10px;
+  font-weight: 500;
+  border-radius: 6px;
+  box-shadow: none !important;
+}
+.menubar .p-menubar-submenu .menubar-link:hover {
+  background: #f4f7fb;
+}
+.menubar .p-menubar-submenu .menubar-link.is-active {
+  background: #eaf2ff;
+  color: #174fba;
+  box-shadow: none !important;
+}
+
+/* Ribbon as compact action card (mockup). */
+.ribbon.p-toolbar {
+  display: flex;
+  align-items: stretch;
+  min-height: 88px;
+  margin: 8px 8px 10px;
+  padding: 8px 12px 6px !important;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 1px solid var(--shell-border, #e1e6ed) !important;
+  border-radius: 8px !important;
+  background: #fff !important;
+  box-shadow: var(--shell-shadow, 0 2px 9px rgba(23, 32, 51, .055));
+}
+.ribbon .p-toolbar-start {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 0;
+  min-width: 0;
+}
+.ribbon-cluster {
+  flex: 0 0 auto;
+  align-items: stretch;
+}
+.ribbon-group {
+  gap: 4px;
+}
+.ribbon-group-items {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+}
+.ribbon-group-label {
+  text-transform: none;
+  letter-spacing: .02em;
+  font-size: 10px;
+  color: #748095;
+}
+.ribbon .ribbon-action {
+  min-width: 64px;
+  min-height: 64px;
+  padding: 8px 10px 6px;
+  border-radius: 6px;
+}
+.ribbon .ribbon-action .p-button-icon {
+  width: 22px;
+  height: 22px;
+  margin-bottom: 4px;
+  font-size: 20px !important;
+  line-height: 22px;
+  color: #4b6380;
+}
+.ribbon .ribbon-action .p-button-label {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.ribbon .ribbon-action--alta .p-button-icon {
+  color: #2f6fe4;
+}
+.ribbon .ribbon-action:not(:disabled):hover {
+  background: #f4f7fb;
+}
+.ribbon .p-divider-vertical {
+  min-height: 64px;
+  margin-inline: 8px;
+}
+
+html.dark .menubar .p-menubar-submenu {
+  background: #111b2e !important;
+  border-color: #243044 !important;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
+}
+html.dark .menubar .p-menubar-submenu .menubar-link {
+  color: #f1f5f9 !important;
+}
+html.dark .menubar .p-menubar-submenu .menubar-link:hover {
+  background: rgba(47, 111, 228, 0.14) !important;
+}
+html.dark .menubar .p-menubar-submenu .menubar-link.is-active {
+  background: rgba(47, 111, 228, 0.22) !important;
+  color: #93c5fd !important;
+}
+html.dark .menubar-link > i,
+html.dark .menubar-link .menubar-chevron {
+  color: #94a3b8;
+}
+html.dark .menubar-link.is-active > i,
+html.dark .menubar-link.is-active .menubar-chevron {
+  color: #93c5fd;
+}
diff --git a/web-panel/components/AppRibbon.vue b/web-panel/components/AppRibbon.vue
index a4bc593..44205a0 100644
--- a/web-panel/components/AppRibbon.vue
+++ b/web-panel/components/AppRibbon.vue
@@ -1,5 +1,5 @@
 <template>
-  <Toolbar class="ribbon">
+  <Toolbar v-if="ribbon.length" class="ribbon">
     <template #start>
       <div v-for="(group, i) in ribbon" :key="group.key" class="ribbon-cluster">
         <Divider v-if="i > 0" layout="vertical" />
diff --git a/web-panel/layouts/default.vue b/web-panel/layouts/default.vue
index 224b3c1..0caf896 100644
--- a/web-panel/layouts/default.vue
+++ b/web-panel/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="shell">
-    <Menubar class="menubar" :model="menu">
+    <Menubar class="menubar" :model="menu" breakpoint="1100px">
       <template #start>
         <button type="button" class="brand-lockup" aria-label="Ir al inicio" @click="navigateTo('/')">
           <span class="brand-mark" aria-hidden="true">
@@ -9,10 +9,19 @@
           <span class="brand-word">{{ brand }}</span>
         </button>
       </template>
-      <template #item="{ item, props }">
-        <a v-bind="props.action" class="menubar-link" :class="{ 'is-active': isActive(String(item.to || '')) }">
-          <i v-if="item.icon" :class="item.icon" />
+      <template #item="{ item, props, hasSubmenu, root }">
+        <a
+          v-bind="props.action"
+          class="menubar-link"
+          :class="{
+            'is-active': itemIsActive(item),
+            'is-root': root !== false,
+            'has-submenu': Boolean(hasSubmenu || item.items?.length),
+          }"
+        >
+          <i v-if="item.icon" :class="item.icon" aria-hidden="true" />
           <span>{{ item.label }}</span>
+          <i v-if="hasSubmenu || item.items?.length" class="pi pi-angle-down menubar-chevron" aria-hidden="true" />
         </a>
       </template>
       <template #end>
@@ -140,20 +149,53 @@ const profileItems = computed(() => [
 
 const brand = computed(() => "PANELS");
 
-const menu = [
-  { label: "Inicio", icon: "pi pi-home", to: "/", command: () => navigateTo("/") },
-  { label: "Proyectos", icon: "pi pi-building", to: "/proyectos", command: () => navigateTo("/proyectos") },
-  { label: "Presupuesto", icon: "pi pi-calculator", to: "/presupuesto", command: () => navigateTo("/presupuesto") },
-  { label: "Programa de obra", icon: "pi pi-calendar", to: "/programa-obra", command: () => navigateTo("/programa-obra") },
-  { label: "Control costos", icon: "pi pi-chart-bar", to: "/control-presupuesto", command: () => navigateTo("/control-presupuesto") },
-  { label: "Gastos", icon: "pi pi-money-bill", to: "/gastos", command: () => navigateTo("/gastos") },
-  { label: "Almacén", icon: "pi pi-box", to: "/almacen", command: () => navigateTo("/almacen") },
-  { label: "Padrón", icon: "pi pi-users", to: "/padron", command: () => navigateTo("/padron") },
-  { label: "Kanban", icon: "pi pi-th-large", to: "/kanban", command: () => navigateTo("/kanban") },
-  { label: "Gafetes", icon: "pi pi-id-card", to: "/gafetes", command: () => navigateTo("/gafetes") },
-  { label: "Nómina", icon: "pi pi-wallet", to: "/nomina", command: () => navigateTo("/nomina") },
-  { label: "Usuarios", icon: "pi pi-shield", to: "/usuarios", command: () => navigateTo("/usuarios") },
-  { label: "Ayuda", icon: "pi pi-question-circle", command: showHelp },
+type NavItem = {
+  label: string;
+  icon?: string;
+  to?: string;
+  command?: () => void;
+  items?: NavItem[];
+};
+
+function nav(label: string, icon: string, to: string): NavItem {
+  return { label, icon, to, command: () => navigateTo(to) };
+}
+
+const menu: NavItem[] = [
+  nav("Inicio", "pi pi-home", "/"),
+  {
+    label: "Obra",
+    icon: "pi pi-building",
+    items: [
+      nav("Proyectos", "pi pi-building", "/proyectos"),
+      nav("Presupuesto", "pi pi-calculator", "/presupuesto"),
+      nav("Programa de obra", "pi pi-calendar", "/programa-obra"),
+      nav("Control costos", "pi pi-chart-bar", "/control-presupuesto"),
+    ],
+  },
+  {
+    label: "Operación",
+    icon: "pi pi-briefcase",
+    items: [
+      nav("Gastos", "pi pi-money-bill", "/gastos"),
+      nav("Almacén", "pi pi-box", "/almacen"),
+      nav("Kanban", "pi pi-th-large", "/kanban"),
+    ],
+  },
+  {
+    label: "Personal",
+    icon: "pi pi-users",
+    items: [
+      nav("Padrón", "pi pi-users", "/padron"),
+      nav("Gafetes", "pi pi-id-card", "/gafetes"),
+      nav("Nómina", "pi pi-wallet", "/nomina"),
+    ],
+  },
+  {
+    label: "Administración",
+    icon: "pi pi-shield",
+    items: [nav("Usuarios", "pi pi-shield", "/usuarios")],
+  },
 ];
 
 function isActive(to: string) {
@@ -162,6 +204,12 @@ function isActive(to: string) {
   return route.path === to || route.path.startsWith(`${to}/`);
 }
 
+function itemIsActive(item: NavItem | undefined): boolean {
+  if (!item) return false;
+  if (item.to && isActive(item.to)) return true;
+  return Boolean(item.items?.some((child) => itemIsActive(child)));
+}
+
 function goSearch() {
   navigateTo("/padron");
 }