Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha.

Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos:

• Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación
• Mat Sidenav Container: el contenedor de lo que veremos a continuación
• Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación
• Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección

Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material.

Si quieres ver el ejemplo terminado haz click aquí.

Menú de navegación con Angular Material

Para usar este diseño de Material Design importa los siguientes componentes:

El MatIconModule es para mostrar algunos iconos, el de MatButtonModule para los botones y finalmente el MatExpansionModule para mostrar elementos que se expanden.

Después en @NgModule indica los imports.

El contenedor para el menú de navegación con Angular Material

Como lo dije, esto se divide en una barra; el contenido y el menú. A grandes rasgos se ve así (he encerrado todo en un div para darle estilo más tarde):

Lo he colocado en ese contenedor para estilizar y asignar los espacios usando flexbox:

Toolbar

Comenzamos con la barra, como este es un ejemplo para otro post que haré más tarde que tratará sobre MySQL y PHP con Angular el título es sobre eso. Se ve así:

He colocado el botón que oculta y muestra el menú; después el título y más tarde mi nombre. Se ve así:

El estilo de la barra es:

El contenedor del menú y el contenido

Como vamos a ir por partes, primero quiero mostrar los estilos del contenedor que será hermano de la barra:

La barra lateral

Después veamos la barra lateral que será ahora sí el menú:

Como ves tengo una referencia con #cajon (y en la barra invoco a toggle cuando se hace click en el botón).

Tengo mis elementos y en la parte inferior un panel de expansión que si bien no es obligatorio ejemplifica bien cómo podríamos tener elementos colapsables.

El único estilo que tiene es que su ancho mínimo es de 300px.

El contenido

Finalmente el contenido es así:

Con un padding de 10 px cuyo estilo es:

Poniendo todo junto

Así que para no hacer las cosas más largas primero tenemos la vista:

Después los estilos:

Al final tenemos lo siguiente:

Demostrando uso de menú de navegación con material design usando Angular

Sobre el enrutador

Si estás usando el enrutador de Angular, coloca el router-outlet dentro del mat-sidenav-content. Algo así: