Sidebar Nav Items are always expanded

[raydvard]

Having issue with sidebar nav-items, that all the nav-items are always expanded from the app starts, where can I configure this ?

Expected Result :

Current Situation :

[xidedix]

hi @raydvard please provide some more information about:

• your version of
  • @coreui/coreui-pro
  • @coreui/angular
  • angular-cli ng v
  • node.js
  • npm,
  • os
  • browser
• do you observe this issue for https://coreui.io/angular/demo ?
• screenshots show template default sidebar - have you made any changes to
  • src/app/app.routing.ts
  • src/app/_nav.ts
  • scss files
• what you see in DevTools for app-sidebar-nav-dropdown ( routerlinkactive? class? )
• any console warnings/errors?
• any build warnings/errors?
• have you tried to clear the browser cache?

[raydvard]

Hello @xidedix

My versions are

1. "@coreui/coreui": "^2.0.2"
2. "@coreui/angular": "^2.0.0-rc.1"
3. "@angular/core": "^6.0.5"
4. node.js - 10.13.0
5. npm - 6.4.1
6. Windows 10
7. Google Chrome, Mozilla Firefox (Latest)

do you observe this issue for https://coreui.io/angular/demo ? No, I am using the panel for one of my project and I am having this issue in my localhost.

screenshots show template default sidebar - have you made any changes to - Well, screenshots are from https://coreui.io/angular/demo just to demonstrate my issue, that my nav items are always expanded and yes I have changed according to my needs - src/app/app.routing.ts, src/app/_nav.ts but I have not changed any scss files

what you see in DevTools for app-sidebar-nav-dropdown ( routerlinkactive? class? ) My routerlinkactive values are always active or open and I have no app-sidebar-nav-dropdown This is what I see in DevTools > <app-sidebar class="sidebar"><app-sidebar-nav class="ps sidebar-nav ps--active-y" role="nav"><ul class="nav"><li class="nav-item ng-star-inserted"><a routerlinkactive="active" class="ng-star-inserted active nav-link" href="#/dashboard"><i class="nav-icon icon-speedometer ng-star-inserted"></i> Dashboard <li appnavdropdown="" routerlinkactive="open" class="nav-item nav-dropdown ng-star-inserted open"><a _ngcontent-c1="" appnavdropdowntoggle="" class="nav-link nav-dropdown-toggle"><i _ngcontent-c1="" class="nav-icon fa fa-shopping-bag ng-star-inserted"></i> Shop</a></ul><div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px; height: 430px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 171px;"></div></div></app-sidebar-nav><button appbrandminimizer="" appsidebarminimizer="" class="sidebar-minimizer" type="button"></button> </app-sidebar>

In angular side I have this for sidebar - `<app-sidebar [fixed]="true" [display]="'lg'"> <app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="sidebarMinimized">

`

any console warnings/errors? No

any build warnings/errors? No

have you tried to clear the browser cache? Yes

In which part should I look for to solve where this issue is related as I have said, I have edited with the content I want in menu the files of app.routing.ts and nav.ts , but to inform you from the very first install the nav items are always expanded for me.

Thanks in Advance !

[xidedix]

Hi @raydvard I've set up your config and cannot reproduce, but looks like the key info is this: from the very first install the nav items are always expanded for me Could you try with a fresh install on another machine to see what happens?

[raydvard]

Hello @xidedix , I am using this for a project over 5 months now, It has been grown with my project components and codes since first install, so I think even if in fresh install I don't face this issue that would not be helpful for me in this situation.

So, I am requesting here for a helping hand to narrow me down exactly where should I look for trying to solve this issue, in which parts through coreui code exactly that affects directly the functionality of expanding nav items. If it's a javascript / jquery problem or some coded settings in the template from where I can test things out.

I know there's thousands of lines of codes to look for because everything are related, but some concrete knowledge how coreui is constructing these sidebar and nav items menus would help me find some clues about the problem.

Thanks in Advance

[xidedix]

@raydvard files to check first:

• src/app/containers/default-layout/default-layout.component.html <app-sidebar>, <app-sidebar-nav>
• src/app/_nav.ts
• app.module - location strategy
• app.routing - routes array

[mjaime29]

I had a similar issue but was my fail, my issue was related with the routes, when I navigate to the dashboard I added an extra '/' in the route (example: account//:id/dashboard) and this cause the expanded menus, fixing that routes, I had the expected behavior

[opussan]

If i have a nav.ts setup like this,

{ name: 'Parent', url: '', icon: 'icon-puzzle', children: [ { name: 'Child Menu', url: '/url-to-child', icon: 'icon-flag' }, { name: 'Another Child', url: '/url-to-another-child', icon: 'icon-bulb' }, ] }

Notice the url in parent is empty, the menu is always expanded if its empty. But if I fill the url with something even if its a non existing path then the menu remains closed.

The url has no purpose in parent menu in my case, the parent menu is there only to visually group some children even if they are not related by route. But still I have to fill in some url just to collapse the menu.

[raydvard]

Have solved my issue by restructuring _nav.ts , some linking issue was causing the by default menu exapanded.

Closing this issue as solved.

[Sam-Butler]

What sort of restructuring solved your issue? I'm having the exact same issue you described, and have only a dashboard item, followed by a parent with one child. When I add another parent+child, it too is expanded. I have tried with and without a parent URL to no avail.

[Sam-Butler]

Nope, scratch that. Still interested, but it solved by putting in a URL value for the parent.

[estebanjb]

Hi! I have solved the issue by putting a sharp '#' in the URL field of the parent element;

export default { items: [ { name: 'Gestión', url: '#', icon: 'fa fa-cube', children: [ { name: 'Jornada', url: 'working-day', icon: 'fa fa-money' },

[niwkleber]

I'm having the same problem, but I noticed that it works if the parent has a hierarchy of child URLs.

It works: /test --/test/ts1 --/test/ts2

But in my case I can't maintain this pattern of URLs, is it possible to use a regex for this? Example:

/test-(ts1|ts2) --/test-ts1 --/test-ts2

[nddr]

Hi! I have solved the issue by putting a sharp '#' in the URL field of the parent element;

export default { items: [ { name: 'Gestión', url: '#', icon: 'fa fa-cube', children: [ { name: 'Jornada', url: 'working-day', icon: 'fa fa-money' },

Thank you, sir!

This should be in documentation.

[Mohammed-6]

Facing the same issue, solved by inserting some dummy links and its works. thanks for this information it got when i need.

[MedMokhtarAmmar]

Hi! I have solved the issue by putting a sharp '#' in the URL field of the parent element;

export default { items: [ { name: 'Gestión', url: '#', icon: 'fa fa-cube', children: [ { name: 'Jornada', url: 'working-day', icon: 'fa fa-money' },

thank you sir , but in my case I had to add just a space (url : " ")

[handel-batista]

For future readers, to make the Navbar automatically close and expand your active links, the base URL needs to match exactly with your route. For Example, if I have this route http://localhost:6500/parent/child, your export file should look like this

export default { items: [ { name: 'Any Name', url: '/parent', icon: 'fa fa-exchange', children: [ { name: 'Any Name', url: '/parent/child', icon: 'fa fa-arrow' }

[sscots]

For future readers, to make the Navbar automatically close and expand your active links, the base URL needs to match exactly with your route. For Example, if I have this route http://localhost:6500/parent/child, your export file should look like this

export default { items: [ { name: 'Any Name', url: '/parent', icon: 'fa fa-exchange', children: [ { name: 'Any Name', url: '/parent/child', icon: 'fa fa-arrow' }

Thanks, that worked for me

[vladimir-zarcanin]

Maybe help someone. I had similar issue, and it happens when href attribute is empty in li>a. If you set href as # or real url it will works perfect.