MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.22k stars 1.18k forks source link

NavLink and NavGroup: `IconOnly` Mode #8809

Open esda98 opened 3 weeks ago

esda98 commented 3 weeks ago

This PR adds a boolean property to the MudNavLink and MudNavGroup components that controls the conditional rendering of the child elements of MudNavLink and the Title of MudNavGroup.

Description

The PR adds an if around the <div> tags that wrap @ChildContent for MudNavLink and @Title for MudNavGroup controlled by the new boolean parameter for the components named IconOnly.

This is to enable functionality of collapsed sidebars, common in vertical navigation pane paradigms, to save horizontal space but still allow navigation through the icons on the sidebar.

How Has This Been Tested?

Type of Changes

Examples

Screenshot 2024-04-24 231740

https://github.com/MudBlazor/MudBlazor/assets/6509976/f36cfc67-b397-4ea0-948d-d8288bdfdcf3

Checklist

codecov[bot] commented 3 weeks ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 90.14%. Comparing base (28bc599) to head (d2b71dd). Report is 116 commits behind head on dev.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## dev #8809 +/- ## ========================================== + Coverage 89.82% 90.14% +0.31% ========================================== Files 412 421 +9 Lines 11878 12215 +337 Branches 2364 2411 +47 ========================================== + Hits 10670 11011 +341 + Misses 681 663 -18 - Partials 527 541 +14 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

danielchalmers commented 2 weeks ago

IconOnly should probably be a cascading value or be forced on all children. In what situation would some be icon-only and not other?


Should it collapse the title too? Not sure how that would work

image

Side note: the hamburger menu icon should really align with the rest


Titles in the new example are too far to the right and don't look right

image

henon commented 2 weeks ago

Should it collapse the title too? Not sure how that would work

image

Side note: the hamburger menu icon should really align with the rest

I agree with this

henon commented 2 weeks ago

@esda98 this example isn't intuitive. Nobody will figure out that they have to click the burger icon to collapse. Just add a MudSwitch at the bottom of the example that says IconOnly instead

henon commented 2 weeks ago

Compare with the Variant="DrawerVariant.Mini" example in the drawer docs, this would be also a good way of improving the example

image