Sidebar Collapse all on click

[kernle27]

Hejoo,

A Question is this a Bug or did i somenthing wrong?
If i Click in Sidebar on an Child he Complete Links are Collapse to "close" State.
How can i avoid that ?

Hope you can help me.

Thanks

[xidedix]

@kernle27 I'm not sure what you mean by"Complete Links".

As far as understand c-sidebar-nav-group closes when you click on its child c-sidebar-nav-link.
It works this way if the url prop of a group does not match the url prop of its active child, say:

// non matching url of Base - group closes always
export const navItems: INavData[] = [
  {
    name: 'Base',
    url: '/non-matching-url',
    iconComponent: { name: 'cil-puzzle' },
    children: [
      {
        name: 'Accordion',
        url: '/base/accordion'
      },
...

// matching url of Base - group should stay open
export const navItems: INavData[] = [
  {
    name: 'Base',
    url: '/base',
    iconComponent: { name: 'cil-puzzle' },
    children: [
      {
        name: 'Accordion',
        url: '/base/accordion'
      },
...

[kernle27]

Hej @xidedix,

Thanks for your fast response.
so what i can tell i have this settings like u see the Picture.
And now if i click on an child navitem under a parent all childs collapses to the closed state.
I also tryed without the slash and with the slashes all the same.

[xidedix]

@kernle27 cannot reproduce...

1. what happens if you try an url with a starting slash like:

• /admin
• /admin/belegauswertung

export const navItems: INavData[] = [
  {
    name: 'Auswertungen',
    url: '/admin',
    iconComponent: { name: 'cilMenu' },
    children: [
      {
        name: 'Belegauswertung',
        url: '/admin/belegauswertung'
      },
      ...

2. Is /admin at the first level of your sidebar-nav menu?
3. What do you see at the address bar of your web browser for Belegauswertung? It should be http://localhost:4200/#/admin/belegauswertung or http://localhost:4200/admin/belegauswertung
4. What's your version of @coreui/angular?

[kernle27]

@xidedix
i have an emty routing module before so the full url = dbonapp/admin/....

Did you think thats the Problem? Hope is possible in some way that i can keep this emty Route before

[xidedix]

@kernle27 so maybe you could try like this?

export const navItems: INavData[] = [
  {
    name: 'Auswertungen',
    url: '/dbonapp/admin',
    iconComponent: { name: 'cilMenu' },
    children: [
      {
        name: 'Belegauswertung',
        url: '/dbonapp/admin/belegauswertung'
      },
      ...

[kernle27]

@xidedix
you are great men 😉 it works!!!
But now the sidebar after the login all childs are expanded .

[xidedix]

@kernle27 well, they are expanded, because they all match an active route... huh... 🤔

[kernle27]

@xidedix well, make sense ;) in this case i think i need to rethink my handling.
we have different products...
and the Backend give me the product from the user back.. according to that the (first emty) route will be active...
looks like i need a different solution for handling the different products.
any idea to make it better?

[xidedix]

@kernle27

• if you'd prefer to keep your current routing, you may opt to use dropdownMode="none" as a temp workaround - it prevents any automatic open/close actions on sidebar-nav-group

<c-sidebar-nav
  [navItems]="navItems"
  dropdownMode="none">
</c-sidebar-nav>

We're considering a kind of patch to cover your use case.

[kernle27]

Hej @xidedix ,
I have done it already i have a emty route with different urls after admin. Now it works like a charm... If this is a good solution is questionable.. but so far it works for me. I will give ur tip a chance and see what is working better.

Btw sorry for my bad english and thanks for your Help i appreciate it

[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