Búsqueda de sitios web

TypeScript - ¿cómo puedo hacer un menú hamburguesa con Angular?

¿Cómo puedo hacer un menú de hamburguesa con Angular? No entiendo cómo hacerlo en Typescript, soy bastante principiante.

cuando cambio mi pantalla al modo smartphone, ¿debería ocultar el menú de navegación?

homepage.component.html

<div class="wrapper">
        <div class="sidebar-wrapper">
            <div class="title-content">
                <h1 class="title-wrapper">Furniture</h1>
                <button (click)="burgerMenuClick">&#9776;</button>
            </div>
            <nav class="sidebar-wrapper-nav">
                <ul>
                    <li class="list-wrapper">
                        Home
                    </li>
                    <li class="list-wrapper">
                        Shop
                    </li>
                    <li class="list-wrapper">
                        Product
                    </li>
                    <li class="list-wrapper">
                        Cart
                    </li>
                </ul>
            </nav>
        </div>
        <div class="main-content-wrapper">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
            <img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
        </div>
    </div>

homepage.component.ts

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

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.burgerMenuClick();
  }

  burgerMenuClick() {

  }

}

Respuesta #1

Puedes hacerlo solo con HTML y CSS. Creo una demostración en el enlace.

Como en HTML, puedes usar checkbox para mostrar u ocultar el menú de navegación dependiendo de si está marcado o no. La parte de label incluye 3 líneas que son para la animación.

Si quieres que sea solo para aplicaciones móviles, necesitas poner mediaquery para esto. Puedes revisar un ejemplo en el enlace.

<input type="checkbox" [(ngModel)]="model" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
      <div class="spinner diagonal part-1"></div>
      <div class="spinner horizontal"></div>
      <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
        <div class="main-content-wrapper">
        </div>
    </div>

para mediaquery abajo dice máximo a 992px, el CSS dentro de esta consulta será aceptado, entonces solo necesitas poner input y label dentro de ella

.sidebarIconToggle{
      display:none
}
@media screen and (max-width: 750px) {
  .sidebarIconToggle{
      display:block
   }
}

Respuesta #2

¿Qué quieres decir con esto?

cuando cambio mi pantalla al modo smartphone, ¿debería ocultar el menú de navegación?

Normalmente quieres mostrar la barra de navegación como una barra de menú normal cuando estás en la pantalla de un portátil y colapsarla en un menú hamburguesa cuando estás en un teléfono inteligente.

Si utilizas Bootstrap, obtendrás este comportamiento directamente con la barra de navegación. Por favor, consulta este recurso: https://mdbootstrap.com/docs/angular/navigation/navbar/

Artículos relacionados