Add v.App to examples

[DougRzz]

Please add an example of an App with a navigation drawer and AppBar to the example.ipynb.

I have tried to put something together. See below. But its not quite right yet. I can't work out how to get the content of the app to move when the navigation drawer is activated. Do you know how to fix this?

app = v.App(v_model=None)

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

navDrawer.width =300
navDrawer.mini_variant_width = 30

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

def on_click(widget, event, data):
   navDrawer.v_model = not navDrawer.v_model

toolBarButton.on_event('click', on_click)


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

appBar = v.AppBar(
      color="deep-purple accent-4",
      dense=True,
      dark = True   ,  
       children = [
           toolBarButton, 
           v.ToolbarTitle(children=['App example']),
]
)

content = v.Container(
#         class_="fill-height",
#         fluid=False,
        children = [
         v.Row(
              align="center",
          justify="center",
#     class_="fill-height",
#         fluid=False,
            children = [randomButton]
                     )
        ])

app.children = [appBar,navDrawer,content]
app

[mariobuikhuizen]

In Vuetify this is done by setting the app attribute on v-navigation-drawer. Sadly this does not work well inside a notebook, as this sets the NavigationDrawer on the page level, not on the output cell.

In Voila-vuetify the app attribute works as intended, since we are not in a notebook context: https://github.com/voila-dashboards/voila-vuetify#usage. But even then the nav drawer overlaps the content from it's collapsed state when on a small screen.

[nmearl]

You can get around this by making sure the absolute property is true. This ensures that the components are attached to the enclosing div instead of the body of the page.

[DougRzz]

@nmearl I couldn't get it to work with the absolute property set to True.

But I found another way to get what i wanted. Now working v nicely.

app = v.App(v_model=None)

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

navDrawer.mini_variant = True
navDrawer.expand_on_hover = True

navDrawer.width =300
navDrawer.mini_variant_width = 30

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

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 = v.Btn(
                  icon = False, 
                  children=[
                      v.Icon(children=['mdi-heart']),
                      'Random Button...',
                      ])

appBar = v.AppBar(
      color="deep-purple accent-4",
      dense=True,
      dark = True   ,  
       children = [
           toolBarButton, 
           v.ToolbarTitle(children=['App example']),
                    ])

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


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

app.children = [appBar,drawersWithContent]
app

[mariobuikhuizen]

Nice! So the trick is putting NavigationDrawer next to Content in a Row?

[DougRzz]

@mariobuikhuizen Yes, putting the NavigationDrawer next to Content in a v.Row seems to do the trick. I will keep this issue open until there is an App ipynb example. I will work on it but I can't promise anything amazing .. relative to the full capabilities of Ipyvuetify . :-)

[nmearl]

Ah, I see what you were after. According to Vuetify, this is not the intended way the hover the navigation drawer works; temporarily expanded drawers are supposed to slide over content, not push it apparently. Glad you were able to find a way around that!

[DougRzz]

@nmearl Ah. I think i might be confusing the types of drawers. I was originally trying to replicate the pre-made layouts. e.g. https://vuetifyjs.com/en/examples/layouts/baseline/. I wanted to replicate the behaviour.... where the buttons in the middle adjust to the navigation drawer (and centere justify on the remaining width of content area). But in this other example, https://vuetifyjs.com/en/examples/layouts/complex/ there are also temporary drawers that slide over the content. I think both drawer types are useful.