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

added navigation hover effects
RustLangES · May 1, 2024 · c21cff9 · c21cff9
2 parents c8a73b1 + 9244899
commit c21cff9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
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>