Fix: botones se salen de la pantalla

modified:   Entidades/Grupo.cs
	modified:   Front/src/lib/NavBarAutocompletable.svelte
	new file:   Front/src/lib/css/popup.css
	modified:   Modelo/RepositorioPermisos.cs

Front/src/lib/NavBarAutocompletable.svelte

@@ -2,19 +2,24 @@
   import { Navbar, NavbarBrand, NavbarToggler, NavItem, Nav, NavLink, Collapse } from "@sveltestrap/sveltestrap";
   import { onMount } from "svelte";
   import { writable } from 'svelte/store';
-
+  import './css/popup.css';
   let isOpen: boolean = $state(false);
 
-  interface Permiso {
+  type Permiso = {
     id: number;
     descripcion: string;
-  }
+  };
 
-  const permisos = writable<Permiso[]>([]);
+  type Grupo = {
+    id: number;
+    nombre: string;
+    idpermisos: Permiso[];
+  };
+
+  const permisos = writable<Grupo[]>([]);
   const email = localStorage.getItem('email');
   const token = sessionStorage.getItem('token');
 
- 
   async function obtenerPermisos(){
     try {
       const response = await fetch("http://localhost:5007/api/acciones",{
@@ -36,17 +41,18 @@
     }
   }
   
-  $inspect(permisos);
   onMount( () => {
      obtenerPermisos();
   })
+
+ 
 </script>
 
 <Navbar container="xxl" expand="md" color="dark-subtle">
   <NavbarBrand href="/">
     AlquilaFacil
   </NavbarBrand>
-  <div class="card">
+  <div class="badge">
     <a href="/Menu">
       <img src="/home.svg" alt="Volver al Menú"/>
     </a>
@@ -55,9 +61,20 @@
   <Collapse isOpen={isOpen} navbar expand="md">
     <Nav class="ms-auto" navbar>
     {#each $permisos as item }
-      <NavItem>
-        <NavLink href="/accion/{item.id}">{item.descripcion}</NavLink>
-      </NavItem>
+      <div class="dropdown">
+        <div class="btn-group" style="margin-left: 3px; margin-top: 3px">
+          <button class="btn btn-secondary">{item.nombre}</button>
+          <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <span class="visually-hidden">Toggle Dropdown</span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end"  >
+            {#each item.idpermisos as perm}
+            <li class="dropdown-item"><a class="link-underline-opacity-0 link-underline" href="/accion/{perm.id}">{perm.descripcion}</a></li>
+            <li><hr class="dropdown-divider"></li>
+            {/each}
+          </ul>
+        </div>
+      </div>
     {/each}
     </Nav>
   </Collapse>

Front/src/lib/css/popup.css

@@ -0,0 +1,38 @@
+@keyframes rollDown {
+  from {
+    opacity: 0; 
+    transform: rotateX(-90deg); 
+    transform-origin: top; 
+  }
+  to {
+    opacity: 1;
+    transform: rotateX(0deg);  
+  }
+}
+  
+@keyframes rollUp {
+  from {
+    opacity: 1;
+    transform: rotateX(0deg);
+  }
+  to {
+    opacity: 0;
+    transform: rotateX(-90deg);
+  }
+}
+  
+.dropdown-menu {
+  display: none;  
+  animation: none;
+  transform-origin: top;  
+}
+
+.dropdown-menu.show {
+    animation: rollDown 0.5s ease forwards;  
+    display: block;  
+}
+
+.dropdown-menu.hide {
+  animation: rollUp 0.5s ease forwards;  
+  display: block;
+}