|
1 | | -use leptos::{create_signal, island, view, IntoView, SignalUpdate}; |
2 | | - |
3 | | -use crate::components::ButtonLink; |
4 | | - |
5 | 1 | use crate::components::icons::LogoRustPageIcon; |
| 2 | +use leptos::prelude::*; |
| 3 | +use leptos_router::components::A; |
6 | 4 |
|
7 | 5 | #[island] |
8 | 6 | pub fn Header() -> impl IntoView { |
9 | | - let (is_open, set_is_open) = create_signal(false); |
| 7 | + let cb_theme = || {}; |
10 | 8 |
|
11 | 9 | view! { |
12 | | - <header class="border-b border-b-black/20"> |
13 | | - <div class="container mx-auto px-4 flex items-center justify-between flex-col lg:flex-row"> |
14 | | - <div class="flex justify-between w-full lg:w-auto"> |
15 | | - <a href="/" exact=true class="flex items-center gap-x-4"> |
16 | | - <LogoRustPageIcon size=80/> |
17 | | - </a> |
18 | | - <button |
19 | | - class="lg:hidden" |
20 | | - on:click=move |_| { set_is_open.update(|n| *n = !*n) } |
21 | | - aria-label="Menu de opciones" |
22 | | - > |
23 | | - <span class="w-6 h-1 bg-black dark:bg-white block my-4 relative after:absolute after:block after:bg-black dark:after:bg-white after:w-6 after:h-1 after:bottom-2 before:absolute before:block before:bg-black dark:before:bg-white before:w-6 before:h-1 before:-bottom-2"></span> |
24 | | - </button> |
| 10 | + <header class="w-full py-[8px] px-[24px] flex flex-column items-center space-between"> |
| 11 | + <LogoRustPageIcon /> |
| 12 | + <div class="flex flex-column gap-[24px]"> |
| 13 | + <div class="flex gap-[16px]"> |
| 14 | + <A href="/">Inicio</A> |
| 15 | + <A href="/aprende">Aprende Rust</A> |
| 16 | + <A href="/comunidad">Comunidad</A> |
| 17 | + <A href="/eventos">Eventos</A> |
| 18 | + <A href="https://blog.rustlang-es.org">Blog</A> |
| 19 | + </div> |
| 20 | + <div class="flex gap-[16px]"> |
25 | 21 | </div> |
26 | | - <nav class=move || { |
27 | | - format!( |
28 | | - "w-full lg:w-auto pb-10 pt-5 lg:p-0 {}", |
29 | | - if is_open() { "block" } else { "hidden lg:block" }, |
30 | | - ) |
31 | | - }> |
32 | | - <ul class="flex items-center gap-6 flex-col lg:flex-row lg:items-center"> |
33 | | - <li class="nav-item"> |
34 | | - <a href="https://book.rustlang-es.org" target="_blank"> |
35 | | - "El Libro" |
36 | | - </a> |
37 | | - </li> |
38 | | - <li class="nav-item"> |
39 | | - <a href="/aprende">"Aprende"</a> |
40 | | - </li> |
41 | | - <li class="nav-item"> |
42 | | - <a href="/comunidades">"Comunidades"</a> |
43 | | - </li> |
44 | | - |
45 | | - <li class="nav-item"> |
46 | | - <a href="/colaboradores">"Colaboradores"</a> |
47 | | - </li> |
48 | | - <li class="nav-item"> |
49 | | - <a href="https://blog.rustlang-es.org/" target="_self"> |
50 | | - "Blog" |
51 | | - </a> |
52 | | - </li> |
53 | | - <li> |
54 | | - <ul class="lg:ml-4 flex items-center gap-x-6"> |
55 | | - <li> |
56 | | - <ButtonLink href="https://github.com/RustLangES"> |
57 | | - "Github" |
58 | | - </ButtonLink> |
59 | | - </li> |
60 | | - <li> |
61 | | - <ButtonLink href="https://discord.gg/4ng5HgmaMg"> |
62 | | - "Discord" |
63 | | - </ButtonLink> |
64 | | - </li> |
65 | | - </ul> |
66 | | - </li> |
67 | | - </ul> |
68 | | - </nav> |
69 | 22 | </div> |
70 | 23 | </header> |
71 | 24 | } |
|
0 commit comments