skill_web/components/
navbar.rs

1//! Top navigation bar component
2
3use yew::prelude::*;
4use yew_router::prelude::*;
5
6use crate::router::Route;
7use super::icons::{SettingsIcon, SearchIcon};
8
9/// Top navigation bar
10#[function_component(Navbar)]
11pub fn navbar() -> Html {
12    let search_query = use_state(String::new);
13
14    let on_search_input = {
15        let search_query = search_query.clone();
16        Callback::from(move |e: InputEvent| {
17            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
18            search_query.set(input.value());
19        })
20    };
21
22    html! {
23        <nav class="fixed top-0 left-0 right-0 h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 z-40">
24            <div class="flex items-center justify-between h-full px-6">
25                // Logo and title
26                <div class="flex items-center gap-3">
27                    <Link<Route> to={Route::Dashboard} classes="flex items-center gap-3 hover:opacity-80 transition-opacity">
28                        <span class="text-2xl">{ "⚡" }</span>
29                        <span class="text-xl font-semibold text-gray-900 dark:text-white">
30                            { "Skill Engine" }
31                        </span>
32                    </Link<Route>>
33                </div>
34
35                // Search bar (centered)
36                <div class="flex-1 max-w-xl mx-8">
37                    <div class="relative">
38                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
39                            <SearchIcon class="w-5 h-5 text-gray-400" />
40                        </div>
41                        <input
42                            type="text"
43                            placeholder="Search skills, tools, or commands..."
44                            class="input pl-10"
45                            value={(*search_query).clone()}
46                            oninput={on_search_input}
47                        />
48                    </div>
49                </div>
50
51                // Right side actions
52                <div class="flex items-center gap-4">
53                    // Version badge
54                    <span class="badge badge-info">{ "v0.2.2" }</span>
55
56                    // Settings link
57                    <Link<Route>
58                        to={Route::Settings}
59                        classes="p-2 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700 transition-colors"
60                    >
61                        <SettingsIcon class="w-5 h-5" />
62                    </Link<Route>>
63                </div>
64            </div>
65        </nav>
66    }
67}
skill_web/components/navbar.rs

skill_web/components/
navbar.rs
