45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<div class="flex h-full flex-col">
|
|
<div class="h-full overflow-auto" id="scrollContainer">
|
|
<slot />
|
|
</div>
|
|
{{ tabs }}
|
|
<div
|
|
v-if="tabs"
|
|
class="grid grid-cols-5 border-t border-gray-300 standalone:pb-4"
|
|
:style="{ gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))` }"
|
|
>
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.label"
|
|
class="flex flex-col items-center justify-center py-3 transition active:scale-95"
|
|
@click="handleClick(tab)"
|
|
>
|
|
{{ tab.label }}
|
|
<component :is="tab.icon" class="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { getSidebarLinks } from '../utils'
|
|
import { useRouter } from 'vue-router'
|
|
import { computed } from 'vue'
|
|
|
|
const router = useRouter()
|
|
const tabs = computed(() => {
|
|
return getSidebarLinks()
|
|
})
|
|
|
|
console.log(tabs.value)
|
|
|
|
/* let isActive = computed((tab) => {
|
|
console.log(tab);
|
|
return router.currentRoute.value.name === tab.to
|
|
}) */
|
|
|
|
const handleClick = (tab) => {
|
|
router.push({ name: tab.to })
|
|
}
|
|
</script>
|