estoy teniendo problemas para ocultar mi menú quiero que al hacer click el menú se oculte o se queden los fa fa icons pero más pequeño como en la siguiente captura.
Así es como lo tengo actualmente:
Mi código html es el siguiente:
<header id="header">
<div class="nav-top">
<a class="navbar-brand" href="#">
<img class="navbar-brand-full" src="assets/images/logo-top.png" alt="Fundacion Hogar Renacer"/>
</a>
<span id="menu-toggle" class="collapse-sidebar">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
</span>
<div class="menu-items"></div>
</div>
</header><!-- /header -->
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><img alt="Logo" src="assets/images/logo.png"/> </div>
<div class="list-group list-group-flush">
<a [routerLink]="['/home']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-home"></i> Inicio</a>
<a [routerLink]="['/citas']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-calendar-alt"></i> Citas</a>
<a [routerLink]="['/pacientes']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-address-book"></i> Pacientes</a>
<a [routerLink]="['/personal']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-user-md"></i> Personal</a>
<a [routerLink]="['/contactos']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-binoculars"></i> Otros contactos</a>
<a [routerLink]="['/grupos']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-user"></i> Grupos</a>
<a [routerLink]="['/sesionesgrupos']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-users"></i> Sesiones en grupos</a>
<a [routerLink]="['/historial']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-book-medical"></i> Historia clinica</a>
<a [routerLink]="['/informes']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-clipboard-list"></i> Informes</a>
<a [routerLink]="['/documentos']" routerLinkActive="active-link" class="list-group-item list-group-item-action bg-light"><i class="menu fas fa-file-pdf"></i> Documentos</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- <div class="header-title"> -->
<router-outlet></router-outlet>
<!-- </div> -->
</div>
</div>
</div>
En la etiqueta con id="menu-toggle" es donde está el botón que al hacer click quiero que oculte el menú de navegacón
Muchas gracias!