Discussion :

[Tamzoro]

Bonjour,

Je souhaite créer un "sliding menu", il s'agit d'un type de menu de navigation qui s'anime en déplaçant les éléments du menu et sous menus. (En gros, c'est un menu coulissant...)

Il y a un bel exemple ici => https://plnkr.co/edit/Ksfo7fnSB0c4DH...review&preview

Alors, pour le moment, j'ai créé mes deux 2 rubriques (Accueil & Agences)



Si je clique sur la rubrique "Agences" , il faudrait que les rubriques (Agences & Accueil) disparaissent et que je puisse visualiser uniquement les sous-rubriques...



Ici en l'occurrence, je devrais visualiser l'élément du sous-menu "Portefeuille". Malheureusement, je ne parviens pas à masquer les éléments du menu, c'est à dire que les éléments du sous-menu s'affichent en même temps avec les éléments du menu.

Je vous partage mon code ci dessous, si vous avez une solution à mon problème, je vous remercie pour votre aide et du temps consacré à mon problème car j'ai vraiment pas trouvé d'exemple concret en Angular.

online.ts

Code TypeScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export class OnlineComponent implements OnInit {
  nav: IMenuItem[] = [];
 
  constructor(private onlineService: OnlineService) { }
 
  ngOnInit() {
    // Initialize the 'nav' property with data from the 'onlineService'
    this.nav = this.onlineService.IMenuItem;
  }
 
  toggleSubMenu(index: number) {
    // Toggle the active state of the clicked item
    this.nav[index].active = !this.nav[index].active;
 
    // Ensure that all other items are deactivated
    for (let i = 0; i < this.nav.length; i++) {
      if (i !== index) {
        this.nav[i].active = false;
      }
    }
  }
}

online.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="container text-center" *ngIf="nav">
    <div class="sideBar">
      <div class="menu-content">
        <ul class="menu-items">
          <li class="item" *ngFor="let menuItem of nav; let i = index">
            <div class="menu-item" (click)="toggleSubMenu(i)">
              <!-- Display the menu item name -->
              <span class="title">{{ menuItem.name }}</span>
            </div>
            <ul class="submenu" *ngIf="menuItem.active">
              <li class="subitem" *ngFor="let subItem of menuItem.sub">
                <div class="submenu-item">
                  <!-- Add [routerLink] directive to manage navigation -->
                  <a [routerLink]="subItem.state">{{ subItem.name }}</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
 
  <div class="container">
    <!-- This is where the routed components will be displayed -->
    <router-outlet></router-outlet>
  </div>

online.service.ts

Code TypeScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export class OnlineService {
 
  IMenuItem: IMenuItem[] = [
    {
      name: "Accueil",
      type: "valeur_de_type" ,
      sub: [
        {
          name: "Home",
          state: "/account/home",
        }
      ]
    },
    {
      name: "Agences",
      type: "valeur_de_type" ,
      sub: [
        {
          name: "Portefeuilles",
          state: "/agences/portefeuilles",
        }
      ]
    },
  ];
 
 
  constructor() { }
}

J'ai également crée une illustration de mon code sur Stackblitz. https://stackblitz.com/edit/github-e...component.html

[duke666]

tu as imbriqués le menu principal avec le sous menu
dit autrement tu as inclus le sous menu dans le menu principal

donc tu ne peux pas faire disparaitre le menu principal (sinon le sous menu disparait aussi)


* tu dois faire 3 composants :

app.component.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

   <menuContainer></menuContainer>

menuContainer.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<menuParent *ngIf="displayParent"  [menu]="menuParent"></menuParent>
<menuChild  *ngIf="displayChild"  [menu]="menuChild"></menuChild>

tu fais communiquer les 3 composants avec un service.

ainsi menuContainer est le chef d'orchestre envoi au parent et au child quel menu afficher
menuContainer reçoit l'information d'un clic sur le menu parent ou enfant et agit.


ainsi via le service, le menuContainer reçoit une information comme quoi sur le menuParent un clic a été fait sur un des menus
on met à jour la list menuChild on met displayParent = false et displayChild = true

et si quelqu'un clique dans le sous menu faire l'inverse


* pour le service j'utiliserai un behaviorSubject

menu.service.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
menuParentEvent = new BehaviorSubject(null);        // quel choix du menu parent a été cliqué
menuChildEvent = new BehaviorSubject(null);      // quel choix du menu enfant a été cliqué

le menucontainer s'abonne aux 2 events pour agir en conséquence
menuParent et menuChild envoi sur menuContainer si un click est fait et quel choix du menu a été cliqué

par exemple menuContainer via l'abonnement reçoit de menuParentEvent la données suivante 'menuA'
donc celui a compris que l'on a cliqué sur menuA du parent et on met à jour le menuChild et les displayParent=false et displayChild=true



*** c'est un résumé, il faut développer le truc

[Tamzoro]

Bonjour Duke666 ,

Merci pour ta réponse et le temps que tu as consacré à me répondre. J'ai bossé hier soir sur le projet et j'y suis arrivé autrement.

https://stackblitz.com/github/kora13...component.html

[duke666]

tu utilises le css pour afficher ou pas

sinon le css met le au niveau des composants (pas dans style)
décompose en plusieurs composants plutôt que de tout mettre dans un composant

c'est pour un projet perso ou entreprise ?

[Tamzoro]

tu utilises le css pour afficher ou pas

sinon le css met le au niveau des composants (pas dans style)

Bonjour,

Oui j'utilise du CSS pour afficher ou masquer les éléments.

décompose en plusieurs composants plutôt que de tout mettre dans un composant

Pourquoi faut-il décomposer en plusieurs composants?

c'est pour un projet perso ou entreprise ?

Non, j'essaye de m'entrainer et de créer des petits projets perso pour que je m'améliore.

J'ai une petite question, sur Binance lorsqu'on refresh la page, le sous-menu qui était ouvert, reste toujours ouvert -> https://www.binance.com/en-BH/suppor...&navId=130#199

Tu penses que c'est possible de faire ça? Je dois créer une variable qui gère l'état du menu?

[duke666]

* il s'agit de bonne pratique, faut voir le développement par composant comme des légos
une application, on l'a construit de plusieurs légos que l'on emboite les uns aux autres, chaque légo peut communiquer principalement via un service et RxJS

ainsi, quand on veut corriger ou même changer quelquechose on change ou corrige le légo en question, c'est le grand avantage.
alors si tu mets tout dans un seul composant :
- tu fais un développement classique (et tu ne profite pas de l'avantage de la programmation par composant)
- si tu veux modifier un truc tu dois fouiller dans le code , modifier et des risques de régressions arrivent.

* sur binance, je remarque que le sous menu choisis est inscrit dans l'url.
donc il récupère le sous menu dans l'url pour activer le bon menu.
on peut faire pareil avec Angular

* si c'est pour ton apprentissage, je te conseil de refaire le menu façon "composant", autant apprendre de la bonne façon

voici un article que j'ai écrit sur medium : https://medium.com/@d.gerbede/angula...22-8aba5910466
tu peux utiliser le traducteur automatique pour l'avoir en français. (trad n'est pas parfaite)
cela va te donner une idée de l'objectif des bonnes pratiques à atteindre et qui représente 90% du dev sur angular

si tu debute, ça peut te paraître un peu complqué toutes les notions abordés, c"est normal

[Tamzoro]

Bonsoir,

Merci pour toutes tes explications, je vais effectivement décomposer mon projet ça sera plus facile à maintenir.

Je vais consulter ton article, j'ai vu que tu as partagé un exemple sur Stackblitz, je vais regarder ça de plus près.