Skip to content

Instantly share code, notes, and snippets.

@autarch
Created January 28, 2022 16:35
Show Gist options
  • Save autarch/0416bb9987835a0df548100d65997453 to your computer and use it in GitHub Desktop.
Save autarch/0416bb9987835a0df548100d65997453 to your computer and use it in GitHub Desktop.
#[inline_props]
pub(crate) fn MenuItem(
cx: Scope,
text: &'static str,
href: &'static str,
title: &'static str,
) -> Element {
let location = use_route(&cx).current_location();
let is_active = location.path() == *href;
let mut classes: Vec<_> = vec![
// These first two styles are for the hamburger view, where the items
// are stacked vertically. Then we override for a large screen to get
// a side-by-side layout.
"block",
"mt-4",
"lg:inline-block",
"lg:mt-0",
"mr-8",
"p-2",
"rounded",
];
if is_active {
classes.push("text-slate-50 bg-blue-500");
} else {
classes.push("text-slate-100");
}
let class = classes.join(" ");
cx.render(rsx! {
Link {
class: "{class}",
to: "{href}",
title: "{title}",
"{text}",
}
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment