<template>
    <button
            @mouseenter="isHovered = true"
            @mouseleave="isHovered = false"
            @click="showCreateForm">
        <div v-if="isHovered">Add new entry</div>
        <div v-else>+</div>
    </button>
</template>

<script>
    import EditFormBox from "./EditFormBox.vue";

    export default {
        name: "AddNewEntryButton",
        components: {EditFormBox},

        data() {
            return {
                isHovered: false
            }
        },

        methods: {
            showCreateForm() {

            }
        }
    }
</script>

<style scoped>
    button {
        overflow: hidden;
        white-space: nowrap;

        position: fixed;

        padding: 5px;
        border-radius: 50px;
        width: 100px;
        height: 100px;
        border: none;
        background-color: #2871e2;
        color: white;
        font-size: 45px;

        transition-property: width;
        transition-duration: 0.6s;

        bottom: 50px;
        left: 50px;
    }

    button:hover {
        width: 300px;
        font-size: 30px;
        background-color: #286bd6;
    }

    button:focus {
        background-color: #2861c3;
    }
</style>