<section id="nav" class="nav">
	<div id="home">
		<a href="{% if page.lang == 'it' %}/it/home{% else %}/home{% endif %}" title="Home">Quit Social Media</a>
	</div>
	<nav>
		<a class="nav-mobile" href="javascript:void(0);" onclick="navtoggle()"><span></span></a>
		<ul class="nav-list">
			<li>{% if page.lang == 'it' %}<a href="/info" title="Informazioni su questo sito">Info{% else %}<a href="/about">About{% endif %}</a></li>
			<li>{% if page.lang == 'it' %}<a href="/perché" title="Perché">Perché{% else %}<a href="/why">Why{% endif %}</a></li>
			<li>{% if page.lang == 'it' %}<a href="/ma" title="Obiezioni"><q>Ma…</q>{% else %}<a href="/but"><q>But…</q>{% endif %}</a></li>
			<li>{% if page.lang == 'it' %}<a href="/percorso" title="Percorso">Percorso{% else %}<a href="/path">Path{% endif %}</a></li>
			<li>{% if page.lang == 'it' %}<a href="/soluzioni" title="Soluzioni">Soluzioni{% else %}<a href="/solutions" title="Solutions and alternatives">Solutions{% endif %}</a></li>
			<li><a href="{% if page.lang == 'it' %}/it/faq{% else %}/faq{% endif %}" title="Objections and Replies">FAQ</a></li>
			{% unless page.ref == nil %}
			<li id="language-selector" class="dropdown"><a onclick="langdropdown()" href="javascript:void(0);" title="language selector">&ensp;🌏</a>
				<ul class="dropdown-content">
					{% for cosa in site.pages %}
					{% if cosa.ref == page.ref %}
						<li>
							<a href="{{ cosa.url }}" class="{{ cosa.lang }}">{{ cosa.lang }}</a>
						</li>
					{% endif %}
					{% endfor %}
				</ul>
			</li>
			{% endunless %}
		</ul>
	</nav>
</section>

<script>
function navtoggle() {
	var x = document.getElementById("nav");
	if (x.className === "nav") {
		x.className += " open-menu";
	} else {
		x.className = "nav";
	}
}
function langdropdown() {
	var x = document.getElementById("language-selector");
	if (x.className === "dropdown") {
		x.className += " open-menu";
	} else {
		x.className = "dropdown";
	}
}
</script>