ui.link hover style like the one found in ui.expansion

[miccs0]

Question

Hello, I would like to know how can I replicate the hover style of the "ui.expansion" for a "ui.link".
The closest thing that I found was to do this, but it is not quite what I want since it has some other problems too:

link_classes = "hover:bg-gray-400 w-full transition ease-in duration-300"

One problem is that every time I click on any of my ui.link, the page realoads and the link_classes = "hover:bg-gray-400 w-full transition ease-in duration-300" animation runs again.
The other problem is that when I hover, the ui.link takes the bg-gray-400 color, which isn't what the color that ui.expansion has.

def side_panel():
    link_classes = "hover:bg-gray-400 w-full transition ease-in duration-300"
    item_label_classes = "text-xs"
    replace_text = 'text-gray-300'

    with ui.left_drawer(top_corner=True, bottom_corner=True).style('background-color: #262626').props('width=250'):
        ui.label('Menú de Navegación').tailwind(replace_text)
        with ui.expansion('Empleados', icon='people').classes('w-full !no-underline').style('color: rgb(209 213 219);').tailwind(item_label_classes).element:
            with ui.link(target='#').classes(link_classes, replace=replace_text):
                with ui.item():
                    with ui.item_section().props('avatar'):
                        ui.icon('person_add')
                    with ui.item_section():
                        ui.label('Registro de Empleados').tailwind(item_label_classes)

        with ui.link(target='#').classes(link_classes, replace=replace_text):
            with ui.item():
                with ui.item_section().props('avatar'):
                    ui.icon('groups')
                with ui.item_section():
                    ui.label('Gestión de Asistencia').tailwind(item_label_classes)

[falkoschindler]

Hi @miccs0,

I wonder if you really need the ui.link. As an alternative you could simply use a ui.expansion element with .props('hide-expand-icon') and an .on('click', ...) handler. This way you can simply use the same styling for all elements.

Or you stick with ui.link and set .props(remove='href') to prevent the page from reloading (see #3129).

[miccs0]

The thing is that I am trying to do a navigation bar, and I use the ui.link to navigate between pages.
I am using the ui.expansion to hide some related pages.
For example, the one that says "Empleado" is using ui.expansion for it to hide Employee related pages, like an employee list and things like that.

I managed to match the color and animation of the ui.expansion for ui.link by using this:
"hover:bg-neutral-700 w-full transition ease-in duration-300"
This is how it looks like:

This is how ui.expansion looks like when hovering on the element:

Whenever I click on a page, the sidebar loads again an this "hover:bg-neutral-700 w-full transition ease-in duration-300" animation runs again, making it look like this for a brief second:

[miccs0]

This is what I did based on what you said:
Created a function that can handle a click as well as create the same ui.expansion element.

def add_sidebar_element(label, icon, target):
    def handle_click():
        ui.run_javascript(f"window.location.href = '{target}';")

    expansion_element = ui.expansion(label, icon=icon).props('hide-expand-icon').on('click', handle_click).classes(
        'w-full').style(
        'color: rgb(209 213 219);').tailwind('text-xs').element

If you wanna add this element you just:

add_sidebar_element('Assistance', 'groups', '/assistance_managment')

Thanks again!!

[falkoschindler]

Note that there are two possible alternatives to calling ui.run_javascript:

• Using a JavaScript event handler:

  ui.expansion().on('click', js_handler='() => window.location.href = "/foo"')

• Using ui.open (or ui.navigate.to):

  ui.expansion().on('click', lambda: ui.open('/foo'))