Question about responsive mobile navbar | Dioxus Labs | Page 1

Hi there,

I'm working on a responsive application that has a a "Menu" Icon that shows up when the screen size is below a certain threshold (based on Tailwindcss class "md"). The menu button renders propery and opens and closes a mobile menu the way it should, however, if I open a menu (and increase the screen size), the mobile keeps rendered.

I could not find a way to use the screen size as part of the rendering condition and I'm not sure the best way to fix this.

Has anyone got any ideas?

Here's a snippet of the code:

Thanks!


    div { class: "md:hidden flex items-center",
        button { onclick: move |_| show_mobile_navbar.set(!show_mobile_navbar()),
            svg {
                fill: "white",
                view_box: "0 0 24 24",
                stroke_width: "1.5",
                stroke: "white",
                class: "size-6",
                path {
                    stroke_linecap: "round",
                    stroke_linejoin: "round",
                    d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5",
                }
            }
        }
    }


    }
    // Mobile NavBar

    if show_mobile_navbar() {
    div { class: "items-center",
        a {
            class: "block py-2 px-4 hover:font-semibold",
            href: "#",
            "Link 1"
        }
        a {
            class: "block py-2 px-4 hover:font-semibold",
            href: "#",
            "Link 2"
        }
        a {
            class: "block py-2 px-4 hover:font-semibold",
            href: "#",
            "Link 3"
        }
    }

#Question about responsive mobile navbar