Enhancement of Navigation Menu Consistency

[josephaw1022]

Upon reviewing the existing navigation menu implementation, it became apparent that the design consistency and user experience were not aligned with established patterns, especially when compared to the navigation menu utilized within Azure DevOps. The visual cohesion and functional clarity present in the DevOps menu, as depicted in the reference image below, served as an inspiration for the proposed enhancements.

Reference Image from Azure DevOps:

To address this, I have repositioned the settings button and the sidebar toggle to the lower end of the navigation menu, emulating the intuitive layout found in DevOps. The current structure of the NavMenuLink component presents certain constraints that prevent the combination of multiple icons within a single button or row. Nevertheless, I managed to circumvent this limitation by introducing two distinct buttons at the bottom of the menu. This adjustment has resulted in a more streamlined and user-friendly navigation interface.

Here is the new interface:

NavMenu Expanded:

NavMenu Closed:

[davidfowl]

I like this. Especially for smaller laptop screens.

[vnbaaij]

I like it too, however... The NavMenu has a Collapsible parameter to enable showing a hamburger at the top. Think this location is more common (also shown in that position in ADO) so would suggest to change the PR to do that.

[tlmii]

Agree with Vincent on the hamburger menu. I have no problem with the settings being at the bottom of the menu. In fact, that was part of my original design. At the time the menu couldn't really stretch to the height of the viewport and I got some feedback that people wanted the settings button top-right anyway so we went the other way. We have since changed the page structure so the menu can stretch now, so this is nice. I would just make sure we get design consensus given the feedback I got originally. @leslierichardson95 @kvenkatrajan.

[josephaw1022]

To provide a clearer comparison and facilitate decision-making, I've compiled a few layout options for the navigation menu. This visual representation should help in evaluating the most effective design choice.

Original Layout:
Here's how our navigation menu currently looks:

Proposed Change: Toggle Sidebar and Settings at Bottom:
This is the layout I am suggesting, with the toggle for the sidebar and the settings button placed at the bottom:

Alternative Option: Toggle Sidebar at Both Top and Bottom with Settings at Bottom:
In this layout, the sidebar toggle is available at both the top and bottom, with the settings button still at the bottom:

Suggested Variation: Menu at Top and Settings at Bottom: (What I assume @vnbaaij has in mind from the initial feedback)
And finally, this layout features the menu at the top with the settings at the bottom:

[josephaw1022]

made changes and re-added the menu on the top. No other changes needed?

[mitchdenny]

Funnily enough I think what we have now is closer to the Azure DevOps experience. Even though we have a Settings panel, the Aspire dashboard, when we consider the content, its more like the user settings which are indeed in the top right corner:

[tlmii]

FWIW, the Azure Portal has it in the top right too (along with a whole host of other stuff):

[josephaw1022]

That is true. But, is the settings only going to be just a "wrapper" (couldn't think of a better word) around the ui theme? Because if there are other things that will in the settings sidebar or dialog, then having the settings button and a separate theme button would make sense in this context right?

[josephaw1022]

Funnily enough I think what we have now is closer to the Azure DevOps experience. Even though we have a Settings panel, the Aspire dashboard, when we consider the content, its more like the user settings which are indeed in the top right corner:

Good eye. I didn't even notice that initially.

[leslierichardson95]

While I understand the reasoning for each argument, I personally prefer Settings to be displayed up top. Plus, as we expand the dashboard with more features and user options, having a settings dropdown feels more organic on top than it would in the side bar. That said, this UI change feels pretty arbitrary overall and I think we could just leave Settings as-is until more people request the alternative(s).

[kvenkatrajan]

Agreed while I see the bottom Settings display (in addition to the top right) being a discoverable option (especailly for smaller screen size), given the limited options we have in settings at the moment makes sense to leave it as is and revisit later.

[samsp-msft]

The diagrams above also seemed to imply a collapsing of Projects / Containers / Executables. Is that also in the plan?

[kvenkatrajan]

Yes that's correct. It was done in a prior PR merged recently : #987

[kvenkatrajan]

We have had numerous changes in the UI. Please confirm if this addresses your initial feedback/issue

[davidfowl]

Closing this PR out, it's old and many changes have been made to the dashboard since then. @josephaw1022 Thanks for the awesome early contribution and inspiration.