timetrack-router/src/views/Menu.vue

<template>
    <div id="left-menu">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="dropup">
                        <button class="btn btn-success text-light bottom-menu-item" type="button"
                                id="create-dropdown-menu" data-bs-toggle="dropdown" aria-expanded="false" title="Neu">
                            <i class="fas fa-plus"></i>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="create-dropdown-menu">
                            <li>
                                <button class="btn btn-light dropdown-menu-button" type="button"
                                        @click="createTracker()">Tracker
                                </button>
                            </li>
                            <li>
                                <button class="btn btn-light dropdown-menu-button" type="button"
                                        @click="createTimeBox()">Timebox
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <router-link to="/"
                                 type="button"
                                 class="btn btn-dark text-light bottom-menu-item"
                                 data-bs-placement="left"
                                 title="Home">
                        <i class="fas fa-home"></i>
                    </router-link>
                </div>
                <div class="" v-if="$store.state.trackers.length > 0">
                    <router-link to="/trackers"
                                 type="button"
                                 class="btn btn-primary text-light bottom-menu-item"
                                 data-bs-placement="left"
                                 title="Alle Tracker">
                        <i class="fas fa-clock"></i>
                    </router-link>
                </div>
                <div class="" v-if="$store.state.archive.length > 0">
                    <router-link to="/archive"
                                 type="button"
                                 class="btn btn-warning bottom-menu-item"
                                 data-bs-placement="left"
                                 title="Archivierte Tracker">
                        <i class="fas fa-archive"></i>
                    </router-link>
                </div>
                <div class="">
                    <a type="button"
                       class="btn btn-info text-light bottom-menu-item"
                       data-bs-toggle="modal"
                       data-bs-target="#pastDaysModal"
                       data-bs-placement="top"
                       title="Buchungsverlauf">
                        <i class="fas fa-history"></i>
                    </a>
                </div>
                <div class="">

                    <router-link to="/settings"
                                 type="button"
                                 class="btn btn-dark text-light bottom-menu-item"
                                 data-bs-placement="left"
                                 title="Einstellungen">
                        <i class="fas fa-sliders-h"></i>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import bootstrap from "bootstrap";

export default {
    name: "Menu",
    props: {
        archive: Array
    },
    methods: {
        createTracker() {
            this.$store.commit('createTracker');
            this.$store.commit('saveTrackers');
        },
        createTimeBox() {
            this.$store.commit('createTimebox');
            this.$store.commit('saveTrackers');
        },
        openTasksForTracker(tracker) {
            this.selectedTracker = tracker;
            this.$forceUpdate();
            setTimeout(() => {
                let tasksModal = new bootstrap.Modal(document.getElementById('trackerTasksModal'));
                tasksModal.toggle();
            }, 50);
        }

    }
}
</script>

<style scoped>
.dropdown-menu {
    background: transparent;
    border: none;
    box-shadow: none;
}

.dropdown-menu-button {
    width: 10em;
    margin-bottom: 1em;
}

</style>