---

Introducción

Un menú en una aplicación sirve como un lugar donde el usuario puede acceder a diferentes secciones. En Ionic, crear un menú lateral es uno de los primeros pasos para hacer una app intuitiva y fácil de navegar. Este tutorial cubrirá los siguientes componentes de menú en Ionic:

1. ion-menu: El propio contenedor del menú.
2. ion-menu-button: Un botón que abre el menú.
3. ion-menu-toggle: Un elemento que oculta el menú cuando se selecciona.
4. ion-split-pane: Ayuda a adaptar el menú según el tamaño de la pantalla.

Requisitos previos

Para este tutorial, necesitas:

• Tener instalado Node.js.
• Tener conocimientos básicos de HTML y CSS.
• Tener Ionic CLI instalado.

Si ya estás listo, ¡empecemos desde cero!

---

Paso 1: Crear un Proyecto en Ionic

Para comenzar, vamos a crear un proyecto básico en Ionic, llamado MiAppDeMenu.

1. Abre una terminal o línea de comandos en tu computadora.
2. Escribe el siguiente comando para crear un nuevo proyecto:

   ionic start MiAppDeMenu blank --type=angular

Aquí:

• MiAppDeMenu es el nombre de la app.
• blank es una plantilla vacía (sin elementos adicionales).
• --type=angular establece que estamos usando Angular, un framework muy común con Ionic.

1. Navega al directorio de la app:

   cd MiAppDeMenu

4. Inicia la aplicación para ver cómo se ve por defecto:

   ionic serve

Abre un navegador y ve a http://localhost:8100 para ver tu app en funcionamiento.

Nota: Es probable que veas una página en blanco en el navegador. ¡Es normal! Todavía no hemos creado el menú, así que se ve simple.

---

Paso 2: Entendiendo ion-menu

El componente ion-menu es el contenedor principal donde vamos a colocar nuestras opciones de navegación (como «Inicio», «Perfil», «Ajustes»). Este menú puede abrirse y cerrarse, y es ideal para organizar las secciones de tu app.

1. Abre el archivo app.component.html en tu editor de código.
2. Agrega la estructura básica del ion-menu. Coloca el siguiente código en app.component.html:

   <ion-app>
     <ion-split-pane contentId="main-content">
       <!-- Menú lateral -->
       <ion-menu contentId="main-content" side="start" menuId="main-menu" type="overlay">
         <ion-header>
           <ion-toolbar color="primary">
             <ion-title>Mi Menú</ion-title>
           </ion-toolbar>
         </ion-header>

         <ion-content>
           <ion-list>
             <ion-menu-toggle auto-hide="true">
               <ion-item routerLink="/home">
                 <ion-icon slot="start" name="home"></ion-icon>
                 <ion-label>Inicio</ion-label>
               </ion-item>
             </ion-menu-toggle>

             <ion-menu-toggle auto-hide="true">
               <ion-item routerLink="/profile">
                 <ion-icon slot="start" name="person"></ion-icon>
                 <ion-label>Perfil</ion-label>
               </ion-item>
             </ion-menu-toggle>

             <ion-menu-toggle auto-hide="true">
               <ion-item routerLink="/settings">
                 <ion-icon slot="start" name="settings"></ion-icon>
                 <ion-label>Ajustes</ion-label>
               </ion-item>
             </ion-menu-toggle>
           </ion-list>
         </ion-content>
       </ion-menu>

       <!-- Contenido principal -->
       <ion-router-outlet id="main-content"></ion-router-outlet>
     </ion-split-pane>
   </ion-app>

3. Explicación del código:

• ion-menu: Aquí estamos definiendo el menú lateral. Este es el contenedor principal para nuestras opciones de navegación.
• contentId="main-content": Esto conecta el menú con el contenido principal (que tiene el mismo ID). Indica a Ionic qué parte de la pantalla debería desplazarse cuando el menú esté abierto.
• side="start": Indica que el menú aparecerá en el lado izquierdo de la pantalla.
• menuId="main-menu": Un identificador único para este menú. Útil si quieres tener varios menús en tu app.
• type="overlay": El menú se superpone sobre el contenido cuando está abierto.

Nota: El menú incluye ion-item dentro de ion-list, lo que permite crear cada elemento de la lista del menú.

Paso 3: Crear Páginas para el Menú

Necesitamos agregar páginas para cada enlace de nuestro menú (Inicio, Perfil, y Ajustes).

1. Crea una página llamada «Home»:

   ionic generate page home

2. Crea una página llamada «Profile»:

   ionic generate page profile

3. Crea una página llamada «Settings»:

   ionic generate page settings

Paso 4: Configurar las Rutas

Para que el menú funcione correctamente, debemos configurar las rutas de navegación.

1. Abre app-routing.module.ts y asegúrate de que las rutas estén configuradas así:

   import { NgModule } from '@angular/core';
   import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

   const routes: Routes = [
     { path: '', redirectTo: 'home', pathMatch: 'full' },
     { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
     { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule) },
     { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule) },
   ];

   @NgModule({
     imports: [
       RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
     ],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }

Explicación: Aquí estamos definiendo las rutas para cada página. Ionic utiliza routerLink en los elementos del menú para llevarnos a estas páginas específicas.

Paso 5: Agregar un Botón de Menú (ion-menu-button

El componente ion-menu-button es el botón que abre el menú. Por lo general, este botón se coloca en la barra de herramientas (toolbar) de la aplicación, para que el usuario lo encuentre fácilmente en la esquina superior izquierda.

1. Abre el archivo home.page.html (o cualquiera de las páginas que creaste anteriormente).
2. Agrega el botón de menú en la barra de herramientas. Copia y pega el siguiente código en el archivo home.page.html dentro de <ion-header>:

   <ion-header>
     <ion-toolbar>
       <!-- Botón de menú que abre el menú lateral -->
       <ion-buttons slot="start">
         <ion-menu-button></ion-menu-button>
       </ion-buttons>
       <ion-title>Inicio</ion-title>
     </ion-toolbar>
   </ion-header>

• ion-buttons: Este contenedor organiza varios botones en la barra de herramientas.
• slot="start": Hace que el botón se coloque en el lado izquierdo de la barra de herramientas.
• ion-menu-button: Este es el componente que actúa como el botón de menú. Cuando el usuario hace clic en este botón, el menú lateral se abrirá automáticamente.

Nota: Puedes repetir este código en profile.page.html y settings.page.html para asegurarte de que el botón de menú esté disponible en todas las páginas.

---

Paso 6: Personalizar el Estilo del Menú con CSS

Ahora vamos a hacer que el menú tenga un diseño visual atractivo con un fondo degradado. Esta personalización hará que el menú se destaque y se vea más profesional.

1. Abre el archivo global.scss en el directorio src/theme. Este archivo permite que los estilos personalizados afecten a toda la aplicación.
2. Agrega el siguiente código CSS para aplicar un fondo degradado al menú:

   ion-menu {
     --background: linear-gradient(135deg, #4e54c8, #8f94fb);
     color: white;
   }

   ion-toolbar {
     --background: transparent;
     color: white;
   }

   ion-item {
     --background: rgba(255, 255, 255, 0.1);
     --color: white;
     --ripple-color: rgba(255, 255, 255, 0.2);
   }

   ion-item:hover {
     --background: rgba(255, 255, 255, 0.2);
   }

   ion-icon {
     color: white;
   }

   ion-title {
     color: white;
   }

3. Explicación del código:

• ion-menu: Aquí estamos aplicando un fondo degradado con el ajuste --background. Este degradado va desde un tono morado oscuro a un azul claro.
• ion-toolbar y ion-title: Cambiamos el color del texto de la barra de herramientas a blanco para que se vea bien sobre el fondo degradado.
• ion-item: Cada elemento de la lista en el menú tiene un fondo ligeramente transparente. Esto crea un efecto de «tarjeta» que es visualmente atractivo.
• ion-item:hover: Este efecto agrega un cambio de color suave cuando pasas el cursor sobre cada elemento del menú.

Tip: Puedes personalizar estos colores y estilos como prefieras. Ionic permite un nivel avanzado de personalización en cada componente.

---

Paso 7: Utilizar ion-menu-toggle para Optimizar la Experiencia de Usuario

El componente ion-menu-toggle es ideal para cerrar el menú automáticamente cuando se selecciona una opción. Esto es útil para que el usuario pueda enfocarse en la página seleccionada sin necesidad de cerrar el menú manualmente.

1. Asegúrate de que cada elemento de menú esté envuelto en ion-menu-toggle en app.component.html:

   <ion-list>
     <ion-menu-toggle auto-hide="true">
       <ion-item routerLink="/home">
         <ion-icon slot="start" name="home"></ion-icon>
         <ion-label>Inicio</ion-label>
       </ion-item>
     </ion-menu-toggle>

     <ion-menu-toggle auto-hide="true">
       <ion-item routerLink="/profile">
         <ion-icon slot="start" name="person"></ion-icon>
         <ion-label>Perfil</ion-label>
       </ion-item>
     </ion-menu-toggle>

     <ion-menu-toggle auto-hide="true">
       <ion-item routerLink="/settings">
         <ion-icon slot="start" name="settings"></ion-icon>
         <ion-label>Ajustes</ion-label>
       </ion-item>
     </ion-menu-toggle>
   </ion-list>

• auto-hide="true": Esta propiedad hace que el menú se cierre automáticamente al hacer clic en una opción. Muy útil en dispositivos móviles, ya que permite al usuario navegar de forma más cómoda.

---

Paso 8: Adaptar el Menú a Diferentes Tamaños de Pantalla con ion-split-pane

ion-split-pane es un contenedor que ajusta el diseño del menú en función del tamaño de la pantalla. En pantallas grandes, el menú estará siempre visible, mientras que en dispositivos móviles aparecerá como un menú deslizable.

1. Asegúrate de que el código de app.component.html esté dentro de ion-split-pane:

   <ion-split-pane contentId="main-content">
     <ion-menu contentId="main-content" side="start" menuId="main-menu" type="overlay">
       <!-- Contenido del menú -->
     </ion-menu>

     <ion-router-outlet id="main-content"></ion-router-outlet>
   </ion-split-pane>

2. Explicación de ion-split-pane:

• contentId="main-content": Conecta el menú con el contenido principal de la app.
• ion-split-pane: Se encarga de que el menú se comporte de forma adaptable:
  • En pantallas grandes (como tablets y monitores), el menú estará fijo y visible.
  • En pantallas pequeñas (como teléfonos móviles), el menú se convierte en un menú deslizable que aparece cuando el usuario lo solicita.

Tip: Puedes probar el comportamiento del ion-split-pane en el navegador ajustando el tamaño de la ventana. De esta forma, verás cómo el menú cambia entre fijo y deslizable.

---

Paso 9: Probar y Verificar el Menú en Diferentes Dispositivos

Ahora que has construido y estilizado el menú, es importante probarlo en diferentes dispositivos para asegurarte de que funcione bien y se vea bien en todos los tamaños de pantalla.

1. En el navegador: Ajusta el tamaño de la ventana para simular diferentes tamaños de pantalla. Observa cómo el menú cambia entre fijo y deslizable en función del tamaño.
2. Con Ionic DevApp o un emulador de dispositivos:

• Para probar en un emulador de Android o iOS, utiliza los comandos:
  bash ionic cap run android ionic cap run ios
• Con estos comandos, podrás ver cómo el menú se comporta en un dispositivo móvil real o emulado.

1. Verifica la funcionalidad de los componentes:

• ion-menu-button: Asegúrate de que el botón abre el menú.
• ion-menu-toggle: Haz clic en cada opción del menú y verifica que el menú se cierra automáticamente.
• ion-split-pane: Asegúrate de que el menú cambia entre fijo y deslizable en función del tamaño de pantalla.

---

Resumen de los Componentes Utilizados y Conceptos Clave

1. ion-menu: Es el componente principal del menú. Lo personalizamos con un fondo degradado.
2. ion-menu-button: Este botón abre el menú lateral. Lo colocamos en cada página para una experiencia de usuario consistente.
3. ion-menu-toggle: Envuelve cada elemento del menú para que se cierre automáticamente cuando el usuario hace clic en una opción.
4. ion-split-pane: Adapta el menú según el tamaño de pantalla, ofreciendo una experiencia optimizada para cada dispositivo.

¡Con esta guía, has aprendido a construir y personalizar un menú en Ionic desde cero! Además, ahora entiendes cómo adaptar el diseño y comportamiento del menú para diferentes dispositivos y tamaños de pantalla.