From cb5e6e2c3cc8812336463069769cb32f7679712a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sat, 23 Dec 2023 10:51:41 +0100
Subject: [PATCH 1/4] fix(NcAppNavigationItem): fix styling when using active
 prop
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 50e9e3eed6..33547d57d3 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -298,7 +298,7 @@ Just set the `pinned` prop.
 						<NcInputConfirmCancel ref="editingInput"
 							v-model="editingValue"
 							:placeholder="editPlaceholder !== '' ? editPlaceholder : name"
-							:primary="isActive && to"
+							:primary="(isActive && to) || active"
 							@cancel="cancelEditing"
 							@confirm="handleEditingDone" />
 					</div>
@@ -328,7 +328,7 @@ Just set the `pinned` prop.
 						:boundaries-element="actionsBoundariesElement"
 						:placement="menuPlacement"
 						:open="menuOpen"
-						:type="isActive && to ? 'primary' : null"
+						:type="(isActive && to) || active ? 'primary' : null"
 						:force-menu="forceMenu"
 						:default-icon="menuIcon"
 						@update:open="onMenuToggle">

From 22fb60f54e375f8620fc753dbbd43195daf51a87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sat, 23 Dec 2023 10:53:07 +0100
Subject: [PATCH 2/4] fix(NcAppNavigationItem): remove unused CSS class
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/assets/NcAppNavigationItem.scss | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
index 79dbfcc6c6..985bc87962 100644
--- a/src/assets/NcAppNavigationItem.scss
+++ b/src/assets/NcAppNavigationItem.scss
@@ -34,7 +34,7 @@
 		}
 
 		// overwrite active text color
-		.app-navigation-entry-link, .app-navigation-entry-button {
+		.app-navigation-entry-link {
 			color: var(--color-primary-element-text) !important;
 		}
 	}
@@ -68,14 +68,12 @@
 		display: none;
 	}
 
-	&:not(.app-navigation-entry--editing) {
-		.app-navigation-entry-link, .app-navigation-entry-button {
-			padding-right: $icon-margin;
-		}
+	&:not(.app-navigation-entry--editing) .app-navigation-entry-link {
+		padding-right: $icon-margin;
 	}
 
 	// Main entry link
-	.app-navigation-entry-link, .app-navigation-entry-button {
+	.app-navigation-entry-link {
 		z-index: 100; /* above the bullet to allow click*/
 		display: flex;
 		overflow: hidden;

From 3378be11beb0000a85ba5a03108b3f6fbdac7f50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sat, 23 Dec 2023 10:57:26 +0100
Subject: [PATCH 3/4] fix(NcAppNavigationItem): fix HTML structure of docs
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>
---
 .../NcAppNavigationCaption.vue                |   8 +-
 .../NcAppNavigationItem.vue                   | 195 ++++++++++--------
 2 files changed, 112 insertions(+), 91 deletions(-)

diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
index 9fbdd26d54..75eb16a2cd 100644
--- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
+++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -1,7 +1,7 @@
 <docs>
 ```vue
 	<template>
-		<ul>
+		<ul class="nav">
 			<NcAppNavigationCaption
 				name="Your caption goes here">
 				<template #actions>
@@ -26,7 +26,7 @@
 	</script>
 	<style scoped>
 		/* mock the appnavigation */
-		ul {
+		ul.nav {
 			background-color: #cce6f4;
 		}
 	</style>
@@ -35,7 +35,7 @@
 ### Element with a slot for custom actions icon
 ```vue
 	<template>
-		<ul>
+		<ul class="nav">
 			<NcAppNavigationCaption
 				name="Your caption goes here">
 				<template #actionsTriggerIcon>
@@ -89,7 +89,7 @@
 	</script>
 	<style scoped>
 		/* mock the appnavigation */
-		ul {
+		ul.nav {
 			background-color: #cce6f4;
 		}
 	</style>
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 33547d57d3..00a05f079d 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -33,11 +33,13 @@
 
 ```vue
 	<template>
-		<NcAppNavigationItem name="My name">
-			<template #icon>
-				<Check :size="20" />
-			</template>
-		</NcAppNavigationItem>
+		<ul>
+			<NcAppNavigationItem name="My name">
+				<template #icon>
+					<Check :size="20" />
+				</template>
+			</NcAppNavigationItem>
+		</ul>
 	</template>
 	<script>
 	import Check from 'vue-material-design-icons/Check'
@@ -52,12 +54,16 @@
 * With a spinning loader instead of the icon:
 
 ```vue
-<NcAppNavigationItem name="Loading Item" :loading="true" />
+<ul>
+	<NcAppNavigationItem name="Loading Item" :loading="true" />
+</ul>
 ```
 * With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)
 
 ```vue
+<ul>
 	<NcAppNavigationItem name="Current page" :active="true" />
+</ul>
 ```
 
 ### Element with actions
@@ -67,30 +73,32 @@ button will be automatically created.
 ```vue
 	<template>
 		<div id="app-navigation-vue"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->
-			<NcAppNavigationItem name="Item with actions">
-				<template #icon>
-					<Check :size="20" />
-				</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>
-			</NcAppNavigationItem>
+			<ul>
+				<NcAppNavigationItem name="Item with actions">
+					<template #icon>
+						<Check :size="20" />
+					</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>
+				</NcAppNavigationItem>
+			</ul>
 		</div>
 	</template>
 	<script>
@@ -115,16 +123,18 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
 
 ```vue
 	<template>
-		<NcAppNavigationItem name="Item with counter">
-			<template #icon>
-				<Folder :size="20" />
-			</template>
-			<template #counter>
-				<NcCounterBubble>
-					99+
-				</NcCounterBubble>
-			</template>
-		</NcAppNavigationItem>
+		<ul>
+			<NcAppNavigationItem name="Item with counter">
+				<template #icon>
+					<Folder :size="20" />
+				</template>
+				<template #counter>
+					<NcCounterBubble>
+						99+
+					</NcCounterBubble>
+				</template>
+			</NcAppNavigationItem>
+		</ul>
 	</template>
 	<script>
 	import Folder from 'vue-material-design-icons/Folder'
@@ -144,41 +154,43 @@ prevent the user from collapsing the items.
 
 ```vue
 	<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" />
-				<NcAppNavigationItem name="AppNavigationItemChild2" />
-				<NcAppNavigationItem name="AppNavigationItemChild3" />
-				<NcAppNavigationItem name="AppNavigationItemChild4" />
-			</template>
-		</NcAppNavigationItem>
+		<ul>
+			<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>
+		</ul>
 	</template>
 	<script>
 	import Folder from 'vue-material-design-icons/Folder'
@@ -203,12 +215,14 @@ the placeholder is the previous name of the element.
 
 ```vue
 	<template>
-		<NcAppNavigationItem name="Editable Item" :editable="true"
-			editPlaceholder="your_placeholder_here" @update:name="function(value){alert(value)}">
-			<template #icon>
-				<Folder :size="20" />
-			</template>
-		</NcAppNavigationItem>
+		<ul>
+			<NcAppNavigationItem name="Editable Item" :editable="true"
+				editPlaceholder="your_placeholder_here" @update:name="function(value){alert(value)}">
+				<template #icon>
+					<Folder :size="20" />
+				</template>
+			</NcAppNavigationItem>
+		</ul>
 	</template>
 	<script>
 	import Folder from 'vue-material-design-icons/Folder'
@@ -225,28 +239,35 @@ the placeholder is the previous name of the element.
 Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.
 
 ```
-<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')"  />
-
+<ul>
+	<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')"  />
+</ul>
 ```
 
 ### Link element
 Href that start by http will be treated as external and opened in a new tab
 ```
 <div>
-	<NcAppNavigationItem name="Files" href="/index.php/apps/files" />
-	<NcAppNavigationItem name="Nextcloud" href="https://nextcloud.com" />
+	<ul>
+		<NcAppNavigationItem name="Files" href="/index.php/apps/files" />
+		<NcAppNavigationItem name="Nextcloud" href="https://nextcloud.com" />
+	</ul>
 </div>
 ```
 
 ### Custom title
 ```
-<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
+<ul>
+	<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
+</ul>
 ```
 
 ### Pinned element
 Just set the `pinned` prop.
 ```
-<NcAppNavigationItem name="Pinned item" :pinned="true" />
+<ul>
+	<NcAppNavigationItem name="Pinned item" :pinned="true" />
+</ul>
 ```
 </docs>
 

From 194e3ad09048b4b8569fa0c5a3278cdbfcfcba7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sat, 23 Dec 2023 11:01:30 +0100
Subject: [PATCH 4/4] fix(NcAppNavigationItem): adjust tests to cover active
 prop
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>
---
 ...em-primary-on-active-entry-menu-active.png | Bin 0 -> 4246 bytes
 ...NavigationItem-primary-on-active-entry.png | Bin 0 -> 2409 bytes
 ...vigationItem-tertiary-non-active-entry.png | Bin 0 -> 801 bytes
 cypress/visual/AppNavigationItem.cy.ts        |  23 +++++++++++++++++-
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png
 create mode 100644 cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png
 create mode 100644 cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png

diff --git a/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3d11a4ac49951ec6478a296ca9de812a1a40bc7
GIT binary patch
literal 4246
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
GLjMD>OA15)

literal 0
HcmV?d00001

diff --git a/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d4cdf5428266a8a8a9c2ab6b58793be68106051
GIT binary patch
literal 2409
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
b)W&}RD=aU}1z>)f00000NkvXXu0mjfA|b0B

literal 0
HcmV?d00001

diff --git a/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad36205d68c1e6dda43debfb61ffb04390475cf2
GIT binary patch
literal 801
zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!bvW37<bAHzgA5EzFFaiwLn;{G9@O>7PGmU#
zaQ^#c!fovv)wtPmnJ@G3@njirNX>Cf|IEBBb;mY^bt?~U$lRdy;y{AYkH%0z7WO3J
z7S)-h=~Z)ff7j!Av;ED~|DQ|#{A3pt<d$%8(Mc2#+}PsiazuztP|%wM0eSAXZ{8FX
z6gYS*2rO8?zQ47Vb<#-{rBBvBH-?0Vi~s)p+hpgu(_g=uN=r+#Ffj^svM7D}{bS>l
z^UsrWa(bqnJn1=a-n<<<b|_5r_+W2mXZPaWJ2#hG-SguYEndugyl}<!*IV}N-Mex3
z?$dAI>Q41)^-wu<<_wRvw)T%2yIFDZ@sjfL>hsSRmz5p6dslYx;>99dtS(FT{@56?
zHEQX~u+@c?m7Xg@lCrbAr+xokUR70fB5kup-{I4zxm%qWua}-oG5Ry*^iz-Jm!A|_
z?%TIdVB)vO$Ah*;^&ULvSQix)l~h(XZCZwjmx<I;Rk?m)9=4nJ?x{^a`Qh@FD<Ypi
zf9~-3{V92+gTjG_4;6jqJ^%RQ$BBFQ<Q4{WglM^XZ;V(Hp%bJxy)bsV+hWJPam%CD
z3h}UIO3KLrJvdw5TQa%hXwsG=j|*e2tIj_^*+;EVrhW2cVKZ}c&*hhSczFf6S}Q6l
z6lS0O^z)~ufy5G389rsDw`V_efBF9Xai!eTqM6G+e=c6Oe7Wb+pd(3!Y;0@>#}t&x
zjQ%K{KY!lj>$h*0p6t@=d;H<@)vKaPN$U2~e*OFR?Afz6wez1frh3W9${HFPI$Fpq
z)0FEkuB!4<ny4VuSx{4R=I>uyu<}nf{ZF5!&a$$$?sQSo(bL<sYnRvQTeqZuk+5^8
wrBpAQva&KT)UI8>E-3h$3MmPe`2MgyS$v(LdUJIiFzGXRy85}Sb4q9e07m0njsO4v

literal 0
HcmV?d00001

diff --git a/cypress/visual/AppNavigationItem.cy.ts b/cypress/visual/AppNavigationItem.cy.ts
index 893ac589fb..7f10f036b2 100644
--- a/cypress/visual/AppNavigationItem.cy.ts
+++ b/cypress/visual/AppNavigationItem.cy.ts
@@ -7,7 +7,13 @@ import NcAppNavigationItem from '../../src/components/NcAppNavigationItem/NcAppN
 describe('NcAppNavigationItem', () => {
 	describe('With router link', () => {
 		const RouterComponent = defineComponent({
-			template: '<div style="width: 300px; background: white;"><NcAppNavigationItem name="Home" to="/" :editable="true" /><NcAppNavigationItem name="Foo" to="/foo" :editable="true" /></div>',
+			template: `
+			<div style="width: 300px; background: white;">
+				<NcAppNavigationItem name="Home" to="/" :editable="true" />
+				<NcAppNavigationItem name="Foo" to="/foo" :editable="true" />
+				<NcAppNavigationItem name="Back" active :editable="true" />
+				<NcAppNavigationItem name="Bar" :editable="true" />
+			</div>`,
 			components: { NcAppNavigationItem },
 		})
 
@@ -41,5 +47,20 @@ describe('NcAppNavigationItem', () => {
 			cy.contains('.app-navigation-entry', 'Home').find('.app-navigation-entry__actions').click()
 			cy.get('.app-navigation-entry--editing').compareSnapshot('NcAppNavigationItem-primary-on-active-route-menu-active')
 		})
+
+		// Entries without router
+
+		it('has tertiary styling on non active entry', () => {
+			cy.contains('.app-navigation-entry', 'Bar').compareSnapshot('NcAppNavigationItem-tertiary-non-active-entry')
+		})
+
+		it('has primary styling on active entry', () => {
+			cy.contains('.app-navigation-entry', 'Back').compareSnapshot('NcAppNavigationItem-primary-on-active-entry')
+		})
+
+		it('has primary button styling on active entry with editing=true', () => {
+			cy.contains('.app-navigation-entry', 'Back').find('.app-navigation-entry__actions').click()
+			cy.get('.app-navigation-entry--editing').compareSnapshot('NcAppNavigationItem-primary-on-active-entry-menu-active')
+		})
 	})
 })