mohadese namavar
67 lines
2.0 KiB
Vue
67 lines
2.0 KiB
Vue
<template>
|
|
<details class="blog-categories" open>
|
|
<summary>
|
|
<h2>{{ $t('categoryOfContent') }}</h2>
|
|
<i class="isax isax-arrow-circle-down"></i>
|
|
</summary>
|
|
<ul>
|
|
<li v-for="(category, i) in blogCategory" :key="i">
|
|
<router-link :to="{ path: '/blog', query: { category: category.link } }">
|
|
<span>{{ category.name }}</span>
|
|
<i :class="{ selected: category.link == selectedCate }"></i>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(['data'])
|
|
const { blogCategory, selectedCate } = inject('data') || props.data
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.blog-categories {
|
|
@apply w-[17.1rem] lg:w-[18.3rem] appearance-none select-none shrink-0 rtl max-xl:hidden;
|
|
@apply h-full bg-white m-0 max-h-none ml-auto 2xl:ml-6 #{!important};
|
|
|
|
summary {
|
|
@apply w-full h-[3.9rem] lg:h-[5.5rem] flex items-center justify-between bg-[#43E97B] lg:rounded-[0.6rem] p-4 cursor-pointer;
|
|
|
|
h2 {
|
|
@apply text-stone-50 text-lg lg:text-xl font-bold font-vazir leading-[2.8rem];
|
|
}
|
|
|
|
i {
|
|
@apply text-white text-[1.4em] lg:text-2xl transition-transform;
|
|
}
|
|
}
|
|
|
|
&[open] summary i {
|
|
@apply rotate-180;
|
|
}
|
|
|
|
ul {
|
|
@apply flex flex-col gap-3 mt-[1.1rem] lg:gap-4 lg:mt-4 px-3 lg:px-0;
|
|
|
|
li {
|
|
a {
|
|
@apply w-full h-14 bg-[#F8F8F8] rounded-[0.6rem];
|
|
@apply flex items-center justify-between px-[1.1rem] lg:p-4 hover:bg-stone-100;
|
|
|
|
span {
|
|
@apply text-neutral-400 text-sm lg:text-xl font-medium font-vazir leading-[1.9rem];
|
|
}
|
|
|
|
i {
|
|
@apply w-2.5 h-2.5 lg:w-3 lg:h-3 bg-[#D9D9D9] rounded-full;
|
|
}
|
|
|
|
.selected {
|
|
@apply bg-[#43E97B];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |