Mystery Meat Navigation

html

<div class="mm-demo" style="--accent:#241430;">
  <span class="mm-demo__badge">{{unless fixed}}&#10007; Anti-pattern: mystery meat navigation

tailwind

<div style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <span class="mm-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: mystery meat navigation

react

export function MysteryMeatNav({
  activeLabel = "Settings",
  fixed = false,
  accent = "#241430",
}) {
  const item = { display: "flex", alignItems: "center", gap: 6, padding: "8px 10px", borderRadius: 8, color: "#241430aa", background: fixed ? "#FAF7F2" : "transparent" };
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: mystery meat navigation"}
      </span>
      <nav style={{ display: "flex", gap: 6, padding: 8, borderRadius: 10, background: "#24143010" }}>
        <span style={item}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 12h16M4 6h16M4 18h16" /></svg>{fixed && "Menu"}</span>
        <span style={item}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" /></svg>{fixed && "Profile"}</span>
        <span style={{ ...item, color: accent, fontWeight: 700 }}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3" /><path d="M4 12h2m12 0h2M12 4v2m0 12v2" /></svg>{fixed && activeLabel}</span>
      </nav>
    </div>
  );
}