openforis/sepal_ui

navigation drawer overlay "overlays" content

dfguerrerom opened this issue · 1 comments

Describe the bug
Actually, the error is not directly related to sepal_ui, but it affects all apps. Essentially, when the panel_app is rendered in Voila, it is embedded in a div that applies a style. This style causes the NavigationDrawer to overlay the full content of the app when the window size is reduced.

To Reproduce
Simply copy and paste the following code into a Jupyter notebook and render it with Voila. Then, reduce the window width until the navigation drawer is hidden. After that, open it using the app bar navigation button:

# navdrawer.ipynb

import ipyvuetify as v
app_bar_icon = v.AppBarNavIcon()
nav_drawer = v.NavigationDrawer(
    v_model="drawer",
    app=True,
    children=[
        v.List(
            nav=True,
            dense=True,
            children=[
                v.ListItemGroup(
                    v_model="group",
                    active_class="deep-purple--text text--accent-4",
                    children=[
                        v.ListItem(children=[v.ListItemTitle(children = ["Foo"])]),
                        v.ListItem(children=[v.ListItemTitle(children = ["Bar"])]),
                        v.ListItem(children=[v.ListItemTitle(children = ["Fizz"])]),
                        v.ListItem(children=[v.ListItemTitle(children = ["Buzz"])]),
                    ],
                )
            ],
        ),
    ],
)
app_bar_icon.on_event('click', lambda *args: setattr(nav_drawer, "v_model", not nav_drawer.v_model))
v.App(
    children=[
        nav_drawer,
        v.AppBar(app=True, children=[
            app_bar_icon,
            v.ToolbarTitle(children=["My files"])
        ]),
    ]
)

Expected behavior
The buttons should be available to click.

Screenshots
image

this wwas refixed with 2cc4805