modify navigation with icons and hover state

orsi · Feb 28, 2019 · cad4263 · cad4263
1 parent b1516c6
commit cad4263
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/src/app.component.css b/src/app.component.css
@@ -26,15 +26,15 @@
     transform: translate(-50%, -50%);
 }
 .current-view--about > .app-background::after {
-    background: hsla(15, 73%, 50%, 1);;
+    background: hsl(359, 69%, 64%);
     animation: background-anim 2s ease-in forwards;
 }
 .current-view--work > .app-background::after {
-    background: hsla(160, 70%, 65%, 1);
+    background: hsl(109, 67%, 66%);
     animation: background-anim 2s ease-in forwards;
 }
 .current-view--projects > .app-background::after {
-    background:  hsl(230, 80%, 85%);
+    background:  hsla(208, 49%, 64%, 1);
     animation: background-anim 2s ease-in forwards;
 }
 

diff --git a/src/views/home/home.component.css b/src/views/home/home.component.css
@@ -25,39 +25,63 @@
     text-transform: uppercase;
 }
 
+.home__links-item {
+    margin-bottom: 8px;
+}
+
 .link,
 .link:link,
 .link:visited {
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    padding: 8px;
+    padding: 0 16px;
     color: inherit;
+    text-align: center;
     text-decoration: none;
+    border-radius: 32px;
+    transition: all .2s ease;
+}
+.link:hover  {
+    box-shadow: 0 3px 3px hsla(0, 0%, 0%, .25);
+}
+.link.link--about:hover  {
+    background-color: hsl(359, 69%, 64%);;
+}
+.link.link--work:hover  {
+    background-color: hsl(109, 67%, 66%);
+}
+.link.link--projects:hover  {
+    background-color: hsla(208, 49%, 64%, 1);
+}
+.link.link--resume:hover  {
+    background-color: hsla(38, 94%, 72%, 1);
 }
 .link-icon {
     display: inline-block;
     padding-top: 3px;
-    margin-right: 8px;
     line-height: 1;
     white-space: nowrap;
 }
 .link-text {
+    display: inline-block;
+    margin-left: 16px;
 }
 
 @media (min-width: 768px) {
     .home__links-list {
         display: inline-flex;
     }
     .home__links-item {
-        margin: 0 8px;
+        margin: 0 4px;
     }
     .link-text {
+        margin-left: 0;
         overflow: hidden;
         width: 0px;
-        transition: width .2s ease;
+        transition: width .3s ease;
     }
     .link:hover .link-text {
-        width: 60px;
+        width: 80px;
     }
 }
diff --git a/src/views/home/home.component.js b/src/views/home/home.component.js
@@ -19,25 +19,25 @@ class HomeViewComponent extends Component {
         <nav className="home__nav">
           <ul className="home__links-list list-unstyled">
               <li className="home__links-item">
-                <Link className="link" to="/about">
+                <Link className="link link--about" to="/about">
                   <span className="link-icon"><MdHelp /></span>
                   <span className="link-text">About</span>
                 </Link>
               </li>
               <li className="home__links-item">
-                <Link className="link" to="/work">
+                <Link className="link link--work" to="/work">
                   <span className="link-icon"><MdWork /></span>
                   <span className="link-text">Work</span>
                 </Link>
               </li>
               <li className="home__links-item">
-                <Link className="link" to="/projects">
+                <Link className="link link--projects" to="/projects">
                   <span className="link-icon"><MdCode /></span>
                   <span className="link-text">Projects</span>
                 </Link>
               </li>
               <li className="home__links-item">
-                <Link className="link" to="/resume">
+                <Link className="link link--resume" to="/resume">
                   <span className="link-icon"><MdDescription /></span>
                   <span className="link-text">Resume</span>
                 </Link>