Get the possibility to have a sub-list

[zak39]

Hi everyone :wave:

As a web developer, I would like to add a sub-list to a NcAppNavigationItem component.

In fact, I would like to get an equivalent of this HTML code :

<ul>
  <li>Countries</li>
  <ul>
    <li>France</li>
    <ul>
      <li>Paris</li>
      <li>Roubaix</li>
    </ul>
    <li>Geremany</li>
    <ul>
      <li>Berlin</li>
      <li>Munich</li>
    </ul>
  </ul>
</ul>

Currently, it's not possible. Because, the NcAppNavigation component gives developers just one level of a <ul> html element.

We can write an equivalent to this code :

<NcAppNavigation>
 <template #list>
   <NcAppNavigationItem name="Countries" />
   <ul>
      <NcAppNavigationItem name="Paris" />
      <NcAppNavigationItem name="Roubaix" />
   </ul>
 </template>
</NcAppNavigation>

However, this requires to apply a custom css and it may break Nextcloud's flow design.

What do you think ?

[susnux]

This is already possible as NcAppNavigationItem allows children, see example:

https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationitem

"Element with children"

[zak39]

This is already possible as NcAppNavigationItem allows children, see example:

https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationitem

"Element with children"

Yes, but you get one level children and not more. Except if I'm wrong ?

Edit - November 4th, 2023

I can't to get more than one level with the example from the documentation :

<template>
		<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
			<template #icon>
				<Folder :size="20" />
			</template>
			<template #counter>
				<NcCounterBubble>
					99+
				</NcCounterBubble>
			</template>
			<template #actions>
				<NcActionButton @click="alert('Edit')">
					<template #icon>
						<Pencil :size="20" />
					</template>
					Edit
				</NcActionButton>
				<NcActionButton @click="alert('Delete')">
					<template #icon>
						<Delete :size="20" />
					</template>
					Delete
				</NcActionButton>
				<NcActionLink name="Link" href="https://nextcloud.com">
					<template #icon>
						<OpenInNew :size="20" />
					</template>
				</NcActionLink>
			</template>
			<template>
				<NcAppNavigationItem name="AppNavigationItemChild1">
				  <template>
          				  <NcAppNavigationItem name="AppNavigationItemChild1-1">
          				  </NcAppNavigationItem>
				  </template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="AppNavigationItemChild2" />
				<NcAppNavigationItem name="AppNavigationItemChild3" />
				<NcAppNavigationItem name="AppNavigationItemChild4" />
			</template>
		</NcAppNavigationItem>
	</template>
	<script>
	import Folder from 'vue-material-design-icons/Folder'
	import Delete from 'vue-material-design-icons/Delete'
	import OpenInNew from 'vue-material-design-icons/OpenInNew'
	import Pencil from 'vue-material-design-icons/Pencil'

	export default {
		components: {
			Folder,
			Delete,
			OpenInNew,
			Pencil,
		},
	}
	</script>

Edit - November, 7th 2023

I saw that the padding-left is still 16px. So, it's impossible to have a multiple level NcAppNavigationItem ?

The padding-left rule : https://github.com/nextcloud-libraries/nextcloud-vue/blob/1c2f926107725244a17b7d152163e5508ac76990/src/components/NcAppNavigationItem/NcAppNavigationItem.vue#L897C18-L897C27

The icon-size variable : https://github.com/nextcloud-libraries/nextcloud-vue/blob/7795cfd82358c35f6af75726642a24d18c23cd73/src/assets/variables.scss#L30

I create this gist as a draw : https://gist.github.com/zak39/1e2ddb4ca768e25743c606b24dae0101

The idea here is to declare a new props which is level and use the calc function in the css to define a step level.

props {
  /**
* code...
*/
		/**
		 * The step level of the components
		 */
		level: {
			type: Number,
			default: 1,
		},
	},
}

/* Second level nesting for lists */
.app-navigation-entry__children {
	position: relative;
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	width: 100%;
	gap: var(--default-grid-baseline, 4px);

	.app-navigation-entry {
		display: inline-flex;
		flex-wrap: wrap;
		padding-left: calc(($icon-size - 8px) + (8px * $level));
	}
}

What do you think @susnux ?

Knowing that it's possibile with Vue3 : https://learnvue.co/articles/reactive-styles-vue-3 .

[susnux]

Do you have a use case for more than one level nesting? I am curious because nesting more than one level in the app navigation seems to me not a good UX.

[zak39]

Do you have a use case for more than one level nesting? I am curious because nesting more than one level in the app navigation seems to me not a good UX.

Yes of course !

I have this mockup made by a UX colleague :

The idea is that "Project cloud", "Workspace Groups" ("Groupes Workspace" in french) and "Connected Groups" ("Groupes Connectés" in french) are NcAppNavigationItem.

However, "Workspace groups" and "Connected Groups" could be NcAppNavigationCaption (?)

I am curious because nesting more than one level in the app navigation seems to me not a good UX.

It depends on the case. In the left sidebar, I agree with you on this point. But, if it's in the main content or in a modal window, it could make sense.

[susnux]

It depends on the case. In the left sidebar, I agree with you on this point.

Yes but that is what NcAppNavigation* is about

But, if it's in the main content or in a modal window, it could make sense.

I do not think you should use NcAppNaviation* in such cases but NcListItem or similiar?

---

cc @jancborchardt as this probably is a design decision.

[jancborchardt]

We habe this one-subfolder level in Files for "Shares", is that not a component?

[susnux]

@jancborchardt yes but this is about arbitrary levels, e.g. "Shares -> Shared by you -> shared to XY -> list of shares".