Better menu

[ed2050]

After discussion #4108 I made a better menu to replace ui.menu. Very easy, less than hour to make.

Advantages

Why is it better?

• Handles arbitrary nesting levels properly - submenus, subsubmenus, etc
• Easier to code - no wonky ui.menu / ui.menu_item distinctions
• More discoverable - indicators clearly show what can be expanded and what's already expanded
• Hover works properly. ui.menu fails on hover-open and hover-close with nested submenus (see Open menu on hover? #4108)
• Elements turn invisible when menu closed. Qmenu deletes menu items entirely from DOM when menu closes, adds them back (recreates?) when menu opened. If you rely on DOM nodes being present, don't use ui.menu.

Some of these things you can do with ui.menu but it's a pain (such as adding and dynamically updating open/close arrows on menus). Other things aren't possible unless you really dig into custom js and change Quasar behavior.

Code

New menu is very simple, built with ui.expansion. Just one short function to build the menu:

istype = isinstance

def bettermenu (opts , parent) :
    'build expanding menu from opts dict or tuple list'

    if istype (opts, dict) :  opts = opts.items ()     # convert to tuples

    with parent :

        for name , value in opts :
            if istype (value, str) :
                ui.link (name, value)

            elif istype (value, list) or istype (value, dict) :
                sub = ui.expansion (name)
                sub.on ('mouseenter', lambda sub=sub : sub.open ())
                sub.on ('mouseleave', lambda sub=sub : sub.close ())
                with sub :
                    col = ui.column ()
                    bettermenu (value, col)

            else :
                warn (f'unexpected type : { name } = { type (value) } : { value }')

# build a nested dict of menu options.  value is either a link target or a dict of more options.
menu = {
        'Bar' : { 'bar 1' : '?opt=bar1' , 'bar 2' : '?opt=bar2' , } ,
        'Foo' : {
            'sub 1' : { 'foo 1' : 'http://example.com' , 'foo 2' : 'http://nicegui.io' , } ,
            'sub 2' : { 'foo 3' : 'http://example.com' , 'foo 4' : 'http://nicegui.io' , } ,
        } ,
}
menubar = ui.row ().classes ('menubar')  # row layout for top level options
bettermenu (menu, menubar)

Now just a bit of css to pretty it up:

.menubar    { background : darkblue ; }
.menubar a  { color: white !important; }
.menubar .nicegui-link:hover  { background : rgba(255, 255, 255, 0.2) ; }

.menubar .q-expansion-item__content
{
    position   : absolute !important ;
    background : darkblue ;
    padding    : 0.5em 1em ;
    z-index    : 99999 ;
    border     : 1px solid dimgrey ;
}

/* --- nested levels open to side */
.menubar .q-expansion-item__content .q-expansion-item__content
{
    left : 100% ;
    top  : 0 ;
}

And voila. So easy a caveman could do it!

Other improvements

Of course more could be done. Supporting arbitrary elements as menu items, alternative layouts like horizontal menus, etc. Quite easy to customize for your own project. You could even turn it into a custom nicegui component for general-purpose use.

Hope others find this interesting.