<template>
  <div id="navbar">
    <b-navbar toggleable="sm" type="light" variant="light" fixed="top">


      <b-navbar-brand>
        <b-img src="@/assets/logo.png" height="30" class="pr-2"/>
        <b>BirbController</b>
      </b-navbar-brand>

      <b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>

      <b-collapse id="nav-text-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item :to="{ name: 'Home'}">Home</b-nav-item>
          <b-nav-item :to="{ name: 'Samples'}">Samples</b-nav-item>
          <b-nav-item :to="{ name: 'Devices'}">Devices</b-nav-item>
          <b-nav-item :to="{ name: 'Models'}">Models</b-nav-item>
          <b-nav-item :to="{ name: 'About'}">About</b-nav-item>
        </b-navbar-nav>
      </b-collapse>

    </b-navbar>
  </div>
</template>

<script>
export default {
  name: "Navbar"
}
</script>

<style scoped>

</style>