<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>