BeaverHabitPatch.md

Little tutorial to add a link to the menu and pages to a Beaver Habit source

Updating the menu

In beaverhabits/frontend/layout.py add the following into menu_component() anywhere you want (example):

def menu_component() -> None:
    with ui.menu().props('role="menu"'):
        compat_menu("Tasks", lambda: redirect("tasks"))
        separator()
        <previous code below>

Now you'll see "Tasks" in the menu:

Added the actual tasks webpage

Create a new file tasks_page.py, the way nicegui works is what ever your redirect is (ie tasks) you add _page.py to it, so:

beaverhabits/frontend/tasks_page.py

Inside tasks_page.py you'll add:

from contextlib import contextmanager

from nicegui import ui


def tasks_page_ui():
    ui.label("Hello World!")

Support for tasks webpage

In beaverhabits/routes.py add:

from .frontend.tasks_page import tasks_page_ui

@ui.page("/gui/tasks/")
async def tasks_page(user: User = Depends(current_active_user)) -> None:
    tasks_page_ui()

Now when you press "Tasks" in the menu you'll enter a new page at http://0.0.0.0:9001/gui/tasks/: