NC 14 app navigation design: active class and nested lists

[marcelklehr]

Perhaps I'm doing something wrong, perhaps the .active class is no longer supported, but when hovering over a a nested item with an active class, this happens:

[marcelklehr]

Also note that the nested entries are actually 57px in height, instead of 44px like the rest.

[weeman1337]

@marcelklehr it's only inside the bookmarks app, right?

For me it's working with the NC14 release and bookmarks 0.13.0:

Could you please check whether there is an update for the bookmarks app available for you?

[marcelklehr]

I'm a maintainer of the bookmarks app and was working on a new feature when I discovered this. :)

[weeman1337]

@marcelklehr oh okay :) Which version of the bookmarks app are you using then?

[marcelklehr]

I haven't pushed the code, yet. But basically it looks like this:

<ul>
<li class="collapsible open active">
<a href="#" class="icon-tag" title="tags">tags</a>
<ul>
   <li class="active" id="bar">
   <a href="#" title="bar">bar</a>
   </li>
   <li id="baz">
   <a href="#" title="baz">baz</a>
   </li>
</ul>
</li>
</ul>

I was able to find the cause of the faulty height, now. I had added a span inside the a tags.

The only problem left now, is that it's nearly impossible to tell, which sub item of "tags" is active, because (as seen in the screenshots below) the active ribbons for the parent and the sub item overlap

In case the active class is removed from the parent menu item to remedy this, the hover effect for the child item becomes sub-optimal:

(Note, the grey background is an artifact specific to the bookmarks app.)

[weeman1337]

@marcelklehr I would be happy to help. If you push a branch I can have a look.

Otherwise you may look at the files app where everything is working.

[marcelklehr]

The files app doesn't have nested navigation, afaik, but here's the pull request with the nested navigation nextcloud/bookmarks#560 :)

[marcelklehr]

I guess this can be closed, now, as I opted to add the active class to all items that have the open class, so this is no longer a problem for me. I'm not sure if this solution is what was originally intended but it works for me :)