<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>
