logicaffeine_web/ui/components/
app_navbar.rs

1//! Application navigation bar component.
2//!
3//! Renders a top navigation bar with logo, title, and navigation links.
4//! Used on internal app pages (Learn, Studio, Profile).
5//!
6//! # Props
7//!
8//! - `title` - Optional page title (defaults to "LOGOS")
9
10use dioxus::prelude::*;
11use crate::ui::router::Route;
12
13const APP_NAVBAR_STYLE: &str = r#"
14.app-navbar {
15    display: flex;
16    justify-content: space-between;
17    align-items: center;
18    padding: 12px 24px;
19    background: rgba(0, 0, 0, 0.25);
20    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
21    backdrop-filter: blur(12px);
22}
23
24.app-navbar-brand {
25    display: flex;
26    align-items: center;
27    gap: 10px;
28    text-decoration: none;
29    color: inherit;
30}
31
32.app-navbar-logo {
33    width: 28px;
34    height: 28px;
35    border-radius: 8px;
36    background:
37        radial-gradient(circle at 30% 30%, rgba(96,165,250,0.85), transparent 55%),
38        radial-gradient(circle at 65% 60%, rgba(167,139,250,0.85), transparent 55%),
39        rgba(255,255,255,0.06);
40    border: 1px solid rgba(255,255,255,0.10);
41}
42
43.app-navbar-title {
44    font-size: 16px;
45    font-weight: 700;
46    background: linear-gradient(135deg, #667eea, #764ba2);
47    -webkit-background-clip: text;
48    -webkit-text-fill-color: transparent;
49    background-clip: text;
50}
51
52.app-navbar-nav {
53    display: flex;
54    gap: 8px;
55    align-items: center;
56}
57
58.app-navbar-link {
59    display: inline-flex;
60    align-items: center;
61    gap: 6px;
62    padding: 8px 14px;
63    border-radius: 8px;
64    border: 1px solid rgba(255, 255, 255, 0.10);
65    background: rgba(255, 255, 255, 0.04);
66    color: #888;
67    font-size: 13px;
68    text-decoration: none;
69    transition: all 0.2s ease;
70}
71
72.app-navbar-link:hover {
73    background: rgba(255, 255, 255, 0.08);
74    border-color: rgba(255, 255, 255, 0.15);
75    color: #e8e8e8;
76}
77
78.app-navbar-link.site-link {
79    color: #667eea;
80}
81
82.app-navbar-link.site-link:hover {
83    color: #8b9cf7;
84}
85"#;
86
87#[derive(Props, Clone, PartialEq)]
88pub struct AppNavbarProps {
89    #[props(default)]
90    pub title: Option<String>,
91}
92
93#[component]
94pub fn AppNavbar(props: AppNavbarProps) -> Element {
95    let title = props.title.unwrap_or_else(|| "LOGOS".to_string());
96
97    rsx! {
98        style { "{APP_NAVBAR_STYLE}" }
99
100        nav { class: "app-navbar",
101            Link {
102                class: "app-navbar-brand",
103                to: Route::Landing {},
104                div { class: "app-navbar-logo" }
105                span { class: "app-navbar-title", "{title}" }
106            }
107
108            div { class: "app-navbar-nav",
109                Link {
110                    class: "app-navbar-link site-link",
111                    to: Route::Landing {},
112                    "← Home"
113                }
114            }
115        }
116    }
117}
logicaffeine_web/ui/components/app_navbar.rs

logicaffeine_web/ui/components/
app_navbar.rs
