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 { // sets the document title - + <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 {