Put the children of AppNavigationItem outside of the main item

[raimund-schluessler]

Originally created by @quentinguidee in #2572:

This change is necessary for #2571 (see why in action: #2571 (comment)). It puts AppNavigationItem's children out of the parent item, and displays them separately. This is the simplest implementation I found without recoding the entire AppNavigationItem. I'm open to ideas if you find something cleaner.

before.mov

after.mov

Important notes/questions to reviewers

• In the current implementation, a side effect is that it disables the ability to pass (like in the doc) class="active" directly to the AppNavigationItem. It seems like the only purpose of passing the class="active" directly is only for the example? The isActive property works fine and continues to push the blue background.

• As another side effect of this PR, when hovering a child, it doesn't display the hover background of the parent (as demonstrated in the screenshots). I can go back to the first one easily if needed. Just unsure if it was a bug or not.

[raimund-schluessler]

@GretaD I fixed some more issues (collapsing didn't work, children were not styled correctly, pinning was broken, see my commits). I would suggest you test it again with Mail, and ideally with Calendar as well, probably.
Some Apps will need adjustments of their CSS, see for example the necessary changes for Tasks in nextcloud/tasks#2007
So this will be a breaking change if we interpret it strictly.

[GretaD]

tested with mail and looks good, but i still have this on my code

[raimund-schluessler]

tested with mail and looks good, but i still have this on my code

Hm, no idea. Maybe this depends on the browser or how the app is compiled 🤔 When I use it in Tasks, it just creates a div as one would expect.

[GretaD]

let move on then, the component works fine on mail(i tested it) and on tasks(Raimund tested it)

[ChristophWurst]

Best reviewed as https://github.com/nextcloud/nextcloud-vue/pull/2704/files?w=1