blog/themes/typing/layout/_partial/header.ejs

44 lines
1.5 KiB
Plaintext

<header id="header" class="header">
<%/* Nav menu for desktop */%>
<nav id="main-nav" class="main-nav">
<% for (let i in theme.menu) { %>
<a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
<% } %>
<div class="searchContainer">
<input class="searchBox" type="text" id="searchTxt" placeholder="Search...">
<a class="searchBtn no-underline" id="searchClick" href="#">
<svg viewBox="0 0 512 512">
<title>Search</title>
<desc>Search icon</desc>
<use href="/svg/search.svg#search"/>
</svg>
</a>
</div>
</nav>
<%/* Nav menu for mobile */%>
<nav class="mobile-nav">
<h1 class="nickname"><%= theme.nickname %></h1>
<ul class="mobile-nav-menu">
<label for="mobile-menu-toggle"><a class="no-underline">&#9776; Menu</a></label>
<input id="mobile-menu-toggle" type="checkbox"/>
<ul class="mobile-nav-link">
<div class="searchContainer">
<input class="searchBox" type="text" id="searchTxtMob" placeholder="Search...">
<a class="searchBtn no-underline" id="searchClickMob" href="#">
<svg viewBox="0 0 512 512">
<title>Search</title>
<desc>Search icon</desc>
<use href="/svg/search.svg#search"/>
</svg>
</a>
</div>
<p><br></p>
<% for (let i in theme.menu) { %>
<a class="mobile-nav-link-a" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
<% } %>
</ul>
</ul>
</nav>
</header>