<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 v-if="routeName != 'usermanagement'" class="input-group searchcontainer">
            <div class="input-group-prepend shadow">
                <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>
        <div>
            <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
        </div>
        <Layers v-if="routeName != 'usermanagement'"></Layers>
    </div>
</template>

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

.splitscreen {
  background-color: white;
  padding: 0.5rem;
  margin-right: 0.5rem;
  margin-left: 1rem;
  border-radius: 5px;
}

.menubutton {
  background-color: white;
  padding: 0.5rem;
  border-radius: 5px;
}

.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/Layers";

export default {
  name: "topbar",
  components: {
    Layers: Layers
  },
  methods: {
    toggleSidebar() {
      this.$store.commit("application/toggleSidebar");
    },
    splitScreen() {
      this.$store.commit("application/toggleSplitScreen");
    }
  },
  computed: {
    routeName() {
      const routeName = this.$route.name;
      return routeName;
    }
  }
};
</script>