48 lines
1013 B
Vue
48 lines
1013 B
Vue
<template>
|
|
<div class="hamburger-container" @click="toggleClick">
|
|
<SvgIcon
|
|
id="guide-hamburger"
|
|
class="hamburger"
|
|
:icon="icon"
|
|
color="white"
|
|
></SvgIcon>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import emitter from "@/utils/eventBus.js";
|
|
import { computed, getCurrentInstance, onMounted, ref } from "vue";
|
|
import { useStore } from "vuex";
|
|
const { proxy } = getCurrentInstance();
|
|
const keyIndex = ref(1);
|
|
const store = useStore();
|
|
onMounted(() => {
|
|
emitter.on("closeMeun", () => {
|
|
toggleClick();
|
|
});
|
|
});
|
|
const toggleClick = () => {
|
|
store.commit("app/triggerSidebarOpened");
|
|
proxy.mittBus.emit("mittFn", keyIndex.value++);
|
|
};
|
|
|
|
const icon = computed(() =>
|
|
store.getters.sidebarOpened ? "hamburger-opened" : "hamburger-closed"
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hamburger-container {
|
|
padding: 0 8px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
|
|
.hamburger {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
</style>
|