<template>
    <div class="menu-group">
        <div class="title">{{ title }}</div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        props: {
            title: String
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../scss/constants";


    .menu-group {
        .title {
            display: block;
            width: 100%;
            font-weight: 600;
            font-size: 12px;
            color: $darkGrey;
            font-family: "aktiv-grotesk", sans-serif;
            padding: 9px;
            cursor: default;
            text-transform: uppercase;
            background-color: #E9E9E9;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .menu-item {
            padding-left: 30px;
        }
    }
</style>