feat: change NcAppNavigationItem/NcListItem active state design and NcAppContent edge style on Nextcloud 34+ by nfebe · Pull Request #8448 · nextcloud-libraries/nextcloud-vue

nfebe · 2026-04-21T00:41:31Z

Before	After

Screencast

Screencast.From.2026-04-24.20-31-16.webm

Closes #7222

codecov · 2026-04-21T00:44:54Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.57%. Comparing base (d66bbf6) to head (377667a).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8448      +/-   ##
==========================================
+ Coverage   54.55%   54.57%   +0.02%     
==========================================
  Files         106      106              
  Lines        3439     3441       +2     
  Branches     1002     1003       +1     
==========================================
+ Hits         1876     1878       +2     
  Misses       1322     1322              
  Partials      241      241

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ShGKme · 2026-04-27T07:55:11Z

Counter in the NcListItem is not contrast anymore.

And, if I got the plan correctly, NcListItem was supposed to have the same new design for selected (active) items, wasn't it?

ShGKme · 2026-04-27T07:55:34Z

What about buttons?

ShGKme · 2026-04-27T07:57:39Z

+	@media only screen and (min-width: $breakpoint-mobile) {
+		border-inline-start: 1px solid var(--color-border);
+		border-start-start-radius: var(--body-container-radius);
+		border-end-start-radius: var(--body-container-radius);
+	}


The border is visible even on the close navigation, and even when there is no navigation at all.

Also, the color is different on the draft

The border is visible even on the close navigation, and even when there is no navigation at all.

This part is now fixed

ShGKme · 2026-04-27T08:02:59Z

It looks a bit different from the design draft. Half of the border is visually outside the element and had half-rounded (harp) edges pointed outside.

Design	Current

ShGKme · 2026-04-27T08:14:25Z

Do we keep this design on the older servers as well?

nfebe · 2026-04-27T08:50:10Z

Now

susnux · 2026-04-27T09:32:20Z

+			background-color: color-mix(in srgb, var(--color-primary-element) 16%, transparent);
+			color: var(--color-main-text) !important;


By doing so this is not guaranteed to match accessibility requirements anymore.
Because now foreground color and background color are independent

the new bg is mostly transparent (84% transparent + 16% primary tint), what shows through is --color-main-background. So the text we render with --color-main-text is still contrasting against --color-main-backgroun mostly which is the designed pair nc guarantees.

ShGKme · 2026-04-27T10:29:24Z

Now

Now it is rounded, but the border is outside the item while in the design it is inside the item.
(IMO, inside looks better)

susnux · 2026-04-27T11:20:06Z

Now it is rounded, but the border is outside the item while in the design it is inside the item.

From design it should be rounded but within the element not outside.

nfebe · 2026-04-27T14:34:08Z

Rounded
Starts inside

nfebe · 2026-04-28T11:50:01Z

@kra-mo

ShGKme · 2026-04-29T11:31:48Z

The design seems different in the navigation and list items.
In the list item, it is slightly outside.

NcAppNavigationItem	NcListItem

ShGKme · 2026-04-29T11:43:22Z

NcAppNavigationItem now has a different hover effect from NcListItems and NcButton.

nfebe · 2026-04-29T13:00:11Z

Updated NcListItems and NcButton.

Main content now has a subtle left divider and rounded left edge next to the navigation. Selected nav and list items use a softly tinted pill instead of a solid primary fill. Signed-off-by: nfebe <fenn25.fn@gmail.com>

susnux

As far as I tested no regressions on v33

susnux · 2026-05-04T15:53:58Z

/backport to stable8

backportbot · 2026-05-04T15:54:04Z

The backport to stable8 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable8
git pull origin stable8

# Create the new backport branch
git checkout -b backport/8448/stable8

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 377667a2

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/8448/stable8

Error: Failed to check for changes with origin/stable8: No changes found in backport branch

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.

ShGKme · 2026-05-04T16:27:46Z

Renamed for the changelog generation.

Main content now has a subtle left divider and rounded left edge next to the navigation. Selected nav and list items use a softly tinted pill instead of a solid primary fill. Backport of #8448 to stable8. Signed-off-by: nfebe <fenn25.fn@gmail.com>

susnux · 2026-05-08T11:01:38Z

+		backdrop-filter: var(--filter-background-blur, none);
+	}

 	&--closed {


This breaks the settings app in server

But proper fix is to fix the settings app: nextcloud/server#60236

susnux · 2026-05-08T11:38:47Z

When using real images for the icons the styles are now wrong with 34 as the background is no longer primary the color should not be inverted.

nfebe force-pushed the feat/revise-list-selection-styling branch from b00396d to 906656a Compare April 21, 2026 00:42

nfebe force-pushed the feat/revise-list-selection-styling branch 4 times, most recently from 0da4202 to 8e6f9a8 Compare April 27, 2026 07:30

nfebe requested review from ShGKme, kra-mo and susnux April 27, 2026 07:35

nfebe marked this pull request as ready for review April 27, 2026 07:35

ShGKme added enhancement New feature or request design Design, UX, interface and interaction design labels Apr 27, 2026

ShGKme added this to the 9.7.0 milestone Apr 27, 2026

nfebe force-pushed the feat/revise-list-selection-styling branch from 8e6f9a8 to 5f066e8 Compare April 27, 2026 07:49

ShGKme reviewed Apr 27, 2026

View reviewed changes

nfebe force-pushed the feat/revise-list-selection-styling branch from 5f066e8 to 0ba64b4 Compare April 27, 2026 08:47

ShGKme mentioned this pull request Apr 27, 2026

fix: align buttons in the navigation nextcloud/spreed#17789

Merged

11 tasks

susnux reviewed Apr 27, 2026

View reviewed changes

nfebe force-pushed the feat/revise-list-selection-styling branch 2 times, most recently from 58a66a1 to e38013d Compare April 27, 2026 14:40

nfebe requested review from ShGKme and susnux April 27, 2026 14:47

jancborchardt approved these changes Apr 28, 2026

View reviewed changes

nfebe force-pushed the feat/revise-list-selection-styling branch 2 times, most recently from d7264bd to 56b94a6 Compare April 29, 2026 12:42

Antreesy modified the milestones: 9.7.0, 9.7.1 Apr 30, 2026

susnux reviewed May 4, 2026

View reviewed changes

Comment thread src/assets/NcAppNavigationItem.scss Outdated

nfebe force-pushed the feat/revise-list-selection-styling branch from 56b94a6 to 281ea4d Compare May 4, 2026 12:02

feat(app-content): Revise sidebar selection and content edge styling

377667a

Main content now has a subtle left divider and rounded left edge next to the navigation. Selected nav and list items use a softly tinted pill instead of a solid primary fill. Signed-off-by: nfebe <fenn25.fn@gmail.com>

nfebe force-pushed the feat/revise-list-selection-styling branch from 281ea4d to 377667a Compare May 4, 2026 14:51

susnux modified the milestones: 9.7.1, 9.8.0 May 4, 2026

susnux approved these changes May 4, 2026

View reviewed changes

nfebe merged commit b65885c into main May 4, 2026
27 checks passed

nfebe deleted the feat/revise-list-selection-styling branch May 4, 2026 15:19

ShGKme changed the title ~~feat(app-content): Revise sidebar selection and content edge styling~~ feat: change NcAppNavigationItem/NcListItem active state design and NcAppContent edge style on Nextcloud 34+ May 4, 2026

nfebe mentioned this pull request May 4, 2026

[stable8] feat: change NcAppNavigationItem/NcListItem active state design and NcAppContent edge style on Nextcloud 34+ #8498

Merged

ShGKme mentioned this pull request May 6, 2026

fix(navigation): adjust active "Home" link to the new design nextcloud/spreed#17932

Draft

10 tasks

Antreesy mentioned this pull request May 7, 2026

chore: prepare release v9.8.0 #8510

Merged

susnux reviewed May 8, 2026

View reviewed changes

		background-color: color-mix(in srgb, var(--color-primary-element) 16%, transparent);
		color: var(--color-main-text) !important;

Conversation

nfebe commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screencast

Uh oh!

codecov Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ShGKme commented Apr 27, 2026

Uh oh!

ShGKme commented Apr 27, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShGKme commented Apr 27, 2026

Uh oh!

ShGKme commented Apr 27, 2026

Uh oh!

nfebe commented Apr 27, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShGKme commented Apr 27, 2026

Uh oh!

susnux commented Apr 27, 2026

Uh oh!

nfebe commented Apr 27, 2026

Uh oh!

nfebe commented Apr 28, 2026

Uh oh!

ShGKme commented Apr 29, 2026

Uh oh!

ShGKme commented Apr 29, 2026

Uh oh!

nfebe commented Apr 29, 2026

Uh oh!

Uh oh!

susnux left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

susnux commented May 4, 2026

Uh oh!

backportbot Bot commented May 4, 2026

Uh oh!

ShGKme commented May 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

nfebe commented Apr 21, 2026 •

edited

Loading

codecov Bot commented Apr 21, 2026 •

edited

Loading