[PLAN] Top contextual bar

Updated with a list of the remaining issues.

I'd also like to see what that top bar might look like in the context of viewing the published version (if one exists) or viewing the current draft. I'm not a big fan of hiding things under "more options"; can that be an individual user's preference setting? Some users probably prefer less clutter, others like me prefer my options to be in sight.

Adding reference to 📌 Create feature flag module to control navigation top bar visibility Fixed

more layout use please! (:

• Workspaces: add a 'tab' (only) and attaches js/css via library api (which opens the top fixed off-canvus drawer that is the Workspaces UI)
• Acquia Connector: add a tab (only) opens to external hosting tools dashboard.
• Devel: adds 'tab' and 'tray' of child menu item [see: \Drupal\devel\ToolbarHandler]
• Env Indicatior: general use cases, add a'tab'
• demo_umami: adds 'tab' item to say

It could use to provide help topics for the module

We're missing a breadcrumb more that a return link which then fills the space we need (sm->mid breakpoint ranges)

noting:
- right most icon is meant to be Node Forms vertical tabs
- actions include old style tab items (ie: revision, also normal for developers 'devel' would follow)

Replacing the screenshot posted to avoid confusion and discussions about unrelated elements on the page. Please take into account that this is still on the definition phase where we are actively defining (and testing) which features to provide.
Yes, the plan is to provide an plugable system for contribs and custom modules. But we still need to define where goes what and why, and after that provide the necessary documentation to help everybody make the best call. But as today we're not there yet :)

I think it is good place for
1. SDC.
Before SDC was stable we had some efforts in that direction https://git.drupalcode.org/project/navigation/-/merge_requests/72/diffs

We need to convert existing components and add new components as sdc.

2. Storybook. I still believe it is better to check all theories until they adapted on Drupal.

Some previous SB versions.
https://storied-pixie-3d54e7.netlify.app/iframe.html?args=&id=page-examp...
https://sparkling-gaufre-c402f2.netlify.app/iframe.html?args=&id=page--b...
https://thunderous-treacle-600c5c.netlify.app/iframe.html?args=&id=page-...

We started using layout builder in mega menu's awhile ago with great success, and seeing layout builder implemented in the new navigation builder successfully is awesome. I'd love to see it used here. We could have blocks for 'Entity Operations', 'Form Actions', etc. With the left toolbar acting more global, and the top bar holding more contextual info, we could take advantage of the existing Context system for some of the block visibility handling. This approach makes it far easier for other modules to extend and override the top bar without having to override templates everywhere.

I'd be happy to build that in similar fashion to the left hand toolbar if it would be helpful.

Changing the image with updated designs and some explanation of the areas.

Thank you @ckrina for the new updated design and explanation of the areas.

Given that top_bar is not intended to be configurable for end users, we agreed that it should be handled using a code only approach, not providing a UI for it.

Navigation Top Bar module will provide a hook, hook_navigation_top_bar(), where modules will be capable to add items to the 3 different top bar regions (tool, contextual & actions). A similar alter hook will allow to modify the items added beforehand.

Navigation Top Bar will provide a render element where modules will declare their Top Bar elements, the section they belong to and their weight, in a similar way as toolbar_item element does.

Contrib module developers will need to be careful adding new elements to this section, given that space is limited and adding more items than necessary could cause negative effects in the site UI.

I'd like to suggest an improvement.

The empty space alongside the logo in the navigation seems to be a "lost" space.

We should place the logo in the top bar and make it a full width component.

It will 1) improve the navigation sidebar design and 2) provide more space to add more items in the topbar.

Example in the capture attached.

@matthieuscarset thank you for the suggestion.

We already evaluated the solution you're proposing internally and with the XB team (together with several other ones) and agreed to go with the one defined in comment #19 .

I understand that we shouldn't add MR here. But in order to get things moving I'll try.

I added a few areas as suggested. Created a few new SDC components.

Now it looks like this

We need to add an understanding of how modules can extend these areas. (I honestly still don't have it). And add subtasks for these areas/components.

Adding the issue to define those 3 regions: 📌 Define the 3 areas the Top Bar will provide Active .

Thanks @finnsky for the proof of concept! Could you move the work into 📌 Proof of concept for the components that will render the top bar Active so we can focus the discussions in this issue to higher level / less detailed topics and the implementation ones in the other? I added it into the summary so it is taken into account too and can be used as reference.

Added also the next steps for the content that can be placed already:

• 📌 [PP1] Move the Edit buttonoutside the more actions drop down Postponed
• 📌 [PP1] Show entity information on the Top Bar Postponed

Updating the issue summary to make it clear what are the next steps and blockers to get to Stable.

Also, @finnsky closing the MR because we don't want code on META issues. If you think it's still useful to keep it could you please move it to 📌 Proof of concept for the components that will render the top bar Active ? Otherwise that issue can be closed.

ckrina → changed the visibility of the branch 3401826-POC to hidden.

ckrina → changed the visibility of the branch 3401826-plan-top-contextual to hidden.

Added parent 📌 New Toolbar Roadmap: Path to Beta & Stable Active .

Updated what Stable release means.