No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Implementando el sideMenu

10/20
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 20

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Tambi茅n aparece el repo de la clase

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;
}

Deber铆an sacar un curso de puro angular material

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);
    }
  }

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

  1. Desactiva el firewall (yo despu茅s de la clases lo vuelvo a activar)
  2. Corro la aplicaci贸n con la IP de la computadora con ng serve --host <tu-IP> o 0.0.0.0
  3. 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

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>

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

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; }

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);
}

no me gusta este curso esta feo planteado

Faltar铆a un curso donde se use netamente Material

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

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
  }
}

amigo, bastante nasty la animaci贸n del men煤, 10/10 馃懡

Esta es la ruta para que puedan copiar el reset:

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

Genial esta clase!

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

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);
  }
}

Si el 鈥渟pace-between鈥 de la clase show-mobile sobre escribe el 鈥渇lex-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);
  }
}
   <!-- [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>