feat(components): create navbar component
This commit is contained in:
parent
c0c11ba1ea
commit
cd64636715
28
components/layouts/navbar.vue
Normal file
28
components/layouts/navbar.vue
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
const itemMap = {
|
||||||
|
"bands": "/bands",
|
||||||
|
"authors": "/authors"
|
||||||
|
};
|
||||||
|
let cur = Object.keys(itemMap).find(a => itemMap[a] === useRoute().name) || "";
|
||||||
|
let selected: string[] = [cur]
|
||||||
|
const clickFn = (minfo) => {
|
||||||
|
navigateTo(itemMap[ minfo.key ])
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-menu mode="horizontal" class="navibar" :style="{
|
||||||
|
height: '40px',
|
||||||
|
alignSelf: 'center',
|
||||||
|
justifyContent: 'stretch'
|
||||||
|
}" @click="clickFn" :selectedKeys="selected">
|
||||||
|
<a-menu-item key="bands">
|
||||||
|
Bands
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.navibar {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user