AppNav.vue
1.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<template>
<nav class="app-nav">
<div class="nav-brand" @click="$router.push('/')">
<span class="nav-logo">🧬</span>
<span class="nav-title">LemonBoss</span>
</div>
<div class="nav-links">
<router-link to="/agent/innovator-001" class="nav-link" :class="{ active: $route.path.startsWith('/agent') }">
<span>🧬</span> Innovator
</router-link>
</div>
<div class="nav-right">
<span class="nav-version">v0.1.0</span>
</div>
</nav>
</template>
<style scoped>
.app-nav {
display: flex;
align-items: center;
height: 48px;
padding: 0 20px;
background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
position: sticky;
top: 0;
z-index: 100;
gap: 24px;
}
.nav-brand {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.nav-logo { font-size: 20px; }
.nav-title {
font-size: 15px;
font-weight: 700;
background: linear-gradient(135deg, #10b981, #34d399);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.3px;
}
.nav-links {
display: flex;
gap: 4px;
flex: 1;
}
.nav-link {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 8px;
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.8); }
.nav-link.active { background: rgba(16, 185, 129, 0.1); color: #34d399; }
.nav-right { margin-left: auto; }
.nav-version {
font-size: 11px;
color: rgba(255, 255, 255, 0.25);
padding: 3px 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
}
</style>