robonen/lorem-blog
1
0
Fork 0
mirror of https://github.com/robonen/lorem-blog.git synced 2026-03-20 02:44:39 +00:00
Code Activity

feat(navigation): update NavigationMenu component structure and improve props definition

Browse Source
This commit is contained in:
Andrew Robonen
2025-06-15 15:40:25 +07:00
parent 7eb1528a55
commit 8e408ead25
4 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/widgets/Header/Header.vue
View File

@@ -11,8 +11,8 @@ const items = [
<template> <template>
<header class="p-4 dark bg-background text-foreground"> <header class="p-4 dark bg-background text-foreground">
<div class="mx-auto container flex space-x-18"> <div class="mx-auto container flex space-x-18">
<Logo class="h-6" aria-label="Logo" /> <Logo class="h-6" aria-label="Логотип" />
<NavigationMenu :items /> <NavigationMenu :items class="hidden lg:block" />
</div> </div>
</header> </header>
</template> </template>

37
src/widgets/NavigationMenu/NavigationMenu.vue
View File

@@ -1,29 +1,24 @@
<script lang="ts">
import type { NavigationMenuItem } from './types';
export interface NavigationMenuProps {
items: NavigationMenuItem[];
}
</script>
<script setup lang="ts"> <script setup lang="ts">
import type { NavigationMenuProps } from './types';
import { RouterLink } from 'vue-router'; import { RouterLink } from 'vue-router';
const { items } = defineProps<NavigationMenuProps>(); const { items } = defineProps<NavigationMenuProps>();
</script> </script>
<template> <template>
<ul class="flex items-center space-x-4"> <nav>
<li v-for="item in items" :key="item.name"> <ul class="flex items-center space-x-4">
<slot :item> <li v-for="item in items" :key="item.name">
<RouterLink <slot :item>
class="p-2 rounded-md text-sm font-semibold transition-colors" <RouterLink
active-class="text-primary bg-primary/10" class="p-2 rounded-md font-semibold transition-colors"
:to="item.path" active-class="text-primary bg-primary/10"
> :to="item.path"
{{ item.name }} >
</RouterLink> {{ item.name }}
</slot> </RouterLink>
</li> </slot>
</ul> </li>
</ul>
</nav>
</template> </template>

2
src/widgets/NavigationMenu/index.ts
View File

@@ -1,2 +1,2 @@
export * from './types';
export { default as NavigationMenu } from './NavigationMenu.vue'; export { default as NavigationMenu } from './NavigationMenu.vue';
export * from './types';

4
src/widgets/NavigationMenu/types.ts
View File

@@ -4,3 +4,7 @@ export interface NavigationMenuItem {
name: string; name: string;
path: RouteLocationRaw; path: RouteLocationRaw;
} }
export interface NavigationMenuProps {
items: NavigationMenuItem[];
}