<nav id="mobile-nav">
  <div class="overlay js-overlay" ></div>
	<div class="btnctn js-mobile-btnctn">
    <div class="slider-trigger list" @click="openSlider($event, 'innerArchive')"><i class="icon icon-sort"></i></div>
	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="<%=theme.avatar%>" 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-quo-left"></i><%=theme.subtitle%><i class="icon icon-quo-right"></i></p>
			<% } %>
			<% var count = Object.keys(theme.menu).length 
			var ulWidth = count > 2 ? '70%' : '50%' %>
			<nav class="header-nav">
				<div class="social">
					<% for (var i in theme.subnav){ %>
						<a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></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>
