<head-bottom>
  <link rel="stylesheet" href="{{baseUrl}}/stylesheets/main.css">
</head-bottom>

<header sticky>
  <navbar type="dark">
    <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand">Your Name</a>
    <li><a href="{{baseUrl}}/index.html#skills" class="nav-link">Skills</a></li>
    <li><a href="{{baseUrl}}/index.html#experience" class="nav-link">Experience</a></li>
    <dropdown header="Projects" class="nav-link">
      <li><a href="{{baseUrl}}/index.html#project-1" class="dropdown-item">Project 1</a></li>
      <li><a href="{{baseUrl}}/index.html#project-2" class="dropdown-item">Project 2</a></li>
      <li><a href="{{baseUrl}}/index.html#other-projects" class="dropdown-item">Other projects</a></li>
    </dropdown>
    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
      </form>
    </li>
  </navbar>
</header>

<div id="flex-body">
  <div id="content-wrapper">
    {{ content }}
  </div>
  <scroll-top-button></scroll-top-button>
</div>

<footer>
  <!-- Support MarkBind by including a link to us on your landing page! -->
  <div class="text-center">
    <small>[Generated by {{MarkBind}}]</small>
  </div>
</footer>
