mohadese namavar
51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<template>
|
|
<section class="breadcrumbs">
|
|
<div>
|
|
<ul>
|
|
<li v-for="(item, i) in items" :key="i">
|
|
<router-link :to="item.link">
|
|
{{ item.name }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({ items: { type: Array, default: [] } });
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.breadcrumbs {
|
|
@apply w-full flex max-lg:px-6;
|
|
|
|
div {
|
|
@apply overflow-x-auto h-max;
|
|
|
|
&::-webkit-scrollbar{
|
|
@apply hidden;
|
|
}
|
|
ul {
|
|
@apply flex items-center gap-3.5 lg:gap-6 w-max;
|
|
|
|
li {
|
|
@apply relative text-[0.7em] lg:text-[1.1em];
|
|
|
|
a {
|
|
@apply text-[#999999] font-bold font-vazir;
|
|
}
|
|
|
|
&:not(:last-child)::after {
|
|
@apply content-['/'] absolute -left-2 lg:-left-3.5;
|
|
}
|
|
|
|
&:last-child a {
|
|
@apply text-[#666666];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|