From 57c9810f46b0f77f7d813535f201b91f05d0d801 Mon Sep 17 00:00:00 2001
From: Simon L <szaimen@e.mail.de>
Date: Wed, 17 May 2023 13:54:02 +0200
Subject: [PATCH 1/4] fix toggle overlapping other stuff

Signed-off-by: Simon L <szaimen@e.mail.de>
---
 .../NcAppNavigationItem/NcAppNavigationIconCollapsible.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
index ae45f329ee..eaf9298103 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
@@ -78,7 +78,7 @@ export default {
 
 <style lang="scss" scoped>
 .button-vue.icon-collapse {
-	position: absolute;
+	position: relative;
 	z-index: 105; // above a, under button
 	color: var(--color-main-text);
 	right: 0;

From 4f0b7a8f5deb055de2ec75edfc02bfb4addc7f37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Wed, 17 May 2023 16:33:52 +0200
Subject: [PATCH 2/4] Show collapse button on the right
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .../NcAppNavigationItem.vue                   | 71 +++++++++++++++----
 1 file changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index a40c076775..81b8f49eb7 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -137,15 +137,59 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
 Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or
 prevent the user from collapsing the items.
 
-```
-<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
+```vue
 	<template>
-		<NcAppNavigationItem name="AppNavigationItemChild1" />
-		<NcAppNavigationItem name="AppNavigationItemChild2" />
-		<NcAppNavigationItem name="AppNavigationItemChild3" />
-		<NcAppNavigationItem name="AppNavigationItemChild4" />
+		<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" />
+				<NcAppNavigationItem name="AppNavigationItemChild2" />
+				<NcAppNavigationItem name="AppNavigationItemChild3" />
+				<NcAppNavigationItem name="AppNavigationItemChild4" />
+			</template>
+		</NcAppNavigationItem>
 	</template>
-</NcAppNavigationItem>
+	<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>	
 ```
 
 ### Editable element
@@ -253,7 +297,6 @@ Just set the `pinned` prop.
 					</div>
 				</a>
 
-				<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
 				<!-- undo entry -->
 				<div v-if="undo" class="app-navigation-entry__deleted">
 					<div class="app-navigation-entry__deleted-description">
@@ -302,6 +345,7 @@ Just set the `pinned` prop.
 						<slot name="actions" />
 					</NcActions>
 				</div>
+				<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
 
 				<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
 				<slot name="extra" />
@@ -878,11 +922,12 @@ export default {
 }
 
 /* Makes the icon of the collapsible element disappear
-*  When hovering on the root element */
+ * When hovering on the root element
+ */
 .app-navigation-entry--collapsible {
-	//shows the triangle button
+	// hides the triangle button
 	.icon-collapse {
-		visibility: hidden;
+		display: none;
 	}
 	&.app-navigation-entry--no-icon,
 	&:hover, &:focus {
@@ -890,8 +935,8 @@ export default {
 			visibility: visible;
 		}
 		.icon-collapse {
-			//shows the triangle button
-			visibility: visible;
+			// shows the triangle button
+			display: initial;
 		}
 		// prevent the icon of children elements from being hidden
 		// by the previous rule

From 57004567b1b4daa63b48aea46bf896fa952f117c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Fri, 19 May 2023 18:59:26 +0200
Subject: [PATCH 3/4] Fix lint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/NcAppNavigationItem/NcAppNavigationItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 81b8f49eb7..41f70902ec 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -166,7 +166,7 @@ prevent the user from collapsing the items.
 						<OpenInNew :size="20" />
 					</template>
 				</NcActionLink>
-			</template>		
+			</template>
 			<template>
 				<NcAppNavigationItem name="AppNavigationItemChild1" />
 				<NcAppNavigationItem name="AppNavigationItemChild2" />
@@ -189,7 +189,7 @@ prevent the user from collapsing the items.
 			Pencil,
 		},
 	}
-	</script>	
+	</script>
 ```
 
 ### Editable element

From fb7419b7abdf68c3060fd05e54da5b0ec0cc2096 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Fri, 19 May 2023 18:59:58 +0200
Subject: [PATCH 4/4] Use Chevron up/down for NcAppNavigationCollapsible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .../NcAppNavigationIconCollapsible.vue                    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
index eaf9298103..f41f219efc 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
@@ -28,9 +28,9 @@
 		:aria-label="labelButton"
 		@click="onClick">
 		<template #icon>
-			<ChevronDown v-if="open"
+			<ChevronUp v-if="open"
 				:size="20" />
-			<ChevronRight v-else
+			<ChevronDown v-else
 				:size="20" />
 		</template>
 	</NcButton>
@@ -40,16 +40,16 @@
 import NcButton from '../NcButton/index.js'
 import { t } from '../../l10n.js'
 
-import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 
 export default {
 	name: 'NcAppNavigationIconCollapsible',
 
 	components: {
 		NcButton,
-		ChevronRight,
 		ChevronDown,
+		ChevronUp,
 	},
 
 	props: {