67 lines
1.2 KiB
Vue
67 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<nav
|
||
|
|
v-if="showSubmenuBar && subMenus.length > 0"
|
||
|
|
class="w-full bg-gray-100 shadow-sm px-4 py-2"
|
||
|
|
>
|
||
|
|
<div class="flex items-center space-x-6">
|
||
|
|
<span class="text-sm font-medium text-gray-600 mr-4">
|
||
|
|
{{ activeMenu }}
|
||
|
|
</span>
|
||
|
|
<div class="flex space-x-4">
|
||
|
|
<button
|
||
|
|
v-for="sub in subMenus"
|
||
|
|
:key="sub.key"
|
||
|
|
class="submenu-btn"
|
||
|
|
@click="onSubMenuClick(sub)"
|
||
|
|
>
|
||
|
|
{{ sub.label }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
interface SubMenu {
|
||
|
|
key: string;
|
||
|
|
label: string;
|
||
|
|
to: string;
|
||
|
|
componentName: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
showSubmenuBar: boolean;
|
||
|
|
activeMenu: string;
|
||
|
|
subMenus: SubMenu[];
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Emits {
|
||
|
|
(e: "submenu-click", sub: SubMenu): void;
|
||
|
|
}
|
||
|
|
|
||
|
|
defineProps<Props>();
|
||
|
|
const emit = defineEmits<Emits>();
|
||
|
|
|
||
|
|
function onSubMenuClick(sub: SubMenu) {
|
||
|
|
emit("submenu-click", sub);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.submenu-btn {
|
||
|
|
padding: 0.25rem 0.75rem;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #374151;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
border-radius: 0.25rem;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.15s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.submenu-btn:hover {
|
||
|
|
color: #2563eb;
|
||
|
|
background-color: #eff6ff;
|
||
|
|
}
|
||
|
|
</style>
|