reactive leptos-rs

main.rs

use leptos::{*, html::*};

macro_rules! fa_icon {(
    $icon_name: expr) => {
        a().attr("class", format!("fa {}", $icon_name))
    }
}

macro_rules! menu_item {(
    $text: expr,
    $icon_name: expr,
    $slim: expr,
    $wide: expr,
    $click_handler: expr) => {
        div()
            .attr("class", "menu-item")
            .on(ev::click, $click_handler)
            .child((
                div()
                    .attr("class", "menu-item text")
                    .class("hidden", $slim)
                    .child($text),
                div()
                    .attr("class", "menu-item icon")
                    .class("hidden", $wide)
                    .child(fa_icon! ($icon_name)))) 
    }
}

macro_rules! menu {(
    $slim: expr,
    $wide: expr,
    $set_clicked: expr,
    $toggle: expr) => {
        div()
            .attr("class", "menu")
            .class("menu-slim", $slim)
            .class("menu-wide", $wide)
            .child((
                menu_item!("Menu", "fa-bars", $slim, $wide, $toggle),
                menu_item!("Settings", "fa-cog", $slim, $wide, move |_| $set_clicked.update(move |n| *n = "Settings")),
                menu_item!("Profile", "fa-user", $slim, $wide, move |_| $set_clicked.update(|n| *n = "Profile"))))
    }
}

#[component]
pub fn App() -> impl IntoView {
    let (slim, set_slim) = create_signal(true).to_owned();
    let toggle = move |_| {
        set_slim.update(move |n| *n = !*n)
    };
    let wide = move || !slim();
    let (element_clicked, set_clicked) = create_signal("");
    return div()
        .attr("class", "container")
        .child((
            menu!(slim, wide, set_clicked, toggle),
            div()
                .attr("class", "main")
                .class("blur", wide)
                .child((
                    div()
                        .attr("class", "main-content main-left")
                        .child((
                            p().child("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a egestas nibh, id venenatis lacus. Maecenas volutpat placerat accumsan. Nam dignissim augue leo, id vulputate mi ornare et. Vivamus efficitur elit a nisl imperdiet, at fermentum nulla gravida. Sed bibendum vel nulla tristique condimentum. Ut aliquet a massa quis pretium. In vulputate leo urna, ut fermentum mauris lacinia eu. Nunc efficitur placerat elementum. Mauris ac enim eget sapien sagittis porta placerat porttitor nibh. Sed vitae molestie diam. Duis tempor porttitor cursus. Donec imperdiet dignissim cursus. Nullam risus magna, vulputate vel risus a, euismod pharetra sem."),
                            p().child("Nullam eu dictum magna. Duis tincidunt mollis faucibus. Suspendisse aliquet orci a turpis aliquet, vitae blandit neque maximus. Mauris quis vestibulum tellus. Ut feugiat eu tellus vitae aliquet. Maecenas ut volutpat dui. Sed fermentum est non diam egestas sodales. Maecenas placerat venenatis est, ut suscipit nunc placerat non. Aenean eu nunc eu leo dictum gravida. Maecenas placerat consectetur commodo. Donec commodo quam dapibus imperdiet bibendum. Maecenas volutpat metus sapien, in ultricies dolor eleifend sed. Nullam sagittis leo sed augue elementum, in consequat dolor facilisis. Vivamus bibendum non sem nec malesuada. Aliquam a augue et enim ornare tincidunt vestibulum id eros. Duis rhoncus nisi ut velit viverra, a tempus ante auctor."),
                            p().child("Integer ex metus, fringilla eget orci quis, scelerisque laoreet purus. Mauris eu egestas mi. Sed aliquet dignissim purus, in hendrerit orci mollis sit amet. Proin vestibulum orci et tempor scelerisque. Ut et pharetra orci. Nunc luctus, arcu vel lacinia pretium, turpis ligula blandit nisl, sit amet luctus ipsum augue non elit. Cras in bibendum urna, eget laoreet ligula. Quisque mollis nunc in mauris accumsan varius. Nunc vehicula nec ex eget tincidunt. Quisque eget neque magna."),
                            img().attr("src", "https://wiki.evageeks.org/images/9/99/02_C152_penpen.jpg"))),
                    div()
                        .attr("class", "main-content main-right")
                        .child(element_clicked))),
            div()
                .attr("class", "main-hider")
                .class("hidden", slim)
                .on(ev::click, toggle)));
}

fn main() {
    leptos::mount_to_body(App)
}