<script lang="ts" setup>
import type { NavLink } from '@bagelink/vue'
import {
	Btn,
	Card,
	Icon

} from '@bagelink/vue'

defineProps<{
	navLinks: NavLink[]
}>()
</script>

<template>
	<Card
		class="hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center
	overflow-x"
	>
		<slot name="brand" />
		<Btn
			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="m_h-auto"
			@click="nav.onClick"
		>
			<Icon :icon="nav.icon" :size="1.4" class="m-0 line-height-14" />
			<p class="m-0 pb-025 txt10 line-height-1 w60 menu-text">
				{{ nav.label }}
			</p>
		</Btn>
		<slot name="end" />
	</Card>
</template>

<style>
.bgl_bottombar .bgl_btn-flex{
  flex-direction: column;
  height: 60px;
  gap: 0;
}
</style>

<style scoped>
.bgl_bottombar {
  background-color: var(--bgl-primary);
  color: var(--bgl-light-text);
  grid-template-columns: repeat(auto-fill, var(--bgl_bottombar-btn-width));
  grid-auto-flow: column;
	border-radius: 0;
	padding: 0;
	--bgl_bottombar-btn-width: 62px;
}

.bgl_bottombar>* {
  width: var(--bgl_bottombar-btn-width);
}

.bgl_bottombar::-webkit-scrollbar {
  display: none;
}

.bgl_bottombar .nav-button {
  border-radius: var(--card-border-radius);

}

.bgl_bottombar .router-link-active {
  background: var(--bgl-popup-bg);
  color: var(--bgl-primary) !important;
}
</style>
