From 0620207877a23011a758cc7315176324f41236df Mon Sep 17 00:00:00 2001
From: YK <yk@qcl.one>
Date: Sat, 20 Sep 2025 11:06:39 +0300
Subject: [PATCH] basic routing, `<Nav>` component

---
 src/app.rs            | 19 ++++++++++++++++---
 src/components/mod.rs | 21 ++++++++++++++++++---
 src/components/nav.rs | 14 ++++++++++++++
 style/_nav.scss       | 17 +++++++++++++++++
 style/main.scss       |  5 ++++-
 5 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 src/components/nav.rs
 create mode 100644 style/_nav.scss

diff --git a/src/app.rs b/src/app.rs
index ec03290..e758e77 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -5,7 +5,17 @@ use leptos_router::{
     StaticSegment, WildcardSegment,
 };
 
-use crate::{ prelude::*, components::{ sidebar::Sidebar, header::Header, Dash } };
+use crate::{
+    components::{
+        header::Header,
+        nav::Nav,
+        sidebar::Sidebar,
+        Character,
+        Inventories,
+        Wiki
+    },
+    prelude::*
+};
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -20,7 +30,7 @@ pub fn App() -> impl IntoView {
         <Stylesheet id="leptos" href="/pkg/aex.css"/>
 
         // sets the document title
-        <Title text="Welcome to Leptos"/>
+        <Title text="aex"/>
 
         // content for this welcome page
         <Router>
@@ -28,8 +38,11 @@ pub fn App() -> impl IntoView {
             <Header />
             <Sidebar />
             <main>
+                <Nav />
                 <Routes fallback=move || "Not found.">
-                    <Route path=StaticSegment("") view=Dash/>
+                    <Route path=StaticSegment("") view=Character/>
+                    <Route path=StaticSegment("inv") view=Inventories/>
+                    <Route path=StaticSegment("wiki") view=Wiki />
                     <Route path=WildcardSegment("any") view=NotFound/>
                 </Routes>
             </main>
diff --git a/src/components/mod.rs b/src/components/mod.rs
index c60af96..c09ad32 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -6,13 +6,28 @@ use crate::prelude::*;
 
 pub mod header;
 pub mod sidebar;
+pub mod nav;
 pub mod numput;
 
 #[component]
-pub fn Dash () -> impl IntoView {
-
+pub fn Character () -> impl IntoView {
     view! {
-        main
+        character
+    }
+}
+
+#[component]
+pub fn Inventories () -> impl IntoView {
+    view! {
+        <div class="inventories">
+        </div>
+    }
+}
+
+#[component]
+pub fn Wiki () -> impl IntoView {
+    view! {
+        books
     }
 }
 
diff --git a/src/components/nav.rs b/src/components/nav.rs
new file mode 100644
index 0000000..52b3328
--- /dev/null
+++ b/src/components/nav.rs
@@ -0,0 +1,14 @@
+use crate::prelude::*;
+use leptos::prelude::*;
+use leptos_router::components::A;
+
+#[component]
+pub fn Nav () -> impl IntoView {
+    view! {
+        <nav class="main-nav">
+            <A href="/">Персонаж</A>
+            <A href="/inv">Инвентарь</A>
+            <A href="/wiki">Информация</A>
+        </nav>
+    }
+}
diff --git a/style/_nav.scss b/style/_nav.scss
new file mode 100644
index 0000000..9523a24
--- /dev/null
+++ b/style/_nav.scss
@@ -0,0 +1,17 @@
+@use 'mixins';
+
+nav.main-nav {
+    display: flex;
+    justify-content: flex-end;
+    a {
+        text-transform: uppercase;
+        margin: 30px;
+        color: white;
+        transition: border-bottom-width .1s ease;
+        &[aria-current="page"], &:hover {
+            border-bottom: 3px solid crimson;
+            text-decoration: none;
+            transition: border-bottom-width .1s ease;
+        }
+    }
+}
diff --git a/style/main.scss b/style/main.scss
index 3d461b0..50cf463 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,9 +1,10 @@
 @use 'sass:list';
 
-@use 'mixins';
 @use 'reset';
+@use 'mixins';
 @use 'header';
 @use 'sidebar';
+@use 'nav';
 @use 'vars';
 
 html {
@@ -53,6 +54,8 @@ main {
     z-index: 8;
     grid-row: 2/3;
     grid-column: 2/3;
+    display: flex;
+    flex-direction: column;
 }
 
 input {