<header>
	<div class="wrapper">
		<a href="{{ .Site.BaseURL }}"><img class="image" src="/img/logo.svg" alt="Pinniped Logo" /></a>
		<ul class="desktop-links">
			<li><a href="/" {{ if (eq .RelPermalink "/")  }}class="active"{{ end }}>Home</a></li>
			<li><a href="/community/" {{ if (eq .RelPermalink "/community/")  }}class="active"{{ end }}>Community</a></li>
			<li><a href="/blog/" {{ if or (eq .Page.Section "posts") (eq .Page.Section "tags") }}class="active"{{ end }}>Blog</a></li>
			<li><a href="/docs/" {{ if (eq .Page.Section "docs") }}class="active"{{ end }}>Docs</a></li>
		</ul>
		<button type="button" class="mobile" onclick="mobileNavToggle()">
			<img class="collapsed-icon" src="/img/hamburger.svg" alt="Mobile nav icon">
			<img class="expanded-icon" src="/img/close.svg" alt="Mobile nav icon">
		</button>
		<div id="mobile-menu" class="mobile-menu mobile">
			<ul class="header-links">
				<li><a href="/" {{ if (eq .RelPermalink "/")  }}class="active"{{ end }}>Home</a></li>
				<li><a href="/community/" {{ if (eq .RelPermalink "/community/")  }}class="active"{{ end }}>Community</a></li>
				<li><a href="/blog/" {{ if or (eq .Page.Section "posts") (eq .Page.Section "tags") }}class="active"{{ end }}>Blog</a></li>
				<li><a href="/docs/" {{ if (eq .Page.Section "docs") }}class="active"{{ end }}>Docs</a></li>
			</ul>
			<div class="social">
				<a href="https://twitter.com/projectpinniped"><img src="/img/twitter.png" />Twitter</a>
				<a href="https://github.com/vmware-tanzu/pinniped"><img src="/img/github.svg" />GitHub</a>
				<a href="https://kubernetes.slack.com/messages/pinniped"><img src="/img/slack.png" />Slack</a>
			</div>
		</div>
	</div>
</header>