header.ejs

<%
	const css = {
		navLinkDesktop: "md_Txd-n md_C-$brand_h Ts-$shortTs",
		navLinkMobile: "C-$accent900 Txd-n C-$brand_a Pb2u Bdb1;s;$brand md_Bdb-n",
		navLi: "md_Pb0 md_Bd-n md_M10"
	}
%>

<header class=" D-f Jc-sb Ai-c P15u;4u;2u md_P0;5.5p Bgc-$core950 Bcf -Blr0.4 Ps-f H-$headerH W100p C-$headerC Zi20">
    <%# Logo %>
	<a href="/#hero-section" id="header-logo" class="D-f Jc-c Ai-c <%= it.cssHeaderLogoVisibility %> Ts-O;$shortTs">
  		<img src="/assets/img/logo.svg" alt="mlut logo" class="W64 md_W116 H-a">
	</a>

    <%# Menu %>
    <div class="D-f Fld-r Jc-fe md_D-f md_Jc-e md_Gap8u md_Fns-$headerFns">
        <%- include('./burger.ejs') %>
        <div class="Bgc-$core950 Ps-a R0 T-$headerH Ts-$longTs Tf -Trx101p Bd1;s;$brand Bdr-n Bdtlr3u Bdblr3u Mxw50u ^burger:c:~_-Trx0 W50vw P10u;0 md_All-ust @:h<420_P3u;0">
			<nav class="M0;0;9u md_M0">
				<h2 class="P0;5u M0;0;7u Txa-r C-$brand md_D-n @:h<420_M0;0;4u"> Menu </h2>
				<ul id="nav-menu" class="C-$accent900 H40p D-f Jc-c Fld-c Gap5u P0;5u Txa-r Fns4u Lsst-n M0 md_Fld-r md_Jc-sb md_P0 md_H100p lg_Gap8u md_Txa-c @:h<420:w<gMd_Fld-r @:h<420:w<gMd_Flw-w @:h<420:w<gMd_Jc-fe">
					<% for (let navLink of it.navLinksRedesign) {%>
						<li class=" <%= css.navLi %>">
							<a href="<%= navLink.link %>" class="<%= css.navLinkMobile %> <%= css.navLinkDesktop %>">
								<%= navLink.text %>
							</a>
						</li>
					<% }%>
				</ul>
			</nav>

			<%# External links %>
			<div>
				<h2 class="P0;5u Txa-r M0;0;3u C-$brand md_D-n @:h<420_M0;0;4u"> Find us</h2>
				<div class="D-f Fld-r Jc-fe Ai-c Gap3u P0;5u H8u md_D-n">
					<% for (let extLink of it.extLinksRedesign) {%>
						<%- include('../components/sm-link.ejs',{
						icon: `${extLink.icon}`,
						link: `${extLink.link}`,
						name: `${extLink.name}`
						}) %>
					<% }%>
				</div>
			</div>
		</div>

		<%# Desktop links %>
		<div class="Ai-c Jc-sb P1u;2.5u D-n md_D-f md_Gap8u md_P0">
			<% for (let extLink of it.extLinksRedesign) { %>
				<%- include('../components/sm-link.ejs',{
						icon: `${extLink.icon}`,
						link: `${extLink.link}`,
						name: `${extLink.name}`
				}) %>
		    <% } %>
        </div>
    </div>

</header>