mohadese namavar
49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<template>
|
|
<nav class="bottom-navigation">
|
|
<ul>
|
|
<li v-for="(item, i) in navigation" :key="i">
|
|
<router-link :to="item.to" v-ripple>
|
|
<Button v-bind="item.props" />
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { navigation } = inject('mobile');
|
|
|
|
const route = useRoute()
|
|
|
|
Object.keys(navigation).forEach(key => {
|
|
const item = navigation[key]
|
|
if (item.to == route.path)
|
|
item.props.icon += '5'
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bottom-navigation {
|
|
@apply fixed inset-x-0 bottom-0 h-16 pb-2 bg-white z-10;
|
|
@apply shadow-[0px_-2px_5px_#0000000a] border-t border-[#F1F2F4];
|
|
|
|
ul {
|
|
@apply w-full h-full flex justify-between items-center;
|
|
|
|
li {
|
|
@apply flex justify-center flex-1;
|
|
|
|
a {
|
|
button span {
|
|
@apply text-[#7F7F7F] text-2xl;
|
|
}
|
|
|
|
&.router-link-active button span {
|
|
@apply text-primary-600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|