Ouverte/Fermeture de rubriques pour un sidebar.

Bonjour,

J'ai un menu avec plusieurs rubriques.

https://zupimages.net/up/22/32/q3sx.png

Si je clique sur "Marché" par exemple, les sous-menus s'affichent correctement

https://zupimages.net/up/22/32/k42b.png

Puis, si je clique sur la rubrique "Portefeuille", la rubrique "Marché" se ferme automatiquement.

https://zupimages.net/up/22/32/4eib.png

Pour le moment tout se passe correctement.

Alors, mon problème est au niveau de la rubrique "Portfolio" si je clique sur celle-ci

https://zupimages.net/up/22/32/2zeu.png

Les sous-menus de "Portefeuille" ne se sont pas fermés automatiquement.

Je ne vois pas trop comment résoudre ce souci ?

menu.ts

Code:

1
2
3
4
5
6
7
8
export type Menu = {
    name: string, 
    id: string,
    iconClass: string, 
    active: boolean,
    submenu: { name: string, url: string }[],
    portfolio: []
  }

online.ts

Code:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
export class OnlineComponent implements OnInit {
 
  private unsubscribe$ = new Subject<void>();
 
  @Select(AuthState.user) user$!: Observable<string>;
  @Select(AuthState.lastConnexionMoment) lastConnexionMoment$!: Observable<ApiConnectionMoment>;
 
  @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;
 
  @Select(ProfileState.portfolios) portfolios$!: Observable<Portfolio[]>;
 
 
 
  menus: Menu[] = [
 
    {
      name: 'Portefeuille',
      id: 'portefeuille',
      iconClass: 'bx bx-wallet',
      active: false,
      submenu: [
        { name: 'Titres en portefeuille', url: '/portfolio/stocks' },
        ...
      ],
      portfolio: [],
    },
 
    {
      name: 'Marchés',
      id: 'market',
      iconClass: 'bx bx-chart',
      active: false,
      submenu: [
        { name: 'Valeurs', url: '/markets/stocks' },
        ...
      ],
      portfolio: [],
    },
 
    {
      name: 'Ordres',
      id: 'orders',
      iconClass: 'bx bx-window-open',
      active: false,
      submenu: [
        { name: 'Ordres en note', url: '/orders/standingOrders' },
        ...
      ],
      portfolio: [],
    },
 
    {
      name: 'Portfolio',
      id: 'Portfolio',
      iconClass: 'bx bx-credit-card-front',
      active: false,
      submenu: [
      ],
      portfolio: [],
    },
 
  ];
 
  constructor(
    private store: Store,
    private sandbox: OnlineSandbox,
    private router: Router) { }
 
  ngOnInit() {
  }
 
  selectMenu(parentMenu): void {
 
    this.menus.forEach(menu => {
      if (menu.name !== parentMenu.name) {
        menu.active = false;
      } else {
        menu.active = !menu.active;
      }
    })
 
  }
 
}

online.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul class="nav-links">
  <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
    <ng-container>
      <a class="item" (click)="selectMenu(menu)">
        <i [class]="menu.iconClass"></i> <span class="links_name">{{ menu.name }}</span>
        <i class="fa fa-chevron-down"></i>
      </a>
      <ul class="submenu" #submenu [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' } ">
        <li *ngFor="let submenu of menu.submenu">
          <a routerLink="{{ submenu.url }}"> <span class="links_subname">{{ submenu.name }}</span>
          </a>
        </li>
      </ul>
      <ul class="portfolio" #portfolio [ngStyle]="{ 'height': menu.active ? portfolio.scrollHeight + 'px' : 0 + 'px' } ">
        <li *ngFor="let portfolio of (portfolios$ | async)">
          <a> <span class="links_subname whiteColor"> {{ portfolio.NO_PTF }}</span>
          </a>
        </li>
      </ul>
    </ng-container>
  </li>
</ul>

Merci pour votre aide.