Manipulating Rally theme’s hamburger menu

Anvil Q&A
1

Hello all,

I’m wondering what the best way is to manipulate certain elements of the Rally theme programmatically.

On mobile, the left-side nav menu collapses and in the top-left a hamburger icon is shown. When you click on the hamburger icon, the side menu slides out to reveal any components. But I’d like to add a small red badge to the hamburger menu showing a number of unread messages. What would be the best way to accomplish this?

2

You can use this function on form_show

def notification_badge_on_hamburger_menu(no,right=-8,top=5):
    if no>99:
        no='99+'
    dom = document.getElementsByClassName("sidebar-toggle")[0]
    dom.style.position='relative'
    badge=HtmlTemplate(html=f'<span id="notif_badge" style="position: absolute;top: -10px;right: {right}px;padding: 6px 9px;border-radius: 50px;background-color: red;color:white;font-size:12px;margin-top:{top}px;line-height:110%;">{no}</span>')
    dom.appendChild(anvil.js.get_dom_node(badge))

#Usage

notification_badge_on_hamburger_menu(5)
1 Like
3

I get:

LookupError: 0

on the 4th line.

When I remove it, I get:

AttributeError: 'HTMLCollection' object has no attribute 'style'
4

Are you calling this on form show event or init?

1 Like
5

On init! Doh!
Thanks, works perfectly now.

1 Like