refact: modifie le sidemenu pour qu'il puisse inclure des collapsibles

dyno-nuggets · May 7, 2023 · 6475a28 · 6475a28
1 parent e239b79
commit 6475a28
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 18 deletions.
diff --git a/frontend-implicaction/src/app/admin/pages/admin-page/admin-page.component.ts b/frontend-implicaction/src/app/admin/pages/admin-page/admin-page.component.ts
@@ -24,7 +24,7 @@ export class AdminPageComponent {
       label: 'Offres',
       routerLink: `/${Univers.ADMIN.url}/jobs`,
       icon: 'fas fa-briefcase',
-      routerLinkActiveOptions: {exact: true}
+      routerLinkActiveOptions: {queryParams: 'subset'}
     },
     {
       label: 'Entreprises',
@@ -36,7 +36,19 @@ export class AdminPageComponent {
       label: 'Forum',
       routerLink: `/${Univers.ADMIN.url}/forum`,
       icon: 'fas fa-comments',
-      routerLinkActiveOptions: {exact: true}
+      routerLinkActiveOptions: {queryParams: 'subset', exact: false},
+      items: [
+        {
+          label: 'Catégories',
+          routerLink: `/${Univers.ADMIN.url}/forum`,
+          routerLinkActiveOptions: {exact: true},
+        },
+        {
+          label: 'Messages',
+          routerLink: `/${Univers.ADMIN.url}/forum`,
+          routerLinkActiveOptions: {exact: true},
+        }
+      ]
     },
   ];
 }
diff --git a/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.html b/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.html
@@ -1,18 +1,62 @@
 <ul class="list-group list-group-flush py-2">
   <ng-container *ngFor="let menuItem of menuItems">
-    <li class="list-group-item">
-      <a
-        [routerLinkActive]="'active'"
-        [routerLink]="menuItem.routerLink"
-        [queryParams]="menuItem.queryParams"
-        [routerLinkActiveOptions]="menuItem.routerLinkActiveOptions"
-      >
+    <li class="list-group-item nav-item">
+      <ng-container *ngIf="!menuItem.items; else templateCollapsable">
+        <a
+          role="button"
+          class="nav-link"
+          [routerLinkActive]="'active'"
+          [routerLink]="menuItem.routerLink"
+          [queryParams]="menuItem.queryParams"
+          [routerLinkActiveOptions]="menuItem.routerLinkActiveOptions"
+        >
         <span>
           <i *ngIf="menuItem.icon" [class]="menuItem.icon"></i> {{menuItem.label}}
         </span>
 
-        <span *ngIf="menuItem.badge" class="badge bg-primary rounded-pill me-3">{{menuItem.badge}}</span>
-      </a>
+          <span *ngIf="menuItem.badge" class="badge bg-primary rounded-pill me-3">{{menuItem.badge}}</span>
+        </a>
+      </ng-container>
+
+      <ng-template #templateCollapsable>
+        <a
+          class="nav-link cursor-pointer"
+          data-bs-target="#collapsed-nav"
+          data-bs-toggle="collapse"
+          aria-expanded="false"
+          (click)="menuItem.expanded = !menuItem.expanded"
+          [ngClass]="{'collapsed': !menuItem.expanded, 'expanded active': menuItem.expanded}"
+        >
+        <span>
+          <i *ngIf="menuItem.icon" [class]="menuItem.icon"></i> {{menuItem.label}}
+        </span>
+        </a>
+
+        <ul
+          id="collapsed-nav"
+          class="nav-content"
+          data-bs-parent="#sidebar-nav"
+          [ngClass]="{'collapse': !menuItem.expanded}"
+        >
+          <ng-container *ngFor="let item of menuItem.items">
+            <li routerLinkActive="active">
+              <a
+                role="button"
+                class="nav-link"
+                [routerLink]="item.routerLink"
+                [queryParams]="item.queryParams"
+              >
+                <span>
+                  <i *ngIf="item.icon" [class]="item.icon"></i> {{item.label}}
+                </span>
+
+                <span *ngIf="item.badge" class="badge bg-primary rounded-pill me-3">{{item.badge}}</span>
+              </a>
+            </li>
+          </ng-container>
+        </ul>
+      </ng-template>
+
     </li>
   </ng-container>
 </ul>
diff --git a/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.scss b/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.scss
@@ -17,15 +17,28 @@
       background-color: $secondary;
     }
 
-    &:after {
-      position: absolute;
-      right: 10px;
-      font-family: FontAwesome;
-      content: "\f054";
+    &.collapsed, &.expanded {
+      &:after {
+        position: absolute;
+        right: 10px;
+        font-family: FontAwesome;
+      }
+    }
+
+    &.collapsed:after {
+      content: '\f107'
+    }
+
+    &.expanded:after {
+      content: '\f106'
     }
 
     .badge {
       font-size: 0.9rem;
     }
   }
 }
+
+li.active {
+  list-style-type: disc;
+}
diff --git a/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.ts b/frontend-implicaction/src/app/shared/components/sidemenu/sidemenu.component.ts
@@ -1,13 +1,29 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {MenuItem} from "primeng/api";
+import {NavigationEnd, Router} from "@angular/router";
 
 @Component({
   selector: 'app-sidemenu',
   templateUrl: './sidemenu.component.html',
   styleUrls: ['./sidemenu.component.scss']
 })
-export class SidemenuComponent {
+export class SidemenuComponent implements OnInit {
 
   @Input() menuItems: MenuItem[];
 
+  constructor(private router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.router.events.subscribe(routerEvent => {
+      if (routerEvent instanceof NavigationEnd) {
+        // Get your url
+        console.log(routerEvent.url);
+        console.log(this.menuItems.find(item => !!item.items && item.items.find(i => i.url && this.router.isActive(i.url, false))));
+      }
+    });
+
+
+  }
+
 }