<template>
  <div class="topbar shadow-sm d-flex flex-row justify-content-between">
    <div class="align-self-center">
      <i @click="toggleSidebar" class="menubutton fa fa-bars"></i>
    </div>
    <div class="searchcontainer align-self-center">
      <label class="searchlabel" for="search">
        <i class="fa fa-search"></i>
      </label>
      <input id="search" type="text" class="search searchbar">
    </div>
    <div class="align-self-center usermanagement">
      <img class="userpic" src="../assets/user.png">
      <span class="username">{{ userinfo }}</span>
      <span class="logout" @click="logoff">
        <i class="fa fa-power-off"></i>
      </span>
    </div>
  </div>
</template>

<style lang="scss">
@import "../assets/application.scss";
.topbar {
  position: absolute;
  width: 100vw;
  height: $topbarheight;
  min-height: 40px;
  background-color: white;
  z-index: 100;
}

.searchcontainer {
  margin-left: auto;
}

.usermanagement {
  margin-left: auto;
}
.logout {
  position: relative;
  top: 3px;
  font-size: x-large;
  font-weight: bold;
  margin-right: $offset;
}

.userpic {
  margin-right: 0.5rem;
}
.username {
  font-weight: bold;
  margin-right: 1.5rem;
}

.searchlabel {
  color: #aaaaaa;
  position: relative;
  top: 2px;
  font-size: x-large;
  margin-right: $small-offset;
}

.searchbar {
  width: 30vw;
  border: 1px solid;
  border-color: #aaaaaa;
  border-radius: 10px;
  padding-left: 1rem;
  padding-right: 1rem;
}
</style>


<script>
import { mapGetters } from "vuex";

export default {
  name: "topbar",
  methods: {
    toggleSidebar() {
      this.$store.commit("application/toggleSidebar");
    },
    logoff() {
      this.$store.commit("user/clear_auth");
      this.$router.push("/login");
    }
  },
  computed: {
    ...mapGetters("user", ["userinfo"])
  }
};
</script>