mirror of
https://github.com/robonen/lorem-blog.git
synced 2026-03-20 10:54:38 +00:00
feat(ui): add NavigationMenu component with types and structure
This commit is contained in:
29
src/widgets/NavigationMenu/NavigationMenu.vue
Normal file
29
src/widgets/NavigationMenu/NavigationMenu.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { NavigationMenuItem } from './types';
|
||||||
|
|
||||||
|
export interface NavigationMenuProps {
|
||||||
|
items: NavigationMenuItem[];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterLink } from 'vue-router';
|
||||||
|
|
||||||
|
const { items } = defineProps<NavigationMenuProps>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ul class="flex items-center space-x-4">
|
||||||
|
<li v-for="item in items" :key="item.name">
|
||||||
|
<slot :item>
|
||||||
|
<RouterLink
|
||||||
|
class="p-2 rounded-md text-sm font-semibold transition-colors"
|
||||||
|
active-class="text-primary bg-primary/10"
|
||||||
|
:to="item.path"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</RouterLink>
|
||||||
|
</slot>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
2
src/widgets/NavigationMenu/index.ts
Normal file
2
src/widgets/NavigationMenu/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './types';
|
||||||
|
export { default as NavigationMenu } from './NavigationMenu.vue';
|
||||||
6
src/widgets/NavigationMenu/types.ts
Normal file
6
src/widgets/NavigationMenu/types.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import type { RouteLocationRaw } from 'vue-router';
|
||||||
|
|
||||||
|
export interface NavigationMenuItem {
|
||||||
|
name: string;
|
||||||
|
path: RouteLocationRaw;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user