navigation drawer overlay "overlays" content
dfguerrerom opened this issue · 1 comments
dfguerrerom commented
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.
dfguerrerom commented
this wwas refixed with 2cc4805