From 38f46cef8485bea44ff9bbe06401db1953291f15 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Tue, 23 Sep 2025 11:34:48 -0600
Subject: [PATCH] ADD: Crear componente Dropdown para el sidebar

---
 src/components/Holos/Button/ButtonRh.vue      |  27 ++++
 .../Holos/Skeleton/Sidebar/Drop.vue           |  78 +++++++++++
 .../Holos/Skeleton/Sidebar/Section.vue        |  22 +--
 src/layouts/AdminLayout.vue                   | 127 +++++++++---------
 src/pages/Academic/Index.vue                  |   9 +-
 src/pages/Additional/Index.vue                |   6 +-
 src/pages/Employees/Index.vue                 |  12 +-
 src/pages/Payroll/Index.vue                   |   6 +-
 src/pages/Security/Index.vue                  |   6 +-
 src/router/Index.js                           |  76 ++---------
 10 files changed, 206 insertions(+), 163 deletions(-)
 create mode 100644 src/components/Holos/Button/ButtonRh.vue
 create mode 100644 src/components/Holos/Skeleton/Sidebar/Drop.vue

diff --git a/src/components/Holos/Button/ButtonRh.vue b/src/components/Holos/Button/ButtonRh.vue
new file mode 100644
index 0000000..fb5879b
--- /dev/null
+++ b/src/components/Holos/Button/ButtonRh.vue
@@ -0,0 +1,27 @@
+<script setup>
+import GoogleIcon from "@Shared/GoogleIcon.vue";
+defineProps({
+  type: {
+    default: "button",
+    type: String,
+  },
+  icon: {
+    default: "add",
+    type: String,
+  },
+  text: {
+    default: "",
+    type: String,
+  }
+});
+</script>
+
+<template>
+  <button
+    :type="type"
+    class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md"
+  >
+  <GoogleIcon :name="icon" />
+  <span>{{ text }}</span>
+  </button>
+</template>
diff --git a/src/components/Holos/Skeleton/Sidebar/Drop.vue b/src/components/Holos/Skeleton/Sidebar/Drop.vue
new file mode 100644
index 0000000..f69bf4f
--- /dev/null
+++ b/src/components/Holos/Skeleton/Sidebar/Drop.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { ref, computed } from "vue";
+import { RouterLink, useRoute } from "vue-router";
+
+import useLeftSidebar from "@Stores/LeftSidebar";
+import GoogleIcon from "@Shared/GoogleIcon.vue";
+
+/** Definidores */
+const leftSidebar = useLeftSidebar();
+const vroute = useRoute();
+
+/** Propiedades */
+const props = defineProps({
+  name: String,
+  icon: String,
+  to: String,
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isCollapsed = ref(props.collapsed);
+
+const closeSidebar = () => {
+  if (TwScreen.isDevice("phone") || TwScreen.isDevice("tablet")) {
+    leftSidebar.close();
+  }
+};
+
+const isActive = computed(() => props.active || props.to === vroute.name);
+
+const classes = computed(() => {
+  return isActive.value
+    ? "flex items-center px-4 py-2 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent"
+    : "flex items-center px-4 py-2 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200";
+});
+</script>
+
+<template>
+  <ul>
+    <li class="hidden md:block">
+      <div class="flex items-center px-2 py-2 rounded">
+        <button
+          class="dropdown-toggle w-full"
+          @click.stop="isCollapsed = !isCollapsed"
+        >
+          <RouterLink
+            :to="$view({ name: props.to })"
+            :class="classes"
+            class="flex items-center justify-between flex-1"
+            @click="closeSidebar"
+          >
+            <div class="flex items-center">
+              <GoogleIcon v-if="icon" :name="icon" class="text-xl mr-2" />
+              <span class="text-sm font-medium">{{ name }}</span>
+            </div>
+
+            <GoogleIcon
+              :name="isCollapsed ? 'expand_more' : 'expand_less'"
+              class="text-gray-400 text-lg"
+            />
+          </RouterLink>
+        </button>
+      </div>
+    </li>
+    <div
+      class="transition-all duration-300 ease-in-out overflow-hidden"
+      :class="{ 'max-h-0': isCollapsed, 'max-h-96': !isCollapsed }"
+    >
+      <slot />
+    </div>
+  </ul>
+</template>
diff --git a/src/components/Holos/Skeleton/Sidebar/Section.vue b/src/components/Holos/Skeleton/Sidebar/Section.vue
index 7a6cc53..304c82a 100644
--- a/src/components/Holos/Skeleton/Sidebar/Section.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Section.vue
@@ -1,19 +1,19 @@
 <script setup>
 /** Propiedades */
 const props = defineProps({
-    name: String
+  name: String,
 });
 </script>
 
 <template>
-    <ul v-if="$slots['default']">
-        <li class="px-5 hidden md:block">
-            <div class="flex flex-row items-center h-8">
-                <div class="text-sm font-light tracking-wide text-gray-400 uppercase">
-                    {{name}}
-                </div>
-            </div>
-        </li>
-        <slot />
-    </ul>
+  <ul v-if="$slots['default']">
+    <li class="px-5 hidden md:block">
+      <div class="flex flex-row items-center h-8 cursor-pointer">
+        <div class="text-sm font-light tracking-wide text-gray-400 uppercase">
+          {{ name }}
+        </div>
+      </div>
+    </li>
+    <slot />
+  </ul>
 </template>
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 499d2ee..ff2c059 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -6,6 +6,7 @@ import { hasPermission } from '@Plugins/RolePermission';
 import Layout  from '@Holos/Layout/App.vue';
 import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
 import Section from '@Holos/Skeleton/Sidebar/Section.vue';
+import DropDown from '@Holos/Skeleton/Sidebar/Drop.vue'
 
 /** Definidores */
 const loader = useLoader()
@@ -30,79 +31,85 @@ onMounted(() => {
         <template #leftSidebar>
             <Section name="Principal">
                 <Link
-                    icon="grid_view"
-                    name="Dashboard" 
-                    to="admin.dashboard.index"
+                icon="grid_view"
+                name="Dashboard" 
+                to="admin.dashboard.index"
                 />
-                <Link
+                <DropDown 
                     icon="people"
                     name="Empleados" 
                     to="admin.employees.index"
-                />
-                <Link
-                    icon="school"
-                    name="Historial Académico" 
-                    to="admin.academic.index"
-                />
-                <Link
-                    icon="security"
-                    name="Seguridad y Salud" 
-                    to="admin.security.index"
-                />
-                <Link
-                    icon="payments"
-                    name="Nómina" 
-                    to="admin.payroll.index"
-                />
-                <Link
-                    icon="info"
-                    name="Información Adicional" 
-                    to="admin.additional.index"
-                />
+                    :collapsed="true"
+                >
+                        <Link
+                            icon="school"
+                            name="Historial Académico" 
+                            to="admin.academic.index"
+                        />
+                        <Link
+                            icon="security"
+                            name="Seguridad y Salud" 
+                            to="admin.security.index"
+                        />
+                        <Link
+                            icon="payments"
+                            name="Nómina" 
+                            to="admin.payroll.index"
+                        />
+                        <Link
+                            icon="info"
+                            name="Información Adicional" 
+                            to="admin.additional.index"
+                        />
+                </DropDown>
             </Section>
             <Section name="Capacitaciones">
-                <Link
-                    icon="grid_view"
-                    name="Solicitud de Cursos" 
-                    to="admin.courses.request"
-                />
-                <Link
+                <DropDown
                     icon="grid_view"
                     name="Cursos" 
                     to="admin.courses.index"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Asignación de Cursos" 
-                    to="admin.courses.assignamment"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Calendario de Cursos" 
-                    to="admin.courses.calendar"
-                />
+                    :collapsed="true"
+                >
+                    <Link
+                        icon="grid_view"
+                        name="Solicitud de Cursos" 
+                        to="admin.courses.request"
+                    />
+                    <Link
+                        icon="grid_view"
+                        name="Asignación de Cursos" 
+                        to="admin.courses.assignamment"
+                    />
+                    <Link
+                        icon="grid_view"
+                        name="Calendario de Cursos" 
+                        to="admin.courses.calendar"
+                    />
+                </DropDown>
             </Section>
             <Section name="Eventos">
-                <Link
+                <DropDown
                     icon="grid_view"
-                    name="Dashboard" 
+                    name="Eventos" 
                     to="admin.events.index"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Asignación de presupuesto" 
-                    to="admin.events.assignamment"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Justificación de gastos" 
-                    to="admin.events.justification"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Reportes de gastos" 
-                    to="admin.events.reports"
-                />
+                    :collapsed="true"
+                >
+                    <Link
+                        icon="grid_view"
+                        name="Asignación de presupuesto" 
+                        to="admin.events.assignamment"
+                    />
+                    <Link
+                        icon="grid_view"
+                        name="Justificación de gastos" 
+                        to="admin.events.justification"
+                    />
+                    <Link
+                        icon="grid_view"
+                        name="Reportes de gastos" 
+                        to="admin.events.reports"
+                    />
+                </DropDown>
             </Section>
             <Section
                 v-if="hasPermission('users.index')"
diff --git a/src/pages/Academic/Index.vue b/src/pages/Academic/Index.vue
index 9cf0bff..3f4a3a9 100644
--- a/src/pages/Academic/Index.vue
+++ b/src/pages/Academic/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,13 +13,7 @@ import GoogleIcon from '@Shared/GoogleIcon.vue';
       </div>
 
       <div>
-        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
-          <GoogleIcon 
-            class="text-white text-xl"
-            name="add"
-          />
-          Agregar Registro
-        </button>
+        <Adding text="Agregar Registro" />
       </div>
     </div>
 
diff --git a/src/pages/Additional/Index.vue b/src/pages/Additional/Index.vue
index 6e576ad..4eb8299 100644
--- a/src/pages/Additional/Index.vue
+++ b/src/pages/Additional/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,10 +13,7 @@ import GoogleIcon from '@Shared/GoogleIcon.vue';
       </div>
 
       <div>
-        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
-          <GoogleIcon class="text-white text-xl" name="add" />
-          Nueva Evaluación
-        </button>
+        <Adding text="Nueva Evaluación" />
       </div>
     </div>
 
diff --git a/src/pages/Employees/Index.vue b/src/pages/Employees/Index.vue
index afa5afe..27327bb 100644
--- a/src/pages/Employees/Index.vue
+++ b/src/pages/Employees/Index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
 import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,15 +13,8 @@ import Searcher from '@Holos/Searcher.vue';
         <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información general de empleados</p>
       </div>
 
-      <div class="flex items-center">
-        <button
-          class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-md"
-        >
-          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
-          </svg>
-          Nuevo Empleado
-        </button>
+      <div>
+        <Adding text="Nuevo Empleado" />
       </div>
     </div>
 
diff --git a/src/pages/Payroll/Index.vue b/src/pages/Payroll/Index.vue
index 03acdad..bbbc2b0 100644
--- a/src/pages/Payroll/Index.vue
+++ b/src/pages/Payroll/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,10 +13,7 @@ import GoogleIcon from '@Shared/GoogleIcon.vue';
       </div>
 
       <div>
-        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
-          <GoogleIcon class="text-white text-xl" name="add" />
-          Procesar Nómina
-        </button>
+        <Adding text="Procesar Nómina" />
       </div>
     </div>
 
diff --git a/src/pages/Security/Index.vue b/src/pages/Security/Index.vue
index f0ea0e7..b66675b 100644
--- a/src/pages/Security/Index.vue
+++ b/src/pages/Security/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,10 +13,7 @@ import GoogleIcon from '@Shared/GoogleIcon.vue';
       </div>
 
       <div>
-        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
-          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 4v16M20 12H4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          Actualizar Información
-        </button>
+        <Adding text="Agregar Información" />
       </div>
     </div>
 
diff --git a/src/router/Index.js b/src/router/Index.js
index cce72fe..69ccfec 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -95,24 +95,16 @@ const router = createRouter({
                 title: 'Inicio',
                 icon: 'home',
             },
-            redirect: '/admin/dashboard',
+            redirect: '/admin/employees',
             children: [
                 {
                     path: 'dashboard',
-                    name: 'admin.dashboard',
-                    component: () => import('@Pages/Dashboard/Admin.vue'),
+                    name: 'admin.dashboard.index',
                     meta: {
                         title: 'Dashboard',
                         icon: 'grid_view',
                     },
-                    redirect: '/admin/dashboard',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.dashboard.index',
-                            component: () => import('@Pages/Dashboard/Admin.vue'),
-                        }
-                    ]
+                    component: () => import('@Pages/Dashboard/Admin.vue'),
                 },
                 {
                     path: 'employees',
@@ -127,71 +119,27 @@ const router = createRouter({
                             path: '',
                             name: 'admin.employees.index',
                             component: () => import('@Pages/Employees/Index.vue'),
-                        }
-                    ]
-                },
-                {
-                    path: 'academic',
-                    name: 'admin.academic',
-                    meta: {
-                        title: 'Historial Académico',
-                        icon: 'school',
-                    },
-                    redirect: '/admin/academic',
-                    children: [
+                        },
                         {
-                            path: '',
+                            path: 'academic',
                             name: 'admin.academic.index',
                             component: () => import('@Pages/Academic/Index.vue'),
-                        }
-                    ]
-                },
-                {
-                    path: 'security',
-                    name: 'admin.security',
-                    meta: {
-                        title: 'Seguridad y Salud',
-                        icon: 'security',
-                    },
-                    redirect: '/admin/security',
-                    children: [
+                        },
                         {
-                            path: '',
+                            path: 'security',
                             name: 'admin.security.index',
                             component: () => import('@Pages/Security/Index.vue'),
-                        }
-                    ]
-                },
-                {
-                    path: 'payroll',
-                    name: 'admin.payroll',
-                    meta: {
-                        title: 'Nómina',
-                        icon: 'payments',
-                    },
-                    redirect: '/admin/payroll',
-                    children: [
+                        },
                         {
-                            path: '',
+                            path: 'payroll',
                             name: 'admin.payroll.index',
                             component: () => import('@Pages/Payroll/Index.vue'),
-                        }
-                    ]
-                },
-                {
-                    path: 'additional',
-                    name: 'admin.additional',
-                    meta: {
-                        title: 'Información Adicional',
-                        icon: 'info',
-                    },
-                    redirect: '/admin/additional',
-                    children: [
+                        },
                         {
-                            path: '',
+                            path: 'additional',
                             name: 'admin.additional.index',
                             component: () => import('@Pages/Additional/Index.vue'),
-                        }
+                        },
                     ]
                 },
                 {