title: toggle button doesn't make menu disappear after click
body: <p>I have a problem with the toggle button. When I click the toggle button. The menu is still displayed... I would like to make it disappear, but I don't know how to make the menu disappear after clicking. But,I don't know how to make the menu disappear after clicking.</p>
  <p>I share some screenshots with you.</p>
  <p><strong>Here is the page</strong></p>
  <p><a href="https://i.stack.imgur.com/roIRh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/roIRh.png" alt="enter image description here" /></a></p>
  <p><strong>When the user clicks on the toogle button</strong></p>
  <p><a href="https://i.stack.imgur.com/GU4S9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GU4S9.png" alt="enter image description here" /></a></p>
  <p><strong>The menu is always displayed</strong></p>
  <p><a href="https://i.stack.imgur.com/sgjPM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sgjPM.png" alt="enter image description here" /></a></p>
  <p>The code is available <a href="https://stackblitz.com/edit/github-bvzywr?file=src/styles.css" rel="nofollow noreferrer">here</a>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Open+Sans);
  @import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  html,
  body {
      background-color: #2af598;
      font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
  }
  
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  
  h1 {
      color: #fff;
      font-size: 2.5rem;
      text-align: center;
      padding: 50px 0;
  }
  
  
  /* MENU - SIDEBAR */
  
  
  /* C'est le fond bleu vertical */
  
  .sidebar {
      width: 320px;
      background-color: #fff;
      /*#239cd3;*/
      height: 781px;
  }
  
  
  /* C'est le logo */
  
  .sidebar .logo-details {
      height: 100px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid black;
  }
  
  
  /* Centraliser les rubriques */
  
  .sidebar .menu {
      position: relative;
      padding: 15px 15px 15px 45px;
      color: #4d4d4d;
      font-weight: bold;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      transition: all 0.4s ease;
  }
  
  
  /* Ajustage icones  */
  
  .sidebar li i {
      position: absolute;
      top: 1.2rem;
      left: 1rem;
      color: #595959;
      transition: all 0.4s ease;
  }
  
  
  /* Placer les flèches à droite */
  
  .sidebar li i.fa-chevron-down {
      right: 1rem;
      left: auto;
  }
  
  
  /* Pivoter en haut / en bas la flèche */
  
  .sidebar li.active i.fa-chevron-down {
      transform: rotate(180deg);
  }
  
  
  /* Changement de couleur de la rubrique après clique */
  
  .sidebar li.active .menu {
      color: #b63b4d;
  }
  
  
  /* Changement de couleur icones après clique */
  
  .sidebar li.active i {
      color: #b63b4d;
  }
  
  
  /* Adaptation fond pour le sous menu */
  
  .submenu {
      height: 0;
      overflow: hidden;
      background: #fff;
      /* #239cd3;*/
      font-size: 14px;
      transition: height 0.4s ease;
  }
  
  
  /* Ligne de séparateur sur chaque submenu */
  
  .submenu li {
      border-bottom: 1px solid #4b4a5e;
  }
  
  
  /* Sous-menu après cliquage */
  
  .submenu a {
      display: block;
      text-decoration: none;
      color: blue;
      padding: 12px;
      padding-left: 42px;
      transition: all 0.25s ease-in-out;
  }
  
  
  /* Survole submenu en couleur */
  
  .submenu a:hover {
      background: #b63b4d;
      color: #fff;
  }
  
  
  /* Header */
  
  
  /* Bandeau blanc */
  
  .header {
      position: absolute;
      top: 0;
      background-color: red;
      height: 100px;
      left: 320px;
      width: calc(100% - 320px);
      display: flex;
      justify-content: center;
      padding-top: 15px;
  }
  
  
  /* le toogle */
  
  .header .header-button i {
      font-size: 65px;
      font-weight: 500;
  }
  
  
  /* le titre du header */
  
  .header .header-title {
      text-align: center;
      margin: 0 auto;
      font-size: 35px;
  }
  
  
  /* le header écrasse le sidebar */
  
  .sidebar.active~.header {
      left: 0px;
      width: calc(100% - 0px);
  }
  
  
  /* menu déroulant après avoir activé le toogle  */
  
  .sidebar.active {
      width: 60px;
  }
  
  .selected {
      background: #05aed6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sidebar" [ngClass]="{ active: showSideBar }"&gt;
      &lt;div class="logo-details"&gt; &lt;/div&gt;
      &lt;ul&gt;
          &lt;li *ngFor="let menu of menus; let i = index" [class.active]="menu.active"&gt;
              &lt;ng-container&gt;
                  &lt;div class="menu" (click)="selectMenu(menu)"&gt;
                      &lt;i [class]="menu.iconClass"&gt;&lt;/i&gt; {{ menu.name }}
                      &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;ul class="submenu" #submenu [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' }"&gt;
                      &lt;li *ngFor="let submenu of menu.submenu"&gt;
                          &lt;a routerLink="{{ submenu.url }}"&gt; {{ submenu.name }} &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/ng-container&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="header"&gt;
  
      &lt;div class="header-button"&gt;
          &lt;i class="bx bx-menu" (click)="toggleSideBar()"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="header-title"&gt;Bonjour&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>