toggle button, the menu does not toggle-CodePudding

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?

I share some screenshots with you.

Here is the page

img1

When the user clicks on the toogle button

img2

The menu is always displayed

img3e

The code is available here.

Thanks in advance for your help and time to my problem.

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

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
</head>
<body>
<div  [ngClass]="{ active: showSideBar }">
    <div > </div>
    <ul>
        <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
            <ng-container>
                <div  (click)="selectMenu(menu)">
                    <i [class]="menu.iconClass"></i> {{ menu.name }}
                    <i ></i>
                </div>
                <ul  #submenu [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight   'px' : 0   'px' }">
                    <li *ngFor="let submenu of menu.submenu">
                        <a routerLink="{{ submenu.url }}"> {{ submenu.name }} </a>
                    </li>
                </ul>
            </ng-container>
        </li>
    </ul>
</div>

<div >

    <div >
        <i  (click)="toggleSideBar()"></i>
    </div>
    <div >Bonjour</div>
</div>
</body>
</html>

CodePudding user response：

I us Angular material maybe that can help you

https://material.angular.io/guide/getting-started

In your html:

Header

<button (click)="toggle()">  
     menu
</button>
<mat-sidenav-container>
  <mat-sidenav style="width: 15%" [opened]="open" [mode]="'side'">
    List des liens 
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 90vh">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Footer

In your .ts

.....

open = false

toggle(){
   This.open=!open;
}

......