added navigation hover effects

Author: velascoandres

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

@@ -55,10 +55,10 @@ pub fn ProjectCard(
                             button_text.to_string()
                         }}
 
-                        </ButtonLink>
-                        <span class="px-1">
+                    </ButtonLink>
+                    <span class="px-1">
                         <GithubIcon size=30/>
-                        </span>
+                    </span>
                 </div>
             </a>
         </div>

src/components/cards/project_card.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>