basic routing, <Nav> component

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>

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
     }
 }
 

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>
+    }
+}

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;
+        }
+    }
+}

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 {