<script>
  import CodeView from '../components/CodeView.svelte';
  import Icon from '../components/Icon.svelte';
</script>
<style>
  content {
    display: flex;
    flex-direction: column;
  }

  /* mvp.css aleady has a nav so using this 
     name to demonstrate how to make your own. */
  nav-bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    padding: 1em; /* this is only for here */
    border: 1px solid var(--color-accent);
    margin-bottom: 1em;
  }

  nav-bar middle {
    display: flex;
    flex: 2;
    justify-content: center;
    padding-left: 1em;
    padding-right: 1em;
  }

  nav-bar middle input {
    width: 100%;
  }

  .alternate {
    background-color: #ddd;
  }
</style>

<content>
  <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>

</content>

