Skip to content

Commit 293bdce

Browse files
Azir-11honghuangdc
Azir-11
authored and
honghuangdc
committed
feat(projects): implement navbar for the header section.
1 parent 12b6d36 commit 293bdce

File tree

6 files changed

+179
-6
lines changed

6 files changed

+179
-6
lines changed

‎docs/locales/en.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@ layout:
1919
default: Default Layout
2020
home: Home Layout
2121
about: About Layout
22+
header:
23+
search: Search documentation...
24+
docs: Docs
25+
components: Components
26+
version: Version
27+
github: GitHub
28+
theme_language: Theme / Language
2229
components:
2330
common:
2431
demo: Demos

‎docs/locales/zh-CN.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@ layout:
1919
default: 默认布局
2020
home: 首页布局
2121
about: 关于布局
22+
header:
23+
search: 搜索文档...
24+
docs: 文档
25+
components: 组件
26+
version: 版本
27+
github: GitHub
28+
theme_language: 主题 / 语言
2229
components:
2330
common:
2431
demo: 演示

‎docs/src/components/app-header.vue‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue';
3+
import { useRouter } from 'vue-router';
4+
import { SButton, SDrawer, SIcon } from '@soybeanjs/ui';
5+
import { useI18n } from 'vue-i18n';
6+
import ToolBar from './tool-bar.vue';
7+
8+
const router = useRouter();
9+
const { t } = useI18n();
10+
const drawerVisible = ref(false);
11+
12+
function goHome() {
13+
router.push('/');
14+
}
15+
</script>
16+
17+
<template>
18+
<header
19+
class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200/50 dark:border-gray-800/50 transition-all duration-300"
20+
>
21+
<div class="flex items-center justify-between px-6 py-3 max-w-[1440px] mx-auto h-full">
22+
<!-- Left Section: Logo, Title, Search -->
23+
<div class="flex items-center gap-8">
24+
<!-- Logo & Title -->
25+
<div class="flex items-center gap-3 cursor-pointer group" @click="goHome">
26+
<img src="/logo.svg" alt="Logo" class="size-8 transition-transform duration-300 group-hover:scale-110" />
27+
<h1
28+
class="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary dark:from-primary dark:to-primary-300 hidden sm:block"
29+
>
30+
{{ t('components.home.title') }}
31+
</h1>
32+
</div>
33+
34+
<!-- Search Box (Placeholder) -->
35+
<div
36+
class="hidden md:flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-lg text-gray-400 dark:text-gray-500 text-sm cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors w-64"
37+
>
38+
<SIcon icon="lucide:search" class="text-base" />
39+
<span>{{ t('layout.header.search') }}</span>
40+
<span class="ml-auto text-xs border border-gray-300 dark:border-gray-600 rounded px-1">⌘K</span>
41+
</div>
42+
</div>
43+
44+
<!-- Right Section: Menu, Version, Tools -->
45+
<div class="flex items-center gap-6">
46+
<!-- Desktop Navigation -->
47+
<nav class="hidden md:flex items-center gap-6">
48+
<a
49+
href="#"
50+
class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
51+
>
52+
{{ t('layout.header.docs') }}
53+
</a>
54+
<RouterLink
55+
to="/components/button"
56+
class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
57+
active-class="text-primary dark:text-primary font-semibold"
58+
>
59+
{{ t('layout.header.components') }}
60+
</RouterLink>
61+
</nav>
62+
63+
<!-- Version -->
64+
<div
65+
class="hidden md:block text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
66+
>
67+
v0.0.1
68+
</div>
69+
70+
<!-- Tools -->
71+
<div class="hidden md:flex items-center gap-2 pl-2 border-l border-gray-200 dark:border-gray-800">
72+
<a
73+
href="https://github.com/soybeanjs/soybean-ui"
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
class="p-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
77+
>
78+
<SIcon icon="mdi:github" class="text-xl" />
79+
</a>
80+
<ToolBar />
81+
</div>
82+
83+
<!-- Mobile Menu Toggle -->
84+
<div class="md:!hidden flex items-center gap-2">
85+
<SButton variant="ghost" class="!p-2 size-9 rounded-full" @click="drawerVisible = true">
86+
<SIcon icon="lucide:menu" class="text-xl" />
87+
</SButton>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<!-- Mobile Drawer -->
93+
<SDrawer v-model:open="drawerVisible" placement="right" class="w-64 p-4">
94+
<div class="flex flex-col gap-6 mt-6">
95+
<!-- Mobile Search -->
96+
<div
97+
class="flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg text-gray-400 dark:text-gray-500 text-sm cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
98+
>
99+
<SIcon icon="lucide:search" class="text-base" />
100+
<span>{{ t('layout.header.search') }}</span>
101+
</div>
102+
103+
<!-- Mobile Navigation -->
104+
<nav class="flex flex-col gap-4">
105+
<a
106+
href="#"
107+
class="text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
108+
>
109+
{{ t('layout.header.docs') }}
110+
</a>
111+
<RouterLink
112+
to="/components/button"
113+
class="text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
114+
active-class="text-primary dark:text-primary font-semibold"
115+
@click="drawerVisible = false"
116+
>
117+
{{ t('layout.header.components') }}
118+
</RouterLink>
119+
</nav>
120+
121+
<div class="h-px bg-gray-200 dark:bg-gray-800 my-2"></div>
122+
123+
<!-- Mobile Tools -->
124+
<div class="flex flex-col gap-4">
125+
<div class="flex items-center justify-between">
126+
<span class="text-sm text-gray-500">{{ t('layout.header.version') }}</span>
127+
<span
128+
class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
129+
>
130+
v0.0.1
131+
</span>
132+
</div>
133+
<div class="flex items-center justify-between">
134+
<span class="text-sm text-gray-500">{{ t('layout.header.github') }}</span>
135+
<a
136+
href="https://github.com/soybeanjs/soybean-ui"
137+
target="_blank"
138+
rel="noopener noreferrer"
139+
class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
140+
>
141+
<SIcon icon="mdi:github" class="text-xl" />
142+
</a>
143+
</div>
144+
<div class="flex items-center justify-between">
145+
<span class="text-sm text-gray-500">{{ t('layout.header.theme_language') }}</span>
146+
<ToolBar />
147+
</div>
148+
</div>
149+
</div>
150+
</SDrawer>
151+
</header>
152+
</template>

‎docs/src/layouts/default.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import AppHeader from '@/components/app-header.vue';
23
const { t } = useI18n();
34
45
useHead({
@@ -7,11 +8,9 @@ useHead({
78
</script>
89

910
<template>
10-
<div class="h-full p-4">
11+
<div class="h-full pt-16 p-4">
12+
<AppHeader />
1113
<SCard :title="t('layout.default')" class="h-full">
12-
<template #extra>
13-
<ToolBar />
14-
</template>
1514
<RouterView />
1615
</SCard>
1716
</div>

‎docs/src/layouts/home.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
<script setup lang="ts"></script>
1+
<script setup lang="ts">
2+
import AppHeader from '@/components/app-header.vue';
3+
</script>
24

35
<template>
46
<div class="relative h-full text-sm">
5-
<ToolBar class="absolute top-5 right-5 z-50" />
7+
<AppHeader />
68
<RouterView />
79
</div>
810
</template>

‎docs/src/typings/components.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,18 @@ export {}
1212
/* prettier-ignore */
1313
declare module 'vue' {
1414
export interface GlobalComponents {
15+
AppHeader: typeof import('./../components/app-header.vue')['default']
1516
CodeBlock: typeof import('./../components/code-block.vue')['default']
1617
DemoGallery: typeof import('./../components/demo-gallery.vue')['default']
1718
LocaleToggler: typeof import('./../components/locale-toggler.vue')['default']
1819
RouterLink: typeof import('vue-router')['RouterLink']
1920
RouterView: typeof import('vue-router')['RouterView']
21+
SButton: typeof import('@soybeanjs/ui')['SButton']
2022
SButtonIcon: typeof import('@soybeanjs/ui')['SButtonIcon']
2123
SButtonLink: typeof import('@soybeanjs/ui')['SButtonLink']
2224
SCard: typeof import('@soybeanjs/ui')['SCard']
2325
SConfigProvider: typeof import('@soybeanjs/ui')['SConfigProvider']
26+
SDrawer: typeof import('@soybeanjs/ui')['SDrawer']
2427
SDropdownMenuRadio: typeof import('@soybeanjs/ui')['SDropdownMenuRadio']
2528
SIcon: typeof import('@soybeanjs/ui')['SIcon']
2629
SSwitch: typeof import('@soybeanjs/ui')['SSwitch']
@@ -31,15 +34,18 @@ declare module 'vue' {
3134

3235
// For TSX support
3336
declare global {
37+
const AppHeader: typeof import('./../components/app-header.vue')['default']
3438
const CodeBlock: typeof import('./../components/code-block.vue')['default']
3539
const DemoGallery: typeof import('./../components/demo-gallery.vue')['default']
3640
const LocaleToggler: typeof import('./../components/locale-toggler.vue')['default']
3741
const RouterLink: typeof import('vue-router')['RouterLink']
3842
const RouterView: typeof import('vue-router')['RouterView']
43+
const SButton: typeof import('@soybeanjs/ui')['SButton']
3944
const SButtonIcon: typeof import('@soybeanjs/ui')['SButtonIcon']
4045
const SButtonLink: typeof import('@soybeanjs/ui')['SButtonLink']
4146
const SCard: typeof import('@soybeanjs/ui')['SCard']
4247
const SConfigProvider: typeof import('@soybeanjs/ui')['SConfigProvider']
48+
const SDrawer: typeof import('@soybeanjs/ui')['SDrawer']
4349
const SDropdownMenuRadio: typeof import('@soybeanjs/ui')['SDropdownMenuRadio']
4450
const SIcon: typeof import('@soybeanjs/ui')['SIcon']
4551
const SSwitch: typeof import('@soybeanjs/ui')['SSwitch']

0 commit comments

Comments
 (0)