update nav-list

gvao · Nov 19, 2023 · 1c4e0cf · 1c4e0cf
1 parent 72389ab
commit 1c4e0cf
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
                     menu
                 </span>
 
-                <ul class="nav__list --hide">
+                <ul class="nav__list">
                     <li class="item"><a href="/">home</a></li>
                     <li class="item"><a href="#about">sobre</a></li>
                     <li class="item"><a href="#skills">habilidades</a></li>

diff --git a/src/styles/components/header.css b/src/styles/components/header.css
@@ -29,9 +29,9 @@
     background-color: var(--color-primary);
     padding: 16px;
     height: 100vh;
+    width: 33vw;
 
     display: none;
-    /* display: flex; */
 
     flex-direction: column;
     gap: 12px;
@@ -46,8 +46,6 @@
 
     transform: translate(0%, 100%);
     opacity: 0;
-    /* transition: all 2s; */
-    /* animation: hideNav 3s forwards; */
 }
 
 .nav__list.--show {
@@ -66,23 +64,35 @@
 }
 
 .nav__list .item {
-    padding: 8px 10px;
     position: relative;
+
+    height: 8vmin;
+    width: 100%;
+
     opacity: 0.7;
     transition-property: transform, opacity;
     transition-duration: 0.5s;
 }
 
+.nav__list .item > a {
+    display: block;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .nav__list .item:hover {
     transform: scale(1.3);
     opacity: 1;
+    justify-content: center;
 }
 
 .nav__list .item::after {
     content: "";
     width: 0%;
     height: 0%;
-    /* background-color: var(--color-default); */
     background-image: linear-gradient(to right, var(--color-default), var(--color-default), transparent);
     position: absolute;
     bottom: 0;
@@ -131,7 +141,7 @@
         opacity: 0;
         transform: translate(100%, 100%);
     }
-    
+
     100% {
         display: flex;
         opacity: 1;
@@ -145,7 +155,7 @@
         opacity: 1;
         transform: translate(0%, 100%);
     }
-    
+
     100% {
         display: none;
         opacity: 0;