Open zak39 opened 11 months ago
This is already possible as NcAppNavigationItem
allows children, see example:
"Element with children"
This is already possible as
NcAppNavigationItem
allows children, see example:"Element with children"
Yes, but you get one level children and not more. Except if I'm wrong ?
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>
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 .
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.
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.
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.
We habe this one-subfolder level in Files for "Shares", is that not a component?
@jancborchardt yes but this is about arbitrary levels, e.g. "Shares -> Shared by you -> shared to XY -> list of shares".
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 :
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 :
However, this requires to apply a custom css and it may break Nextcloud's flow design.
What do you think ?