<template>
    <div class="topbar d-flex flex-row justify-content-between">
        <div @click="toggleSidebar">
            <i 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 v-if="routeName != 'usermanagement'">
            <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">
.splitscreen {
  background-color: white;
  padding: $small-offset;
  margin-right: $small-offset;
  margin-left: $offset;
  border-radius: $border-radius;
  height: $icon-width;
  width: $icon-height;
}

.menubutton {
  background-color: white;
  padding: $small-offset;
  border-radius: $border-radius;
  margin-left: $offset;
  height: $icon-width;
  width: $icon-height;
}

.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: $offset;
  margin-right: $offset;
}

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


<script>
import Layers from "../layers/Layers";

export default {
  name: "topbar",
  components: {
    Layers: Layers
  },
  props: ["routeName"],
  methods: {
    toggleSidebar() {
      this.$store.commit("application/toggleSidebar");
    },
    splitScreen() {
      this.$store.commit("application/toggleSplitScreen");
    }
  }
};
</script>