Extended Menu (the "shell" component)

[pchemguy]

I have been working on extending the "shell" component to provided extra menu features. I need to finish the docs before submitting the updated "shell" component, but I wanted to share demo screenshots in advance.

Basically, I wanted to have icons in menus and button-styled menu items, as demonstrated on screenshots. As illustrated, menus, which use the present definition, are not affected. The extra options permit adding icons to menu elements. as well as turning both top-level and submenu items into buttons. I also added a flag which can be used to remove the extra white spacing on the right of submenus (the last screenshot). I welcome any feedback on this.

---

---

---

[lovasoa]

The new options sound useful ! But I feel like there is a problem with padding and margins in the design...

[pchemguy]

I suppose, horizontal spacing between top-level button should be adjusted. That what you mean?

[lovasoa]

Yes, the icon buttons in the menu look cramped. I don't know what exactly should be done, but I think it doesn't feel professionally designed.

The meny that says tabs, layouts, forms also has a huge right margin.

[pchemguy]

When you place both conventional items and buttons, the spacing can be reduced but removing it completely requires additional tweaking. But check "Community" menu on the website. That is the white space I can remove. When submenu contains buttons only, all elements have the same core class (btn), so it is simpler.

[lovasoa]

I think there isn't anything visually shocking here

But I think there is a spacing problem here

and here

[pchemguy]

Right, thanks

[pchemguy]

I have made some progress. It is not perfect but looks better. I have created a pull request, which also includes a demo menu file. Please take a look and let me know what you think.