Header

.gitignore

@@ -8,6 +8,8 @@ bundled.css
 /assets/gen_assets/
 /src/extras/
 
+Cargo.lock
+
 # NixOs output folder
 /result
 

Cargo.toml

@@ -38,7 +38,8 @@ ssr = [
     "leptos/ssr",
     "leptos_meta/ssr",
     "leptos_router/ssr",
-    "leptos-use/ssr"
+    "leptos-use/ssr",
+    "leptos-use/actix"
 ]
 development = []
 

README.md

@@ -121,6 +121,36 @@ Agrega esto en tu `settings.json`
 }
 ```
 
+## Configura tu Zed
+
+Agrega esto en tu `settings.json`
+
+```json
+{
+  "lsp": {
+    "rust-analyzer": {
+      "binary": {
+        "path": "rust-analyzer"
+      },
+      "initialization_options": {
+        "cargo": {
+          "features": [
+            "ssr"
+          ]
+        },
+        "check": {
+          "command": "check",
+          "extraArgs": [
+            "--features",
+            "ssr"
+          ]
+        }
+      }
+    }
+  }
+}
+```
+
 ## Resumen
 
 Este proyecto utiliza una rama personalizada de Leptos para poder servir

src/app.rs

@@ -8,7 +8,7 @@ use leptos_router::{
 
 use crate::{
     components::{HeadInformation, Header},
-    pages::{Aprende, Communities, Index},
+    pages::{Aprende, Blog, Communities, Events, Index},
 };
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
@@ -60,16 +60,10 @@ pub fn App() -> impl IntoView {
                     <Header />
                     <Routes fallback=|| "Not found.">
                         <Route path=path!("/") view=Index />
-                        <Route path=path!("comunidad") view=Communities />
-                        // <Route
-                        // path=path!("colaboradores")
-                        // view=Contributors
-                        // />
-                        // <Route
-                        // path=path!("proyectos")
-                        // view=Projects
-                        // />
                         <Route path=path!("aprende") view=Aprende />
+                        <Route path=path!("comunidad") view=Communities />
+                        <Route path=path!("eventos") view=Events />
+                        <Route path=path!("blog") view=Blog />
                     </Routes>
                 </main>
             // <Footer />

src/components/header.rs

@@ -2,17 +2,21 @@ use crate::{
     components::icons::{NewLogoRustDarkPageIcon, NewLogoRustLightPageIcon},
     context::theme_provider::{Theme, use_theme},
 };
-use leptos::{leptos_dom::logging::console_log, prelude::*};
+use leptos::prelude::*;
 use leptos_use::{use_media_query, use_window};
 use rustlanges_components::{
     button::{Button, Variant},
-    icons::{Moon, SunLine, SunMoon},
+    icons::{Close, Menu, Moon, SunLine, SunMoon},
 };
 
+const BOOK_PATH: &str = "https://book.rustlang-es.org/";
+const JOIN_PATH: &str = "https://discord.rustlang-es.org/";
+
 #[island]
 pub fn Header() -> impl IntoView {
     let this = use_window();
     let path = RwSignal::new("/".to_string());
+    let menu_open = RwSignal::new(false);
 
     Effect::new(move |_| {
         let result = format!(
@@ -35,6 +39,18 @@ pub fn Header() -> impl IntoView {
         Theme::System => view! { <NewLogoRustDarkPageIcon size=60 /> }.into_any(),
     };
 
+    let menu_handler = move |_| {
+        menu_open.update(|open| *open = !*open);
+    };
+
+    let menu_icon = move || {
+        if menu_open() {
+            view! { <Close size=20 class="z-50 block" /> }.into_any()
+        } else {
+            view! { <Menu size=20 class="block" /> }.into_any()
+        }
+    };
+
     let theme_switcher_icon = move || match theme() {
         Theme::Dark => view! { <Moon /> }.into_any(),
         Theme::Light => view! { <SunLine /> }.into_any(),
@@ -43,25 +59,35 @@ pub fn Header() -> impl IntoView {
 
     let active_link_class = move |link: &str| {
         if path() == format!("{link:?}") {
-            "text-red-500 dark:text-orange-300"
+            "font-bold text-red-500 dark:text-orange-300"
         } else {
             ""
         }
     };
 
-    let handler = move |_| {
+    let theme_handler = move |_| {
         let current_theme = theme.get();
         match current_theme {
-            Theme::System => theme.set(Theme::Dark),
-            Theme::Dark => theme.set(Theme::Light),
-            Theme::Light => theme.set(Theme::System),
+            Theme::Light => theme.set(Theme::Dark),
+            Theme::Dark | Theme::System => theme.set(Theme::Light),
         }
     };
 
     view! {
-        <header class="w-full py-[8px] px-[24px] flex flex-column items-center justify-between">
-            {move || logo()} <div class="flex flex-column gap-[24px] items-center">
-                <div class="gap-[16px] hidden md:flex">
+        <header class="w-full py-[8px] px-[0px] flex flex-column items-center justify-between md:px-[24px] relative">
+            <div class="flex justify-between items-center">
+                <Button
+                    variant=Variant::Text
+                    class="px-[10px] md:hidden flex items-center justify-center"
+                    on_click=menu_handler
+                    icon=(move || menu_icon()).into_any()
+                />
+                <div class=move || {
+                    format!(
+                        "md:hidden absolute top-full left-0 w-full bg-white dark:bg-dark flex flex-col gap-[32px] p-[16px] z-50 {}",
+                        if menu_open() { "flex" } else { "hidden" },
+                    )
+                }>
                     <a href="/" class=move || active_link_class("/")>
                         Inicio
                     </a>
@@ -74,23 +100,103 @@ pub fn Header() -> impl IntoView {
                     <a href="/eventos" class=move || active_link_class("/eventos")>
                         Eventos
                     </a>
-                    <a href="https://blog.rustlang-es.org">Blog</a>
-                </div>
-                <div class="flex gap-[16px] items-center flex-wrap">
-                    <Button
-                        variant=Variant::Secondary
-                        label="El Libro"
-                        on_click=|_| {}
-                        class="hidden md:block"
-                    />
+                    <a href="/blog" class=move || active_link_class("/blog")>
+                        Blog
+                    </a>
+
                     <Button
-                        variant=Variant::Primary
-                        label="¡Únete!"
-                        on_click=move |_| console_log("hola")
+                        variant=Variant::Icon
+                        on_click=theme_handler
+                        icon=(move || theme_switcher_icon()).into_any()
                     />
+
+                    <div class="grid grid-cols-2 gap-[8px] w-full">
+                        <a href=BOOK_PATH target="_blank" rel="noopener noreferrer">
+                            <Button
+                                class="w-full"
+                                variant=Variant::Secondary
+                                label="El Libro"
+                                on_click=|_| {}
+                            />
+                        </a>
+                        <a href=JOIN_PATH target="_blank" rel="noopener noreferrer">
+                            <Button
+                                class="w-full"
+                                variant=Variant::Primary
+                                label="¡Únete!"
+                                on_click=move |_| {}
+                            />
+                        </a>
+                    </div>
+                    <hr />
+                    <p class="text-center opacity-50">Comunidad - Rust Lang en Español</p>
+                </div>
+                <div
+                    class=move || {
+                        format!(
+                            "fixed inset-0 bg-black/50 z-40 md:hidden {}",
+                            if menu_open() { "block" } else { "hidden" },
+                        )
+                    }
+                    on:click=move |_| menu_open.set(false)
+                ></div>
+                <a href="/" class=move || active_link_class("/")>
+                    {move || logo()}
+                </a>
+            </div>
+            <div class="flex flex-column gap-[24px] items-center">
+                <nav class="gap-[16px] hidden md:flex">
+                    <a href="/" class=move || format!("font-semibold {}", active_link_class("/"))>
+                        Inicio
+                    </a>
+                    <a
+                        href="/aprende"
+                        class=move || format!("font-semibold {}", active_link_class("/aprende"))
+                    >
+                        Aprende Rust
+                    </a>
+                    <a
+                        href="/comunidad"
+                        class=move || format!("font-semibold {}", active_link_class("/comunidad"))
+                    >
+                        Comunidad
+                    </a>
+                    <a
+                        href="/eventos"
+                        class=move || format!("font-semibold {}", active_link_class("/eventos"))
+                    >
+                        Eventos
+                    </a>
+                    <a
+                        href="/blog"
+                        class=move || format!("font-semibold {}", active_link_class("/blog"))
+                    >
+                        Blog
+                    </a>
+                </nav>
+                <div class="flex gap-[16px] items-center flex-wrap">
+                    <a
+                        href=BOOK_PATH
+                        class="hidden md:flex"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Button variant=Variant::Secondary label="El Libro" on_click=|_| {} />
+                    </a>
+
+                    <a
+                        href=JOIN_PATH
+                        class="px-[10px] md:px-[0px]"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <Button variant=Variant::Primary label="¡Únete!" on_click=move |_| {} />
+                    </a>
+
                     <Button
                         variant=Variant::Icon
-                        on_click=handler
+                        class="hidden md:flex"
+                        on_click=theme_handler
                         icon=(move || theme_switcher_icon()).into_any()
                     />
                 </div>

src/context/theme_provider.rs

@@ -1,13 +1,14 @@
+use std::fmt::Display;
+
 use leptos::{
     children::Children,
     prelude::{RwSignal, use_context, *},
     server::codee::string::JsonSerdeCodec,
     *,
 };
-use leptos_use::{storage::use_local_storage, use_media_query};
+use leptos_use::{use_cookie, use_media_query};
 use serde::{Deserialize, Serialize};
-/// Defines an enumeration for UI themes.
-///
+
 /// This enum can be cloned, copied, and compared for equality.
 /// It also supports serialization and deserialization for local storage.
 #[derive(Clone, Copy, PartialEq, Serialize, Deserialize, Debug)]
@@ -17,28 +18,28 @@ pub enum Theme {
     System,
 }
 
-// Implementation of the default value for the `Theme` enum
 impl Default for Theme {
-    /// provides the default theme as `Dark`
     fn default() -> Self {
         Theme::Dark
     }
 }
 
-#[allow(clippy::inherent_to_string)]
-impl Theme {
-    /// Converts the `Theme` variant into a corresponding string.
-    pub fn to_string(self) -> String {
-        String::from(match self {
-            Theme::Light => "light",
-            Theme::Dark => "dark",
-            Theme::System => "system",
-        })
+impl Display for Theme {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            f,
+            "{}",
+            match self {
+                Theme::Light => "light",
+                Theme::Dark => "dark",
+                Theme::System => "system",
+            }
+        )
     }
 }
 
-/// Define a constant for the local storage key used to store the theme setting.
-const STORAGE_KEY: &str = "theme";
+/// Define a constant for the cookie key used to store the theme setting.
+const COOKIE_KEY: &str = "theme";
 
 /// Updates the class selector for the respective theme.
 /// This function is responsible for applying the correct CSS class to the HTML and body elements based on the current theme.
@@ -102,16 +103,16 @@ pub fn ThemeProvider(children: Children) -> impl IntoView {
     let is_dark_preferred_signal = use_media_query("(prefers-color-scheme: dark)");
 
     // Attempt to retrieve the theme from local storage
-    let (theme_storage_state, set_theme_storage_state, _) =
-        use_local_storage::<Theme, JsonSerdeCodec>(STORAGE_KEY);
+    let (theme_storage_state, set_theme_storage_state) =
+        use_cookie::<Theme, JsonSerdeCodec>(COOKIE_KEY);
 
-    let theme_state = RwSignal::new(theme_storage_state.get_untracked());
+    let theme_state = RwSignal::new(theme_storage_state.get_untracked().unwrap_or_default());
     provide_context(theme_state);
 
     // Update local storage and CSS whenever the theme state changes
     Effect::new(move |_| {
-        let current_theme = theme_state();
-        set_theme_storage_state.set(current_theme);
+        let current_theme: Theme = theme_state();
+        set_theme_storage_state.set(Some(current_theme));
         update_css_for_theme(
             current_theme,
             is_dark_preferred_signal(),

src/pages/blog.rs

@@ -0,0 +1,4 @@
+use leptos::{IntoView, component};
+
+#[component]
+pub fn Blog() -> impl IntoView {}