<template>
  <nav class="navbar">
    <!-- <hamburger v-if="theme=='one'" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
    <breadcrumb class="breadcrumb-container" />
  </nav>
</template>

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

import Breadcrumb from "@/components/Breadcrumb";
// import Hamburger from '@/components/Hamburger'

export default {
  components: {
    Breadcrumb,
    // Hamburger
  },
  data() {
    return {
      // "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
    };
  },
  computed: {
    ...mapState("settings", ["isFullScreen"]),
    ...mapGetters(["sidebar"]),
  },
  methods: {
    test() {
      console.log("this.isFullScreen", this.isFullScreen);
      console.log("this.$store", this.$store.state.settings);
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  overflow: hidden;
  position: relative;
  .breadcrumb-container {
    float: left;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>