<header class="header">
    <div class="header-topbar">
        <div class="header-title">
            <%= config.title %>
        </div>
        <div class="header-menu">
            <% for (let item of theme.menubar) { %>
                <a href="<%= item[0] %>"><%= item[1] %></a>
            <% } %> 
        </div>
    </div>
    <% if (theme.logo) { %>
        <div class="header-logo" style="background-image: url('<%= theme.logo %>');"></div>
    <% } %>  
    <div class="header-desc">
        <%= config.description %> 
    </div>
    <nav class="header-navbar">
        <ul class="header-menu">
            <% for (let index in theme.navbar) { %>
                <% 
                    const mapping = theme.navbar[index];
                    const link = mapping[0];
                    const favicon = mapping[1];
                    let outter = link.startsWith("https://") ? true : false;
                %>
                <a href="<%= link %>" target="<%= outter ? '_blank' : '_self' %>">
                    <i class="<%= favicon %>"></i>
                </a>
            <% } %>
        </ul>
    </nav>
</header>