<template>
  <div class="topbar d-flex flex-row justify-content-between">
    <div>
      <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i>
    </div>
    <div class="input-group searchcontainer">
      <div class="input-group-prepend">
        <span class="input-group-text searchlabel" for="search">
          <i class="fa fa-search"></i>
        </span>
      </div>
      <input id="search" type="text" class="form-control ui-element search searchbar">
    </div>
    <Layers></Layers>
  </div>
</template>

<style lang="scss">
@import "../assets/application.scss";

.menubutton {
  background-color: white;
  padding: 0.5rem;
}

.searchcontainer {
  margin-left: 20vw;
  margin-right: auto;
  width: 50vw !important;
  height: 39px;
  border-radius: 0.25rem;
}

.searchbar {
  margin-left: auto;
  margin-right: auto;
  height: 50px;
}

.topbar {
  padding-top: 2vh;
  margin-right: 1vw;
  margin-left: 0;
}

.logout {
  font-size: x-large;
}
</style>


<script>
import Layers from "./Layers";
export default {
  name: "topbar",
  components: {
    Layers: Layers
  },
  methods: {
    toggleSidebar() {
      this.$store.commit("application/toggleSidebar");
    }
  }
};
</script>