add a nested group example, this demos how to handle deeply nested me…

[shuoli84]

…nu structure.

Also align dropdown's x with menu bar

This should fixed the layout problem, also fixes #4

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

Attention: Patch coverage is 70.06369% with 47 lines in your changes missing coverage. Please review.

Project coverage is 32.95%. Comparing base (6cf2f4f) to head (2f72b21).

Files	Patch %	Lines
src/lib.rs	70.06%	47 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##            main      #14       +/-   ##
==========================================
+ Coverage   0.00%   32.95%   +32.95%     
==========================================
  Files          1        1               
  Lines        314      446      +132     
==========================================
+ Hits           0      147      +147     
+ Misses       314      299       -15     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[micielski]

This kinda works, but it will conflict with my changes. This still crashes when the window menu is too small to render the menu, which I've already fixed (using Rect::clamp) and I will push it when I finish making the menu more responsive.

[joshka]

+1 to seeing a crash when making the window narrower than the first level width.

This also acts a bit weird when the nested items can't fit on the screen:
Level 3 fits

But level 4 doesn't:

I suspect that the size of the menus should probably automatically fit the contents too.

[shuoli84]

Level 4 is covering Level 3, so it appears weird, but the action should works as expected. Maybe add some visual indicator?
Dropdown width fits content doesn't solve the problem, it maybe better or worse depends on item's name length.

[joshka]

Just for reference, the way this is handled on my Mac's menu bar is that the menu that doesn't fit gets rendered the opposite direction. This seems like a good idea. E.g.:

[shuoli84]

Yes, it is a good idea. I'll do some quick experiments to test whether it feels right in tui

[shuoli84]

The tricky part is, if it automatically rendered on left side, then which key is step in, left or right.. Neither feels right..

[shuoli84]

How about stack it up? e.g

Nest1 > Nest2 > Nest3  |
.................Nest4|
.................Nest5|

[shuoli84]

@micielski @joshka take a look?

[joshka]

The tricky part is, if it automatically rendered on left side, then which key is step in, left or right.. Neither feels right..

I'd say keep it consistent - right key always goes in even when it will render left.

[joshka]

How about stack it up? e.g

This gets pretty confusing when you add more than one nested item:

Details

Add this:

vec![
                                        MenuItem::group(
                                            "Nested 4a",
                                            vec![
                                                MenuItem::group(
                                                    "Nested 5a",
                                                    vec![
                                                        MenuItem::group("Nested 6a", vec![]),
                                                        MenuItem::group("Nested 6b", vec![]),
                                                        MenuItem::group("Nested 6c", vec![]),
                                                    ],
                                                ),
                                                MenuItem::group(
                                                    "Nested 5b",
                                                    vec![
                                                        MenuItem::group("Nested 6d", vec![]),
                                                        MenuItem::group("Nested 6e", vec![]),
                                                        MenuItem::group("Nested 6f", vec![]),
                                                    ],
                                                ),
                                                MenuItem::group(
                                                    "Nested 5c",
                                                    vec![
                                                        MenuItem::group("Nested 6g", vec![]),
                                                        MenuItem::group("Nested 6h", vec![]),
                                                        MenuItem::group("Nested 6i", vec![]),
                                                    ],
                                                ),
                                            ],
                                        ),
                                        MenuItem::group(
                                            "Nested 4b",
                                            vec![
                                                MenuItem::group(
                                                    "Nested 5d",
                                                    vec![
                                                        MenuItem::group("Nested 6j", vec![]),
                                                        MenuItem::group("Nested 6k", vec![]),
                                                        MenuItem::group("Nested 6l", vec![]),
                                                    ],
                                                ),
                                                MenuItem::group(
                                                    "Nested 5e",
                                                    vec![
                                                        MenuItem::group("Nested 6m", vec![]),
                                                        MenuItem::group("Nested 6n", vec![]),
                                                        MenuItem::group("Nested 6o", vec![]),
                                                    ],
                                                ),
                                                MenuItem::group(
                                                    "Nested 5f",
                                                    vec![
                                                        MenuItem::group("Nested 6p", vec![]),
                                                        MenuItem::group("Nested 6q", vec![]),
                                                        MenuItem::group("Nested 6r", vec![]),
                                                    ],
                                                ),
                                            ],
                                        ),
                                        MenuItem::group(
                                            "Nested 4c",
                                            vec![
                                                MenuItem::group(
                                                    "Nested 5g",
                                                    vec![
                                                        MenuItem::group("Nested 6s", vec![]),
                                                        MenuItem::group("Nested 6t", vec![]),
                                                        MenuItem::group("Nested 6u", vec![]),
                                                    ],
                                                ),
                                                MenuItem::group(
                                                    "Nested 5h",
                                                    vec![
                                                        MenuItem::group("Nested 6v", vec![]),
                                                        MenuItem::group("Nested 6w", vec![]),
                                                        MenuItem::group("Nested 6x", vec![]),
                                                    ],
                                                ),
                                                MenuItem::group(
                                                    "Nested 5i",
                                                    vec![
                                                        MenuItem::group("Nested 6y", vec![]),
                                                        MenuItem::group("Nested 6z", vec![]),
                                                        MenuItem::group("Nested 6a", vec![]),
                                                    ],
                                                ),
                                            ],
                                        ),
                                    ],

Feels like I should press down to get to the menus below, but press right...

Press down:

Press down:

Press right:

Press down:

Press right:

Aside: I'd suggest automatically adding an arrow indicating there are more items on a particular menu item.

[micielski]

Just for reference, the way this is handled on my Mac's menu bar is that the menu that doesn't fit gets rendered the opposite direction.

This is what I've already implemented in my PR

The tricky part is, if it automatically rendered on left side, then which key is step in, left or right.. Neither feels right..

Maybe let's color two most outer drop-downs brighter, and make the rest darker? This way I think it would make it more obvious that the direction of keys changed

[micielski]

Aside: I'd suggest automatically adding an arrow indicating there are more items on a particular menu item.

Maybe additionally to this arrow, if we were to go with this stacking we could maybe also do something about the background color so it's clearer that these aren't a one big drop-down but four

[shuoli84]

Thanks for the ideas, let me try them out. Will come back later.

[shuoli84]

I think I find a more intuitive way. No stack, no left right dance. Instead, let's shift all the menus left, ensure the right most drop down displays.

[shuoli84]

@micielski @joshka Take a look?

[shuoli84]

Added a new example

cargo run --example nested_group

[micielski]

@micielski @joshka Take a look?

Looks good to me! Such a simple solution :D

[joshka]

Neat.
I think if you're after perfecting this, then rendering should take into account if any menus will cause wrapping:
E.g. when you have this:

Pressing down here should intuitively not remove the indent, it should leave a space where Nested 4 was instead. Here's what happens instead

And what it looks like if things are wide enough:

[shuoli84]

@joshka yea, I noticed it too, but didn't figure out a good and simple way to solve it.. Maybe just leave the space if any child is a group?

[joshka]

@joshka yea, I noticed it too, but didn't figure out a good and simple way to solve it.. Maybe just leave the space if any child is a group?

👍 I think that would be a good approach

[shuoli84]

@micielski @joshka updated, take a look?

[joshka]

LGTM :)

[micielski]

LGTM too!