MatchLiveTv/backend/app/views/shared/_marketing_nav.html.erb

<% live_section = request.path.start_with?("/live") %>
<div class="site-chrome">
  <div class="site-masthead">
    <div class="wrap mast-inner">
      <%= link_to root_path, class: "mast-brand", aria: { label: "Match Live TV" }, title: "Match Live TV" do %>
        <img class="mast-brand-logo" src="/logo.png?v=3" alt="Match Live TV" width="40" height="40" decoding="async">
        <span class="brand" aria-hidden="true">Match <span>Live TV</span></span>
      <% end %>

      <div class="mast-tools">
        <button type="button" class="nav-toggle" aria-label="<%= t('nav.open_menu') %>" aria-expanded="false" aria-controls="site-nav">
          <span class="nav-toggle-bar" aria-hidden="true"></span>
          <span class="nav-toggle-bar" aria-hidden="true"></span>
          <span class="nav-toggle-bar" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </div>

  <nav id="site-nav" class="nav" aria-label="<%= t('nav.main_menu') %>" aria-hidden="true">
    <div class="nav-panel">
      <div class="nav-mobile-head">
        <%= link_to root_path, class: "nav-mobile-brand", aria: { label: "Match Live TV" }, title: "Match Live TV" do %>
          <img class="nav-mobile-brand-logo" src="/logo.png?v=3" alt="" width="40" height="40" decoding="async">
          <span class="brand">Match <span>Live TV</span></span>
        <% end %>
        <div class="nav-lang">
          <%= render "shared/language_switcher" %>
        </div>
      </div>
      <%= link_to t("nav.home"), root_path, class: (request.path == "/" ? "nav-active" : nil) %>
      <%= link_to t("nav.features"), public_features_path, class: (request.path == "/funzionalita" ? "nav-active" : nil) %>
      <%= link_to t("nav.pricing"), public_prezzi_path, class: (request.path == "/prezzi" ? "nav-active" : nil) %>
      <%= link_to t("nav.faq"), public_faq_path, class: (request.path == "/faq" ? "nav-active" : nil) %>
      <%= link_to t("nav.live"), public_live_index_path, class: (live_section ? "nav-active" : nil) %>
      <%= link_to t("nav.teams"), public_team_pages_path, class: (request.path.start_with?("/squadre") ? "nav-active" : nil) %>
      <div class="nav-actions">
        <% if logged_in? %>
          <% if current_user.primary_club || current_user.manageable_teams.any? %>
            <% if current_user.primary_club %>
              <%= link_to t("nav.my_club"), public_club_path(current_user.primary_club), class: "nav-link-item" %>
            <% elsif current_user.manageable_teams.first %>
              <%= link_to t("nav.my_team"), public_team_details_path(current_user.manageable_teams.first), class: "nav-link-item" %>
            <% end %>
          <% end %>
          <%= link_to t("nav.account"), public_account_path, class: (request.path == "/account" ? "nav-link-item nav-active" : "nav-link-item") %>
          <%= button_to t("nav.logout"), public_logout_path, method: :delete, class: "btn btn-secondary nav-btn" %>
        <% else %>
          <%= link_to t("nav.login"), public_login_path, class: "nav-link-item" %>
          <%= link_to t("nav.signup"), public_signup_path, class: "btn btn-primary nav-btn" %>
        <% end %>
      </div>
    </div>
  </nav>
</div>

<div class="nav-backdrop" id="nav-backdrop" aria-hidden="true"></div>

<script>
(function () {
  var chrome = document.querySelector(".site-chrome");
  var toggle = document.querySelector(".nav-toggle");
  var backdrop = document.getElementById("nav-backdrop");
  var nav = document.getElementById("site-nav");
  if (!chrome || !toggle || !nav) return;
  var openLabel = <%= raw t("nav.open_menu").to_json %>;
  var closeLabel = <%= raw t("nav.close_menu").to_json %>;

  function setOpen(open) {
    chrome.classList.toggle("nav-open", open);
    document.body.classList.toggle("nav-menu-open", open);
    toggle.setAttribute("aria-expanded", open ? "true" : "false");
    toggle.setAttribute("aria-label", open ? closeLabel : openLabel);
    nav.setAttribute("aria-hidden", open ? "false" : "true");
    if (backdrop) backdrop.setAttribute("aria-hidden", open ? "false" : "true");
  }

  function closeMenu() { setOpen(false); }

  toggle.addEventListener("click", function (e) {
    e.stopPropagation();
    document.body.classList.contains("nav-menu-open") ? closeMenu() : setOpen(true);
  });

  if (backdrop) backdrop.addEventListener("click", closeMenu);

  function shouldCloseNavOnControl(el) {
    // Language toggle must keep the mobile menu open; only a locale choice may close it.
    if (!el.closest("[data-lang-switcher]")) return true;
    return el.classList.contains("lang-switcher__option");
  }

  nav.querySelectorAll("a, button").forEach(function (el) {
    el.addEventListener("click", function () {
      if (shouldCloseNavOnControl(el)) closeMenu();
    });
  });

  window.addEventListener("resize", function () {
    if (window.matchMedia("(min-width: 900px)").matches) closeMenu();
  });

  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape") closeMenu();
  });
})();
</script>