fix(NcAppNavigationItem): multi level padding

[GretaD]

☑️ Resolves

• Fix Sub mailboxes leveling indentation is off nextcloud/mail#11037

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• Files have custom styling. https://github.com/nextcloud/server/blob/master/apps/files/src/components/FilesNavigationItem.vue#L100
  Check with them so they are aware this is fixed here.

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[GretaD]

/backport! to stable8

[ShGKme]

The level should be limited (or add scrolling), otherwise there is no place for deep nested items.

[ShGKme]

Same as the next line, it should be -inline-start to support RTL

[GretaD]

i changed this to 10px, instead of 16px (icon-size), because the indentation is unnecessarily large.

[ShGKme]

The level should be limited (or add scrolling), otherwise there is no place for deep nested items.

[susnux]

The level should be limited (or add scrolling), otherwise there is no place for deep nested items.

I do not remember where but I think we had discussed this for files someday and designers mentioned a cap of 3rd level.

[ShGKme]

I do not remember where but I think we had discussed this for files someday and designers mentioned a cap of 3rd level.

Or 7th?

https://github.com/nextcloud/server/blob/1b72ddd8c8aa187a6723a93575643a96f9191387/apps/files/src/components/FilesNavigationItem.vue#L51

[ShGKme]

Proposals for nesting limit:

1. CSS solution - use CSS variable for the padding and reset it on a specific level

.app-navigation-entry__children {
  & & & & & & & {
    --app-navigation-item-child-offset: 0;
  }
}

2. Vue solution - provide depth and set class depending on the depth:

const depth = inject('NcAppNavigationItem:depth', 0) + 1
provide('NcAppNavigationItem:depth', depth)