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

Phosphorus-M · web-flow · commit c21cff97451c · 2024-05-01T02:04:34.000-03:00
added navigation hover effects
diff --git a/input.css b/input.css
@@ -43,3 +43,19 @@
   width: 100%;
   height: auto;
 }
+
+/*
+* Navigation styles
+*/
+.nav-item {
+  cursor: pointer;
+}
+
+.nav-item:after {
+    content: '';
+    @apply  block border border-orange-600 transition-transform ease-in-out duration-200 scale-x-0;
+}
+
+.nav-item:hover:after {
+  @apply  scale-x-100;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/header.rs b/src/components/header.rs
@@ -30,22 +30,22 @@ pub fn Header() -> impl IntoView {
                     )
                 }>
                     <ul class="flex items-center gap-6 flex-col lg:flex-row lg:items-center">
-                        <li>
+                        <li class="nav-item">
                             <a href="https://rustlang-es.org/rust-book-es" target="_blank">
                                 "El Libro"
                             </a>
                         </li>
-                        <li>
+                        <li class="nav-item">
                             <a href="/aprende">"Aprende"</a>
                         </li>
-                        <li>
+                        <li class="nav-item">
                             <a href="/comunidad">"Comunidad"</a>
                         </li>
 
-                        <li>
+                        <li class="nav-item">
                             <a href="/colaboradores">"Colaboradores"</a>
                         </li>
-                        <li>
+                        <li class="nav-item">
                             <a href="https://rustlang-es.org/blog/" target="_self">
                                 "Blog"
                             </a>
