Drawer auto-close behaviour on 'mobile' mode

[ruisilvestre-snapp]

Hi all,

I'm trying to implement the following behaviour:

• have a drawer on the left side that hides on 'mobile' according to Quasar drawer mode - ✅ this is achievable with the behavior prop that by default hides the drawer if smaller than lg (not sure if this is a Quasar or Tailwind breakpoint value, it seem they are slightly different)
• have a button on a toolbar (which is not a header as in most examples) that is only visible when screen is below lg size - ✅ I can do this via css classes e.g. <button here>.classes("inline lg:hidden")
• make sure that when I select an entry from the menu, only on mobile mode the menu auto-closes - ❌ I've tried just using .toggle() or .hide() explicitly but it also closes the menu when on desktop mode which is not what I want, this is a behaviour that only makes sense on mobile (since the menu occupies most of the screen making it difficult to tap outside).

I've checked the docs and can't really find this specific example, just ones where the page header (that sits above the drawers) contains a 'menu' button that toggles the drawer that sits underneath it. In my case, I use the menu as a list that when an item is selected it shows the content via a refreshable update on the content panel (i.e. I don't navigate just refresh the underlying content which shows the button on top to show the menu again).

I thought about:

• forcefully putting a 'close' button on the drawer (please don't)
• checking the current css breakpoint via a JS bridge but maybe there an easier way to do this? I also didn't see an easy way to get the current state of the drawer (if in mobile or not) but I can see that the show/hide/toggle methods call out to JS so that might be the only way somehow?
• ask for help (here I am)

Thanks for any ideas

[falkoschindler]

Hi @ruisilvestre-snapp,

Can you, please, share a minimal example of your layout? I'm struggling to reproduce every moving part with all the props and classes you're describing. That's a bit inefficient.

Apart from that, there's the possibility to duplicate menu items: You can either hide or show them depending on the screen size and let them behave differently. It's a rather hacky workaround, but might just be what you need.

[ruisilvestre-snapp]

Hello @falkoschindler here's the minimal example I could conjure that uses the same setup as I have, but in a simplified way.

from nicegui import ui, run, app
from nicegui.page_layout import Drawer


@ui.page("/")
async def page():

    def toolbar(menu_drawer: Drawer):
        with ui.row().classes("w-full h-16").classes("items-center").style(
            "background-color: #a8a9aa"
        ):
            ui.button(icon="menu", on_click=lambda: menu_drawer.toggle()).props(
                "flat"
            ).classes("inline lg:hidden")
            ui.space()
            ui.button(icon="o_chat")

    @ui.refreshable
    def content(drawer: Drawer, text: str = None):
        # whenever there is new content we should be able to close the drawer automatically
        # but only on 'mobile' mode
        toolbar(drawer)
        if text:
            ui.label(text)
        else:
            ui.label("No content")

    with ui.left_drawer(top_corner=True, bottom_corner=True).props("width=432").style(
        "background-color: #f8f9fa"
    ) as menu_drawer:
        with ui.column():
            ui.button("No content", on_click=lambda: content.refresh(menu_drawer, None))
            ui.button("B1", on_click=lambda: content.refresh(menu_drawer, "B1"))
            ui.button("B2", on_click=lambda: content.refresh(menu_drawer, "B2"))
            ui.button("B3", on_click=lambda: content.refresh(menu_drawer, "B3"))

    content(menu_drawer)


ui.run()

If you make the browser window small enough such that it emulates a mobile-like width you see that there is no space to touch outside the menu which would dismiss the menu automatically (easier with a mouse pointer but really difficult with a finger to do it).

The setup I have here feels a bit convoluted but I created this while learning the ropes with NiceGui so that's my best excuse 😄 maybe a solution with routes and links for each menu option loading a new page would be best and give me the "auto-close-on-tap" automatically?

At the moment I'd rather try to 'hack it' than restructure the code but I'll do it if there's no other option.

Hopefully this clarifies better why I want to check if I'm on 'mobile' or not and force close only in this specific case.

Thanks for your help!

[falkoschindler]

Here is what you have at the moment:

@ui.refreshable
def content(text: str):
    ui.button("Menu", on_click=drawer.toggle).classes("lg:hidden")
    ui.label(text)

with ui.left_drawer(bordered=True) as drawer:
    ui.button("A", on_click=lambda: content.refresh("A"))
    ui.button("B", on_click=lambda: content.refresh("B"))
    ui.button("C", on_click=lambda: content.refresh("C"))

content('Hi!')

Duplicating the buttons as suggested above would look like this:

@ui.refreshable
def content(text: str):
    ui.button("Menu", on_click=drawer.toggle).classes("lg:hidden")
    ui.label(text)

with ui.left_drawer(bordered=True) as drawer:
    with ui.column().classes('max-lg:hidden'):
        ui.button("A", on_click=lambda: content.refresh("A"))
        ui.button("B", on_click=lambda: content.refresh("B"))
        ui.button("C", on_click=lambda: content.refresh("C"))
    with ui.column().classes('lg:hidden'):
        ui.button("A", on_click=lambda: (content.refresh("A"), drawer.hide()))
        ui.button("B", on_click=lambda: (content.refresh("B"), drawer.hide()))
        ui.button("C", on_click=lambda: (content.refresh("C"), drawer.hide()))

content('Hi!')

I'd be interested in a more elegant solution though. 😄

[ruisilvestre-snapp]

I get now what you meant by 'duplicating buttons', wasn't even considering this 🤦‍♂️ this is a hack I can use for now with a bit of refactoring to reduce code duplication, so thanks for it.

Speculative but maybe a better solution might involve changing the layout and try to use routes instead for each menu selection? From Quasar's Drawer docs there's this bit that mentions the persistent property as something that can be used on the Drawer.

Using a persistent Drawer on desktop and a non-persistent drawer on mobile (which would close the menu automatically) could work, but I'm not really sure until I try this out. Not sure you ever used these props so feel free to chip in if this makes absolutely no sense.

Will put my findings here once I get to do this.