feat(app-content): Revise sidebar selection and content edge styling 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 (034beb5) to head (56b94a6).
⚠️ 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

jancborchardt

Nice! Some feedback:

The down-arrow icon of sections with a dropdown needs to stay text-color (dark by default) when selected. Currently it switches to white, which worked with the dark background color of selected elements we had before, but doesn’t work anymore.
The icon of the selected element is not filled. Seems a separate issue as it also doesn’t work on the last version, but it is the case for other Hub apps.

kra-mo · 2026-04-28T09:27:00Z

The icon of the selected element is not filled. Seems a separate issue as it also doesn’t work on the last version, but it is the case for other Hub apps.

It is, it depends on the app.

nfebe · 2026-04-28T09:49:09Z

@jancborchardt thanks the first item can be resolved.

The icon of the selected element is not filled. Seems a separate issue as it also doesn’t work on the last version, but it is the case for other Hub apps.

This though I descoped for it to done desperately. We need to introduce a new active icon slot and implement upstream so it will multiple PRs across multiple apps to use the new slot.

kra-mo · 2026-04-28T09:50:43Z

it will multiple PRs across multiple apps to use the new slot.

It's definitely out of scope for this one.

kra-mo

The rest looks good to me, although I haven't been able to actually test it.

AndyScherzinger · 2026-04-28T10:33:23Z

We need to introduce a new active icon slot and implement upstream so it will multiple PRs across multiple apps to use the new slot.

Afaik this is already present in the lib since mail and contacts app already have active/files icon state?

-> It is just the files app not implementing it since the sidebar has dynamic elements others app plug into the sidebar in contrast to other apps. Except that is what you meant Fon with the slot, but that one would be specific to the files app, in general the mechanism is there.

kra-mo · 2026-04-28T10:35:46Z

Also linking here, font-weight should be consistently 500: #8469

nfebe · 2026-04-28T11:05:16Z

@kra-mo

kra-mo

Could I see how it looks on hover? Looks good in general now :)

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.

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 · 2026-04-29T13:00:11Z

Updated NcListItems and NcButton.

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

nfebe force-pushed the feat/revise-list-selection-styling branch from e38013d to e361f74 Compare April 27, 2026 22:30

jancborchardt requested changes Apr 28, 2026

View reviewed changes

kra-mo requested changes Apr 28, 2026

View reviewed changes

Comment thread src/assets/NcAppNavigationItem.scss

Comment thread src/assets/NcAppNavigationItem.scss

nfebe force-pushed the feat/revise-list-selection-styling branch 2 times, most recently from 845ab18 to 3cb42a5 Compare April 28, 2026 11:03

nfebe requested review from jancborchardt and kra-mo April 28, 2026 11:05

kra-mo approved these changes Apr 28, 2026

View reviewed changes

jancborchardt approved these changes Apr 28, 2026

View reviewed changes

nfebe force-pushed the feat/revise-list-selection-styling branch from 3cb42a5 to d7264bd Compare April 29, 2026 12:30

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

56b94a6

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 d7264bd to 56b94a6 Compare April 29, 2026 12:42

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

		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!

ShGKme Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

ShGKme Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

ShGKme Apr 27, 2026

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!

susnux Apr 27, 2026

Choose a reason for hiding this comment

Uh oh!

nfebe Apr 27, 2026

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!

jancborchardt left a comment

Choose a reason for hiding this comment

Uh oh!

kra-mo commented Apr 28, 2026

Uh oh!

nfebe commented Apr 28, 2026

Uh oh!

kra-mo commented Apr 28, 2026

Uh oh!

kra-mo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

kra-mo commented Apr 28, 2026

Uh oh!

nfebe commented Apr 28, 2026

Uh oh!

kra-mo left a comment

Choose a reason for hiding this comment

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!

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

AndyScherzinger commented Apr 28, 2026 •

edited

Loading