Implementando el sideMenu

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

A la hora de implementar el sideMenu recuerda siempre la importancia de que una aplicación web sea responsive para que pueda adaptarse a cualquier dispositivo, ya sea un celular, una tablet o un ordenador.

Menú mobile

Utilizando el estado de los componentes de Angular, podrás mostrar un menú lateral solo en dispositivos pequeños.

Paso 1: Comienza dividiendo tu <header> adaptándolo con CSS para mostrar u ocultar elementos dependiendo el tamaño del dispositivo:

<!-- components/nav-bar/nav-bar.component.html -->
<header class="header">
    <div class="d-flex-mobile">
        <a href="#" class="logo">CompanyLogo</a>
        <div class="show-side-menu">
            <app-side-bar></app-side-bar>
        </div>
    </div>
    <div class="header-right hidde-menu">
        <a href="#">Home</a>
        <a class="active" href="#">Catalogo</a>
        <a href="#">About</a>
    </div>
</header>

/* components/nav-bar/nav-bar.component.scss */
.header {
  /* ... */
  .show-side-menu {
    display: none;
  }
}

/* Header Mobile */
@media screen and (max-width: 512px) {
  /* ... */
  .d-flex-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .show-side-menu {
    display: block;
  }
  .hidde-menu {
    display: none;
  }
}

Paso 2: Crea el componente que será la barra de navegación lateral:

// components/side-bar/side-bar.component.ts
@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.scss']
})
export class SideBarComponent {

  public showMenu = false;

  toggleSideBar(): void {
    this.showMenu = !this.showMenu;
  }

}

<!-- components/side-bar/side-bar.component.html -->
<div id="main">
    <button class="openbtn" (click)="toggleSideBar()">☰</button>
</div>
<div id="mySidebar" class="sidebar" [ngClass]="this.showMenu ? 'showMenu' : '">
    <a href="javascript:void(0)" class="closebtn" (click)="toggleSideBar()">×</a>
    <a href="#">Home</a>
    <a class="active" href="#">Catalogo</a>
    <a href="#">About</a>
</div>

/* components/side-bar/side-bar.component.scss */
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f1f1f1;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  box-shadow: 0 3px 6px #00000029;

  a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 22px;
    color: black;
    display: block;
    transition: 0.3s;
  }
  .active, a:hover {
    color: #98ca3f;
  }
  .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
}
.openbtn {
  cursor: pointer;
  font-size: 20px;
  color: black;
  background-color: #f1f1f1;
  padding: 10px 15px 15px 15px;
  border: none;
}
#main {
  transition: margin-left .5s;
  padding: 12px;
}
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
.showMenu {
  width: 250px;
}

Paso 3: Fíjate en la función toggleSideBar() que activará o desactivará el menú lateral al hacer clic en el botón.

side menu.png {height="" width=""}

Es importante considerar la navegación del usuario, tanto en pantallas grandes como en pequeñas, que el menú sea de rápido acceso y accesible.

Ver código fuente del proyecto

Contribución creada con los aportes de Kevin Fiorentino.

Aportes 21

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Anthony Ismael Manotoa Moreno

Platzi Team

hace 3 años

Esta es la fuente utilizada:
https://fonts.googleapis.com/css2?family=Quicksand&display=swap

También aparece el repo de la clase

Alexis E. COLQUE CAYPA

hace 3 años

Dejo el enlace donde pueden copiar el reset https://meyerweb.com/eric/tools/css/reset/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

AhorraSegurosMX

hace 3 años

Deberían sacar un curso de puro angular material

Alejandro Mejia Escobar

hace 3 años

Comparto el css de la clase:

.side-menu{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: white;
    flex-direction: column;
    justify-content: flex-start;
    transform: translateX(-100%);
    transition: all ease-out .5s;

    &.active {
      transform: translateX(0);
    }
  }

Daniel Alejandro Calderón Virgen

hace 2 años

Si quieren ver la app en su celular, lo pueden hacer de la siguiente manera

Desactiva el firewall (yo después de la clases lo vuelvo a activar)
Corro la aplicación con la IP de la computadora con ng serve --host <tu-IP> o 0.0.0.0
Desde el celular abres la app con la dirección IP de tu computadora más el puerto claro

A mi se me hace más sencillo ver desde ahí la app

Deymer Hernandez

hace 3 años

Me gusta mas la sintaxis con [ngClass]

<div class="side-menu" [ngClass]="{active: activeMenu}">
    <button (click)="toggleMenu()">Close</button>
    <ul>
      <li><a href="">All</a></li>
      <li><a href="">Clothes</a></li>
      <li><a href="">Electronics</a></li>
    </ul>
  </div>

Javier Fuentes Ríos

hace 2 años

No me gusta que el curso se centre tanto en CSS y no en temas afines a Angular, se divaga mucho.

Sergio Andrés Bolaños Penagos

hace 2 años

En lugar de import es recomendable poner las fuentes en el head del HTML, así

<head>
  <meta charset="utf-8">
  <title>YardSaleStore</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet">
</head>

Esto con el fin de reducir el tiempo de carga, que está comprobado que se disminuye notoriamente al tratarse de recursos externos, con esta opción, en Google Fonts les aparece para copiarse ese código, y luego solo ponen en el css body { font-family: su fuente, fuente comun; }

edinsoncoloniapa

hace 3 años

En esta ruta está la clase, pueden navegar para obtener ncluso los logos utilizados como carrito, menu, etc.
https://github.com/platzi/angular-componentes/tree/8-step

Poul Lorca

hace 2 años

El código en css quedaría de la siguiente forma. Recuerda no dejar espacios entre “.side-menu” y “.active”.

.show-mobile .side-menu {
	 position: fixed;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
	 background: white;
	 display: flex;
	 flex-direction: column;
	 justify-content: flex-start;
	 transform: translateX(-100%);
	 transition: all ease-out 0.5s;
}
 .show-mobile .side-menu.active {
	 transform: translateX(0);
}

Arturo Baduna

hace 2 años

no me gusta este curso esta feo planteado

Edgardo7x

hace 3 años

Faltaría un curso donde se use netamente Material

alberto ayala rodriguez

hace 3 años

amigo, bastante nasty la animación del menú, 10/10 👽

Miguel Ángel Reyes Moreno

hace 2 años

Implementando el sideMenu

Hacemos un menu que se muestra y oculta de la siguiente forma:

nav.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
  activeMenu: boolean = false;

  toggleMenu() {
    this.activeMenu = !this.activeMenu;
  }
}

nav.component.html:

<div class="show-mobile">
  <div>
    <button (click)="toggleMenu()"> <!---- se pone en true ----->
      <img src="./assets/svg/icon_menu.svg" alt="menu">
    </button>
    <a href="">
      <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
    </a>
    <a href="">
      <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
    </a>
  </div>
  <div class="side-menu" [class.active]="activeMenu"> <!---- se muestra el menu ----->
    <button (click)="toggleMenu()">Close</button> <!---- se pone en false ---->
    <ul>
      <li><a href="">All</a></li>
      <li><a href="">Clothes</a></li>
      <li><a href="">Electronics</a></li>
    </ul>
  </div>
</div>

nav.component.scss:

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transform: translateX(-100%);
  transition: all ease-out .5s;
  &.active {
    transform: translateX(0);
  }
}

Jonathan Vergara Ruiz

hace 2 años

Les comparto mi codigo trate de modularizarlo creando un nuevo componente especificamente para el slide-menu
y le pase usando @Input() la funcion y el estado para poder abrir y cerrar el menu desde el padre.

app-slide-menu.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-slide-menu',
  templateUrl: './slide-menu.component.html',
  styleUrls: ['./slide-menu.component.scss']
})
export class SlideMenuComponent {
  @Input() showMenu: boolean = false;
  @Input() handleClose: (() => void) | undefined;
}

app-slide-menu.html

<div class="SlideMenu__container" [class.active]="showMenu">
  <button (click)="handleClose && handleClose()">close</button>
  <ul>
    <li><a href="">All</a></li>
    <li><a href="">Clothes</a></li>
    <li><a href="">Electronics</a></li>
  </ul>
</div>

NOtA💡: el el @import() handleClose le estoy pasando la funcion de toggle para abrir y cerrar esta tipado como void por que esta funcion
no retorna nada y el undefined es por que a la variable no le asigne nada como tal. Asi que para implementar esto en el html tuve que
hacer la condicion de que si existia ejecuta la funcion para que no me diera error => handleClose && handleClose().

app-nav.html

<div class="show-mobile">
  <div>
    <button (click)="handleOpenMenu()">
      <img src="./assets/svg/icon_menu.svg" alt="menu">
    </button>
    <a href="">
      <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
    </a>
    <a href="">
      <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
    </a>
  </div>
    <app-slide-menu [handleClose]="handleOpenMenu" [showMenu]="showMenu"></app-slide-menu>
</div>
<div class="hide-mobile">
  <div>
    <nav>
      <a class="logo" href="">
        <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
      </a>
      <ul>
        <li><a href="">All</a></li>
        <li><a href="">Clothes</a></li>
        <li><a href="">Electronics</a></li>
      </ul>
    </nav>
    <div class="info">
      <div class="account">[email protected]</div>
      <div>
        <a href="">
          <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
        </a>
      </div>
    </div>
  </div>
</div>

app-nav.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
  showMenu: boolean = false

  handleOpenMenu (){
    this.showMenu = !this.showMenu
  }
}

Andres Cavedal

hace un año

Hola, vengo a dejar algo que descubrí. Y de paso estaría bueno si alguien sabe si es mejor o peor práctica, pero encontré que no hace falta crear la función si simplemente colocamos esto en el HTML `(click)="this.showMenu = !this.showMenu;"`

steven morla

hace un año

Esta es la ruta para que puedan copiar el reset:

https://meyerweb.com/eric/tools/css/reset/

Donny Daniel Vásquez Ramos

hace un año

Genial esta clase!

Diego Jurado

hace 2 años

La mejor manera como siempre será aprender haciendo, pero esta se hizo práctico el aprender viendo hacer!

Jhonanderson Tellez Parra

hace 2 años

Si el “space-between” de la clase show-mobile sobre escribe el “flex-start” de la clase side-mobile, se corrije especificando mejor la clase.

.show-mobile .side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transform: translateX(-100%);
  transition: all ease-out .5s;
  &.active {
    transform: translateX(0);
  }
}

Jhonanderson Tellez Parra

hace 2 años

   <!-- [ngClass]="{'activeMenu': activeMenu}"
    De esta forma toca poner el mismo nombre de la variable a la clase -->
  <div class="side-menu" [class.active]="activeMenu">
    <button (click)="toggleMenu()" >Close</button>

Si ya tienes una cuenta,

Curso de Angular: Componentes y Servicios

Implementando el sideMenu

Menú mobile

Implementando el sideMenu