`views/partials/header.ejs`

30 lines
<header class="site-header" data-transparent="true">
  <a class="brand" href="/" aria-label="Stars of Design home">
    <span class="brand-mark" aria-hidden="true">★</span>
    <span class="brand-name">Stars of Design</span>
  </a>

  <button id="hamburger" class="hamburger" type="button"
          aria-label="Open menu" aria-expanded="false" aria-controls="site-nav">
    <span></span><span></span><span></span>
  </button>

  <nav id="site-nav" class="site-nav" aria-hidden="true">
    <button id="hamburger-close" class="hamburger-close" type="button" aria-label="Close menu">×</button>
    <a href="/" aria-label="Home">Home</a>
    <a href="/designers">Designers</a>
    <a href="/firms">Firms</a>
    <a href="/clients">DW Clients</a>
    <a href="/feed">Feed</a>
    <a href="/videos">Videos</a>
    <a href="/about">About</a>
    <a href="/submit">Submit a designer</a>
    <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle dark / light theme">
      <span class="theme-toggle-sun">☀</span>
      <span class="theme-toggle-moon">☾</span>
      <span class="theme-toggle-label">Theme</span>
    </button>
  </nav>
  <div id="nav-scrim" class="nav-scrim" hidden></div>
</header>