Sidebar Menu for undetermined amount of Categories and Items (e.g. in a Store)

[whoamiafterall]

Motivation

I was looking for a way to have a nice and clean dynamic menu that is generated from data and works well on mobile devices.

Idea

Use ui.toggle() inside ui.expansion() both in a vertical manner.

Limitations

See #5540 for limitations on vertical ui.toggle()

Code

Note that the snapping of the drawer goes away when you actually register sub pages (because it wont be recreated every time).

from nicegui import ui, app
from nicegui.elements.drawer import RightDrawer

options:dict[str, list[str]] = {
    'category1': ['a_item1', 'a_item2', 'a_item3', 'a_item4'],
    'category2': ['b_item1', 'b_item2', 'b_item3', 'b_item4', 'b_item5', 'b_item6'],
    'category3': ['c_item1', 'c_item2', 'c_item3', 'c_item4', 'c_item5'],
}

def safe_url(url: str) -> str:
    return url # Some code to make sure your urls are safe for browsers

def reverse_url(url:str) -> str:
    return url # Some code to make sure your safe urls match your menu labels

def expansion_toggle_menu(options: dict[str, list[str]], rd:RightDrawer,
                   classes:str="w-full text-center text-primary py-2 font-bold subpixel-antialiased tracking-widest"):

    # Get current item and path from url (to make menu be consistent when user connects)
    path_item = reverse_url(ui.context.client.sub_pages_router.current_path.split('/')[-1])
    path_category = reverse_url(ui.context.client.sub_pages_router.current_path.split('/')[-2])

    for category, items in options.items():
        # Insert an all_items option into items list
        all_items = 'All_Items'
        items.insert(0, all_items)

        with ui.expansion(category.upper(), group='menu').classes(classes) as expansion:
            expansion.props(f"hide-expand-icon popup header-class='bg-dark'")
            # Change expansion header background when its open
            expansion.on_value_change(lambda v, e=expansion: e.props.update(
                {"header-class": 'bg-primary text-dark'} if v.value else {
                    "header-class": 'bg-dark'}))
            # Set initial value of expansion to the second last part of url
            expansion.set_value(True if category == path_category else None)
            # Clicking on expansion navigates to "All Items" in this category
            # Note the reassignment of category! Necessary in a for loop!
            expansion.on('click', lambda c=category: ui.navigate.to(f"/{safe_url(c)}/{all_items}"))

            # Create toggle - Note column class! This makes the toggle vertical, only works in combination with square
            toggle = ui.toggle(items).classes(f"{classes} column").props("unelevated square")
            # Set initial value of toggle to the last part of url
            toggle.set_value(path_item)
            # Clicking on toggle navigates to the corresponding item in this category
            # Note the reassignment of category! Necessary in a for loop!
            toggle.on_value_change(lambda t, c=category: ui.navigate.to(f"/{safe_url(c)}/{safe_url(t.value)}"))
            # Make click on expansion set toggle to "All Items"
            # Note that this has to be declared after the toggle.on_value_change handler
            expansion.on('click', lambda t=toggle: t.set_value(all_items))
            # Make toggle close drawer on small screens
            toggle.on_value_change(lambda: rd.hide() if app.storage.user.get('screen')['width'] < 1024 else None)

# value=True is only set for demonstration purposes because there is no way to open drawer on small screens.
with ui.right_drawer(value=True).classes("py-3 px-0 items-stretch bg-dark").props('width=250') as rd:
    ui.space().classes("sm:hidden")
    expansion_toggle_menu(options, rd)

# Initialize Screen storage
app.storage.user['screen'] = {} if not app.storage.user.get('screen') else app.storage.user['screen']
# Save screen size to storage on resize
ui.on('resize', lambda e: app.storage.user.update({'screen': e.args}), throttle=0.4, trailing_events=True)

ui.run(storage_secret='A very safe secret key')

Preview

[evnchn]

@whoamiafterall Looks good. But to facilitate "more sense of hierarchy" maybe you can steal our docs' tree sidebar 😉

#4732 by yours truly

[whoamiafterall]

Thanks, i haven't thought about that. Although i think i'll stick with my solution this time, because i quite like the styling.