python: how to add items to a menu of an ipyvuetify toolbar

Question

I would like to find out the way to add items to a toolbar menu created with ipyvuetify

# stack overflow
toolbar = vue.Toolbar(rounded=True,
                      color='#6BB6BC',
                      app=True, 
                      children=[vue.AppBarNavIcon(children=[]),
                                vue.ToolbarTitle(children=['ipyvuetify toolbar']),
                                vue.Spacer(),
                                vue.Btn(class_='mx-1', children=[vue.Icon(children=['mdi-email'])])
                               ]
                     )

display(toolbar)

items = [vue.ListItem(children=[
    vue.ListItemTitle(children=[
        f'Item {i}'])])
         for i in range(1, 5)]

menu = vue.Menu(offset_y=True,
    children=[vue.Btn(children=['MENU']),
        vue.List(children=items)
    ]
)
display(menu)

The code above displays the tool bar as follows:

But I dont know how to add content to the menu, like buttons and/or input fields.

Does someone know how to code the menu and add it to the lateral toolbar menu symbol?

thanks

Answer 1

You can assign an 'on_event' action to a button. Here is an example.

import ipyvuetify as vue

app = vue.App(v_model=None)

toolBarButton = vue.Btn(
                  icon = True, 
                  children=[
                      vue.Icon(children=['mdi-dots-vertical'])
                      ])

appBar = vue.AppBar(
                  color='#6BB6BC',
                  dense=False,
                  dark = False   ,  
                  children=[toolBarButton,
                            vue.ToolbarTitle(children=['ipyvuetify toolbar']),
                            vue.Spacer(),
                            vue.Btn(class_='mx-1', children=[vue.Icon(children=['mdi-email'])])
                           ])

navDrawer = vue.NavigationDrawer(v_model=True, children=[
                         vue.Select(label='select1', items=[1,2,], prepend_icon = 'fa-truck'), 
                        vue.TextField(label='text', prepend_icon = 'mdi-heart'), 
                        vue.Select(label='select3', prepend_icon = 'mdi-magnify')
                    ])

navDrawer.mini_variant = True
navDrawer.expand_on_hover = True

navDrawer.width =300
navDrawer.mini_variant_width = 30

def on_click(widget, event, data):
    navDrawer.v_model = not navDrawer.v_model
    if navDrawer.v_model:
        navDrawer.mini_variant_width = 30
    else:
        navDrawer.mini_variant_width = 0
        
toolBarButton.on_event('click', on_click)

randomButton = vue.Btn(
                  icon = False, 
                  children=[
                  vue.Icon(children=['mdi-heart']),
                  'Random Button...',
                      ])

content = vue.Col(children = [
    randomButton, 
    vue.TextField(label='text', 
                  prepend_icon = 'mdi-heart'), ])

drawersWithContent = vue.Container(
        class_="fill-height",
#         fluid=False,
        children = [vue.Row(
                      align="top",
                      justify="left",
                      children = [navDrawer,content]
                            )
                ]
            )

app.children = [appBar, drawersWithContent]

app