Navigation: Theme aside layout builder section on navigation block page

Hi @Gauravvvv Could you please provide any styling recommendations? Here's how I styled it and will modify it if necessary.

i could think of reducing the font-size to 1rem but still it the labels are not fully visible due to very less space available.
Attaching screenshot how it looks with font-size of 1rem.

Hi, Created MR for the issue please review it. Thanks!

Issue summary should be updated to include the solution and after screenshots.

Don't need a code snippet but what was actually fixed.

The layout builder section seems fixed in collapsed state by reducing the font-size and paddings. Attaching screenshot|

I've tested MR 8602 on Drupal 11.x
MR is applied cleanly...

Testing steps:
1. Install the navigation module.
2. Go to admin/config/user-interface/navigation-block/ page
3. Collapse the left sidebar
4. You'll see the design is breaking.
5. Appy MR and check for the same

Test Result:
The layout builder section is fixed in the collapsed state and visually looks good.
Attaching SS for reference
RTBC+1

Keeping "needs review" for code verification

The navigation sidebar typically has icons:

it seems like the issue reporter and everyone working on this issue are getting a version of the sidebar that is providing the alt text instead of the icons. This is not something I'm able to reproduce, but considering multiple contributors are seeing the exact same thing, I have to assume there are fairly straightforward steps beyond those in the issue summary to and this should be documented. I'm also not sure how to get it where layout builder can be used on a navigation block as seen in the screenshots, so that would be good to include in the issue summary as well.

If the icons aren't showing up, there are already problems happening and making this look nicer isn't bad but probably not a major priority. We should ensure nothing in this MR conflicts with the correctly-loading Navigation bar.

Imo simplest option here will be always expanded sidebar on that page(on desktop). ignoring user setting.

@finnsky Does #13 mean that when "show content preview" is unchecked we have to expand the toolbar even it is already in collapsed state?

Fixes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies.

Added 2 comments.

I have verified the changes in MR !8602 and it fixes the issue mentioned in the ticket. Please find the before and after screenshots.
As suggested by @finnsky, I tried to place the layout builder related code change of core/modules/layout_builder/css/layout-builder.pcss.css in core/modules/navigation/css/base/layout-builder.pcss.css. But the styles are getting overridden and I'm not sure !important should be used in such cases. Is it really necessary to move this code?

Regarding

this is another (design) problem. not strictly required here imo

, I also feel like it can be removed from this MR as it is not relevant for this issue and also it is causing misalignment of logo on collapsed mode (Please see the screen recording)

But the styles are getting overridden and I'm not sure !important should be used in such cases. Is it really necessary to move this code?

!important definetly should NOT be used by anyone anywhere anytime ;)

- you can remove :where and it will increase CSS specificity

Thanks! @finnsky for the suggestion. I removed :where and added .navigation-layout to increase CSS specificity because even after removing :where, style was getting overridden . Also, I have removed admin-toolbar.css changes as per review comment. Please see the attached screenshot as a reference to these changes.

Kindly review.

LGTM. Thank you!

I didn't find any unanswered questions here. I can't comment further on CSS issues. Leaving at RTBC

nod_ → closed merge request !8602

Committed and pushed ba3a786beca to 11.x and 0d81ddd1910 to 11.0.x and 9be6e1c3cc7 to 10.4.x and c05d734567b to 10.3.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.