<template>
    <q-breadcrumbs class="flex items-center" active-color="none" style="transform: translateX(10px);">
        <transition-group name="breadcrumb">
            <template v-for="(v, i) in breadcrumbs">
                <q-breadcrumbs-el v-if="v.title" class="items-center" style="vertical-align: middle" :label="v.title"
                    :icon="v.icon === '' ? undefined : v.icon" :key="i + v.title">
                    <template v-slot:default>
                        <div v-if="breadcrumbs.length !== i + 1" style="margin:0px 8px 0px 8px">
                            /
                        </div>
                    </template>
                </q-breadcrumbs-el>
            </template>
        </transition-group>
    </q-breadcrumbs>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const breadcrumbs = ref();

onMounted(() => {
    breadcrumbs.value = [];
});

</script>