Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6f1aa33

Browse files
charlenopiresclaude
charlenopires
and
claude
committed
feat(ui): enhance top navigation bar design
- Add gradient accent bar at top (primary to secondary colors) - Redesign logo with gradient background and hover effects - Create pill-style navigation container with improved spacing - Add API docs link with external indicator - Improve health indicator with colored background states - Add mobile menu button placeholder - Update nav-link styles with smooth transitions - Add divider between nav sections Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 41755d8 commit 6f1aa33

1 file changed

Lines changed: 69 additions & 43 deletions

File tree

‎crates/codegraph-web/templates/base.html‎

Lines changed: 69 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -96,60 +96,83 @@
9696
<body class="h-full bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
9797
<div class="min-h-full flex flex-col">
9898
<!-- Header -->
99-
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
99+
<header class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
100+
<!-- Accent bar -->
101+
<div class="h-1 bg-gradient-to-r from-primary-400 via-primary-500 to-secondary-400"></div>
102+
100103
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
101-
<div class="flex justify-between items-center h-16">
104+
<div class="flex justify-between items-center h-14">
102105
<!-- Logo and Title -->
103106
<div class="flex items-center space-x-3">
104-
<div class="flex-shrink-0">
105-
<svg class="h-8 w-8 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
106-
<circle cx="12" cy="12" r="3"/>
107-
<circle cx="12" cy="4" r="2"/>
108-
<circle cx="20" cy="12" r="2"/>
109-
<circle cx="12" cy="20" r="2"/>
110-
<circle cx="4" cy="12" r="2"/>
111-
<line x1="12" y1="6" x2="12" y2="9"/>
112-
<line x1="18" y1="12" x2="15" y2="12"/>
113-
<line x1="12" y1="15" x2="12" y2="18"/>
114-
<line x1="9" y1="12" x2="6" y2="12"/>
115-
</svg>
116-
</div>
117-
<h1 class="text-xl font-bold text-gray-900 dark:text-white">CodeGraph</h1>
118-
<span class="hidden sm:inline-block text-sm text-gray-500 dark:text-gray-400">UI Component Knowledge Graph</span>
107+
<a href="/" class="flex items-center space-x-3 group">
108+
<div class="flex-shrink-0 p-2 bg-gradient-to-br from-primary-400 to-primary-600 rounded-xl shadow-md group-hover:shadow-lg group-hover:scale-105 transition-all duration-200">
109+
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
110+
<circle cx="12" cy="12" r="3"/>
111+
<circle cx="12" cy="4" r="2"/>
112+
<circle cx="20" cy="12" r="2"/>
113+
<circle cx="12" cy="20" r="2"/>
114+
<circle cx="4" cy="12" r="2"/>
115+
<line x1="12" y1="6" x2="12" y2="9"/>
116+
<line x1="18" y1="12" x2="15" y2="12"/>
117+
<line x1="12" y1="15" x2="12" y2="18"/>
118+
<line x1="9" y1="12" x2="6" y2="12"/>
119+
</svg>
120+
</div>
121+
<div class="hidden sm:block">
122+
<h1 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">CodeGraph</h1>
123+
<p class="text-xs text-gray-500 dark:text-gray-400 -mt-0.5">Knowledge Graph RAG</p>
124+
</div>
125+
</a>
119126
</div>
120127

121128
<!-- Nav Links -->
122-
<nav class="hidden md:flex items-center space-x-1">
123-
<a href="/" class="nav-link active" data-page="upload">
124-
<svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
129+
<nav class="hidden md:flex items-center bg-gray-100/80 dark:bg-gray-700/50 rounded-xl p-1">
130+
<a href="/" class="nav-link" data-page="upload">
131+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
125132
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
126133
</svg>
127-
Upload
134+
<span>Upload</span>
128135
</a>
129136
<a href="/query" class="nav-link" data-page="query">
130-
<svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
137+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
131138
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
132139
</svg>
133-
Query
140+
<span>Query</span>
134141
</a>
135142
<a href="/graph" class="nav-link" data-page="graph">
136-
<svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
143+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
137144
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
138145
</svg>
139-
Graph
146+
<span>Graph</span>
140147
</a>
141148
<a href="/dashboard/metrics" class="nav-link" data-page="metrics">
142-
<svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
149+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
143150
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
144151
</svg>
145-
Metrics
152+
<span>Metrics</span>
153+
</a>
154+
<div class="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1"></div>
155+
<a href="/api/docs" class="nav-link" data-page="docs" target="_blank">
156+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
157+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
158+
</svg>
159+
<span>API</span>
146160
</a>
147161
</nav>
148162

149163
<!-- Right side actions -->
150-
<div class="flex items-center space-x-3">
164+
<div class="flex items-center space-x-2">
165+
<!-- Health indicator -->
166+
<div id="healthIndicator" class="hidden sm:flex items-center space-x-1.5 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-full text-xs font-medium" title="Server status">
167+
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
168+
<span class="text-gray-600 dark:text-gray-300">Online</span>
169+
</div>
170+
171+
<!-- Divider -->
172+
<div class="hidden sm:block w-px h-6 bg-gray-200 dark:bg-gray-700"></div>
173+
151174
<!-- Dark mode toggle -->
152-
<button id="darkModeToggle" class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400">
175+
<button id="darkModeToggle" class="p-2 rounded-xl text-gray-500 hover:text-primary-600 hover:bg-primary-50 dark:text-gray-400 dark:hover:text-primary-400 dark:hover:bg-primary-900/30 transition-all duration-200" title="Toggle theme">
153176
<svg id="sunIcon" class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
154177
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
155178
</svg>
@@ -158,11 +181,12 @@ <h1 class="text-xl font-bold text-gray-900 dark:text-white">CodeGraph</h1>
158181
</svg>
159182
</button>
160183

161-
<!-- Health indicator -->
162-
<div id="healthIndicator" class="flex items-center space-x-1.5 text-sm">
163-
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
164-
<span class="hidden sm:inline text-gray-500 dark:text-gray-400">Connected</span>
165-
</div>
184+
<!-- Mobile menu button -->
185+
<button id="mobileMenuBtn" class="md:hidden p-2 rounded-xl text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700">
186+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
187+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
188+
</svg>
189+
</button>
166190
</div>
167191
</div>
168192
</div>
@@ -313,17 +337,19 @@ <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase trac
313337

314338
// Health check
315339
async function checkHealth() {
340+
const indicator = document.getElementById('healthIndicator');
316341
try {
317342
const response = await fetch('/health');
318-
const indicator = document.getElementById('healthIndicator');
319343
if (response.ok) {
320-
indicator.innerHTML = '<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span><span class="hidden sm:inline text-gray-500 dark:text-gray-400">Connected</span>';
344+
indicator.innerHTML = '<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span><span class="text-gray-600 dark:text-gray-300">Online</span>';
345+
indicator.className = 'hidden sm:flex items-center space-x-1.5 px-3 py-1.5 bg-emerald-50 dark:bg-emerald-900/30 rounded-full text-xs font-medium';
321346
} else {
322-
indicator.innerHTML = '<span class="w-2 h-2 rounded-full bg-red-500"></span><span class="hidden sm:inline text-gray-500 dark:text-gray-400">Error</span>';
347+
indicator.innerHTML = '<span class="w-2 h-2 rounded-full bg-red-500"></span><span class="text-gray-600 dark:text-gray-300">Error</span>';
348+
indicator.className = 'hidden sm:flex items-center space-x-1.5 px-3 py-1.5 bg-red-50 dark:bg-red-900/30 rounded-full text-xs font-medium';
323349
}
324350
} catch {
325-
const indicator = document.getElementById('healthIndicator');
326-
indicator.innerHTML = '<span class="w-2 h-2 rounded-full bg-primary-400"></span><span class="hidden sm:inline text-gray-500 dark:text-gray-400">Offline</span>';
351+
indicator.innerHTML = '<span class="w-2 h-2 rounded-full bg-primary-400"></span><span class="text-gray-600 dark:text-gray-300">Offline</span>';
352+
indicator.className = 'hidden sm:flex items-center space-x-1.5 px-3 py-1.5 bg-primary-50 dark:bg-primary-900/30 rounded-full text-xs font-medium';
327353
}
328354
}
329355

@@ -356,21 +382,21 @@ <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase trac
356382
<style>
357383
/* Navigation link styles */
358384
.nav-link {
359-
@apply flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700;
385+
@apply flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg text-gray-600 hover:text-primary-700 hover:bg-white dark:text-gray-300 dark:hover:text-primary-300 dark:hover:bg-gray-600 transition-all duration-200;
360386
}
361387
.nav-link.active {
362-
@apply bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300;
388+
@apply bg-white dark:bg-gray-600 text-primary-600 dark:text-primary-400 shadow-sm;
363389
}
364390

365391
.mobile-nav-link {
366-
@apply flex flex-col items-center justify-center p-2 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400;
392+
@apply flex flex-col items-center justify-center p-2 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400 transition-colors;
367393
}
368394
.mobile-nav-link.active {
369395
@apply text-primary-600 dark:text-primary-400;
370396
}
371397

372398
.sidebar-link {
373-
@apply flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700;
399+
@apply flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 transition-colors;
374400
}
375401
.sidebar-link.active {
376402
@apply bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300;

0 commit comments

Comments
 (0)