Merge pull request #45 from velascoandres/feat/navigation-hover-effects

Feat/navigation hover effects
RustLangES · Apr 28, 2024 · 878ccdb · 878ccdb
2 parents 6988a14 + d71cb25
commit 878ccdb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/input.css b/input.css
@@ -450,4 +450,21 @@
 
 .hh20 {
   color: #f29e74; /* label */
+}
+
+/*
+* Navigation styles
+*/
+#navigation li {
+  cursor: pointer;
+}
+
+#navigation li:after {
+    content: '';
+    @apply  block border border-orange-600 transition-transform ease-in-out duration-200 scale-x-0;
+}
+
+#navigation li:hover:after {
+  transform: scaleX(1); 
+  @apply  scale-x-100;
 }
diff --git a/src/components/esta_semana_en_rust/header.rs b/src/components/esta_semana_en_rust/header.rs
@@ -27,12 +27,16 @@ pub fn Header() -> impl IntoView {
                         <span class="w-6 h-1 bg-black block my-4 relative after:absolute after:block after:bg-black after:w-6 after:h-1 after:bottom-2 before:absolute before:block before:bg-black before:w-6 before:h-1 before:-bottom-2"></span>
                     </button>
                 </div>
-                <nav class=move || {
-                    format!(
-                        "w-full lg:w-auto pb-10 pt-5 lg:p-0 {}",
-                        if is_open.get() { "block" } else { "hidden lg:block" },
-                    )
-                }>
+                <nav
+                    id="navigation"
+                    class=move || {
+                        format!(
+                            "w-full lg:w-auto pb-10 pt-5 lg:p-0 {}",
+                            if is_open.get() { "block" } else { "hidden lg:block" },
+                        )
+                    }
+                >
+
                     <ul class="flex items-center gap-6 flex-col lg:flex-row lg:items-center ">
 
                         <li>

diff --git a/src/components/header.rs b/src/components/header.rs
@@ -22,12 +22,16 @@ pub fn Header() -> impl IntoView {
                         <span class="w-6 h-1 bg-black block my-4 relative after:absolute after:block after:bg-black after:w-6 after:h-1 after:bottom-2 before:absolute before:block before:bg-black before:w-6 before:h-1 before:-bottom-2"></span>
                     </button>
                 </div>
-                <nav class=move || {
-                    format!(
-                        "w-full lg:w-auto pb-10 pt-5 lg:p-0 {}",
-                        if is_open.get() { "block" } else { "hidden lg:block" },
-                    )
-                }>
+                <nav
+                    id="navigation"
+                    class=move || {
+                        format!(
+                            "w-full lg:w-auto pb-10 pt-5 lg:p-0 {}",
+                            if is_open.get() { "block" } else { "hidden lg:block" },
+                        )
+                    }
+                >
+
                     <ul class="flex items-center gap-6 flex-col lg:flex-row lg:items-center">
                         <li>
                             <a href="https://www.rustlang-es.org/rust-book-es" target="_blank">