<nav id="mobile-nav">
  <div class="overlay js-overlay" ></div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="<%=config.picture_cdn%>/avatar.jpg" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author js-header-author"><%=theme.author%></h1>
			</hgroup>
			<% if (theme.subtitle){ %>
			<p class="header-subtitle"><i class="icon icon-quote-left"></i><%=theme.subtitle%><i class="icon icon-quote-right"></i></p>
			<% } %>
			<% var count = Object.keys(theme.menu).length 
			var ulWidth = count > 2 ? '70%' : '50%' %>
			<nav class="header-nav">
				<div class="social">
					<% for (let navName in theme.subnav){ %>
						<a class="<%= navName %>" target="_blank" href="<%- url_for(theme.subnav[navName].url) %>" 
								title="<%= __(theme.subnav[navName].alt) %>">
							<i class="icon icon-<%= theme.subnav[navName].icon %>"></i>
						</a>
			    <% } %>
				</div>
			</nav>

			<nav class="header-menu js-header-menu">
				<ul style="width: <%= ulWidth %>">
				<% var divide = 100 / count + '%' %>
				<% for (let menuName in theme.menu){ %>
					<li style="width: <%= divide %>"><a href="<%- url_for(theme.menu[menuName].url) %>"><%= __(theme.menu[menuName].name) %></a></li>
		      <% } %>
				</ul>
			</nav>
		</header>				
	</div>
	<div class="mobile-mask" style="display:none" v-show="isShow"></div>
</nav>
