Added exactRoutes option to sidebar (#217)

* Added exactRoutes option to sidebar * unnecessary else
AbsaOSS · Oct 4, 2023 · 70d5d9d · 70d5d9d
1 parent cb4617e
commit 70d5d9d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.html b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.html
@@ -1,4 +1,4 @@
-<cps-sidebar-menu [items]="items"></cps-sidebar-menu>
+<cps-sidebar-menu [items]="items" [exactRoutes]="true"></cps-sidebar-menu>
 
 <span class="desc"
   >Provide your app urls into sidebar menu items or into nested menu items to

diff --git a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html b/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html
@@ -8,7 +8,7 @@
       class="cps-sidebar-menu-item"
       [routerLink]="[item.url]"
       routerLinkActive="active"
-      [routerLinkActiveOptions]="{exact: true}"
+      [routerLinkActiveOptions]="{ exact: exactRoutes }"
       [ngClass]="{ disabled: item.disabled }">
       <cps-icon [icon]="item.icon" size="normal"> </cps-icon>
       <span

diff --git a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.ts b/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.ts
@@ -60,6 +60,7 @@ export type CpsSidebarMenuItem = {
 export class CpsSidebarMenuComponent implements OnInit {
   @Input() items: CpsSidebarMenuItem[] = [];
   @Input() isExpanded = true;
+  @Input() exactRoutes = false;
   @Input() height = '100%';
 
   @ViewChildren('popupMenu') allMenus?: QueryList<CpsMenuComponent>;
@@ -79,8 +80,10 @@ export class CpsSidebarMenuComponent implements OnInit {
 
   isActive(item: CpsSidebarMenuItem) {
     if (!item.items) return false;
-    const urls = item.items.map((i) => i.url);
-    return urls.includes(this._router.url);
+    const urls = item.items.filter((i) => i.url).map((i) => i.url) as string[];
+
+    if (this.exactRoutes) return urls.includes(this._router.url);
+    return urls.some((url) => this._router.url.includes(url));
   }
 
   toggleSidebar() {