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

added navigation hover effects

Author: Phosphorus-M

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;
+}

package-lock.json

@@ -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>