SidebarNavHelper.isActive should check child items for dropdowns

[maxtacco]

Hi,

I have a case when urls of child items do not start with the same path as parent's url. In this scenario item selection is not working as expected. So, is it possible to change SidebarNavHelper.isActive to something like this:

public isActive(router, item) {
    const url = item.url;
    if (this.itemType(item) === 'dropdown') {
      if (url === '' || url === '#') {
        return item.children.some((childItem: any) => this.isActive(router, childItem));
      } else {
        return router.isActive(url, false);
      }
    } else {
      return router.isActive(url, true);
    }
  }

[kafo85]

Hello,
I had the same problem, but in my case i don't have url in the parent item.

So i use this code as modification :

export class AppSidebarNavHelper extends ɵq {

    constructor() {
        super();
    }
    public isActive(router, item) {
        const url = item.url;
        if (this.itemType(item) === 'dropdown') {
            return item.children.some((childItem: any) => this.isActive(router, childItem));
        } else {
            return router.isActive(url, true);
        }
    }
}

And in the "app.module.ts":

AppSidebarNavHelper,
    {
      provide: ɵq,//SidebarNavHelper
      useClass: AppSidebarNavHelper
    }

[WolfgangVonL]

Hi @kafo85

I'm trying to implement your solution but I'm facing some issues. Note that I installed coreui through npm.

import { eq } from '@coreui/angular';

export class AppSidebarNavHelper extends ɵq {  
    constructor() {
        super();
    }
    public isActive(router, item) {
        const url = item.url;
        if (this.itemType(item) === 'dropdown') {
            return item.children.some((childItem: any) => this.isActive(router, childItem));
        } else {
            return router.isActive(url, true);
        }
    }
}

@NgModule({
...
    providers: [
        AppSidebarNavHelper,
        {
            provide: ɵq,//SidebarNavHelper
            useClass: AppSidebarNavHelper
        } 
    ]
})

But I get the following error:

export 'eq' was not found in '@coreui/angular'

I have been using Angular recently so I guess I missed something...
Could you explain me how you managed to extend the coreui SidebarNavHelper ?

Thanks

[xidedix]

@WolfgangVonL
it is ɵ Latin small letter barred o (U+0275) not e

Unfortunately, it is not safe since the name ɵq can change with every build of @coreui/angular

Any class members prefixed with barred latin o (ɵ), double-barred latin o (ɵɵ), underscore (_) or symbols marked as private are not considered to be a public API surface.

[WolfgangVonL]

OK...
I was taught not to foolishly copy and paste but to rewrite to understand what I was doing ! Haha

Anyway, many thanks @xidedix !

[xidedix]

@WolfgangVonL @kafo85

v2.7.4 adds SidebarNavHelper to the public-api surface, you can safely:

• import

import { SidebarNavHelper } from '@coreui/angular';

• extend

export class AppSidebarNavHelper extends SidebarNavHelper {
  ...
}

[WolfgangVonL]

Thanks @xidedix !

Is it also possible to extend directive from source code ?

When opening a sidebar nav dropdown, I'd like to close the others but I can't do that from SidebarNavHelper.
I've found the directive (NavDropdrownDirective) which deals with the "open" class and I would to extend it to owerwrite the toggle function with:

let children = this.el.nativeElement.parentNode.children
for(let i=0; i < children.length; i++){
    children[i].classList.remove('open')
}
this.el.nativeElement.classList.toggle('open')

My code is working but I can't overwrite the Directive. I've tried that

@Directive({
    selector: '[appNavDropdown]
})
class AppNavDropdownDirective extend ɵx {
    private _el;
    constructor(_el: ElementRef){
        super(_el)
    }
    toggle(){
        ... my code...
    }
}

@NgModule({
    declarations: [
        AppNavDropdownDirective 
    ]
})

No errors but my directive « extension » doesn’t seem to be fired.

[kriefsacha]

Please i have an error "Property 'itemType' does not exist on type 'AppSidebarNavHelper'. What is this.itemType ??

[kriefsacha]

@xidedix also after your comment i have an error :

"Module not found: Error: Can't resolve '@coreui/angular/lib/sidebar/app-sidebar-nav.service' in '....'"

[xidedix]

@kriefsacha what's your version of @coreui/angular?

[kriefsacha]

@xidedix 2.7.4

[xidedix]

@WolfgangVonL

Is it also possible to extend directive from source code?

I am afraid it's not possible for directives (afaik).

[WolfgangVonL]

Thanks @xidedix

Do you think of another way to do that properly ?

Or is there any chance that in a future release this feature would be directly implemented in @coreui/angular ?

[xidedix]

@WolfgangVonL

This feature will be available as an option in the upcoming CoreUI v3 for Angular.

[kriefsacha]

Do we know when the v3 will be out ? And how do we update from v2 to v3 ?

[kafo85]

Since V4, it's working without extending "SidebarNavHelper"

For me, you can close this issue...

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions