<nav-bar>
  <left>
    <b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
  </left>

  <middle>
    <input placeholder="Search">
  </middle>

  <right>
    <button>Log In</button>
    <a>Sign Up</a>
  </right>
</nav-bar>

<nav-bar class="alternate">
  <left>
    <b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
  </left>

  <middle>
  <!-- you just leave this empty and flexbox
    will expand it for you. -->
  </middle>

  <right>
    <button>Log In</button>
    <button id="signup">Sign Up</button>
  </right>
</nav-bar>