From bc64c9566c4f1410dc7c22e287533473a6052085 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 16:18:10 +0100
Subject: Header changes, mobile alignments

---
 packages/website/ts/@next/components/header.tsx | 39 ++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index b0dabf98d..73f615643 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -36,7 +36,11 @@ const mobileProductLinks = [
 ];
 
 const navItems: NavItem[] = [
-    { id: 'why', url: '/next/why', text: 'Why 0x' },
+    {
+        id: 'why',
+        url: '/next/why',
+        text: 'Why 0x',
+    },
     {
         id: 'products',
         url: '/next/0x-instant',
@@ -49,10 +53,18 @@ const navItems: NavItem[] = [
         url: '#',
         text: 'Developers',
         dropdownComponent: DropdownDevelopers,
-        dropdownWidth: 450,
+        dropdownWidth: 480,
+    },
+    {
+        id: 'about',
+        url: '/next/about/mission',
+        text: 'About',
+    },
+    {
+        id: 'blog',
+        url: '#',
+        text: 'Blog',
     },
-    { id: 'about', url: '/next/about/mission', text: 'About' },
-    { id: 'blog', url: '#', text: 'Blog' },
 ];
 
 class HeaderBase extends React.Component<HeaderProps, HeaderState> {
@@ -72,13 +84,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
         return (
             <Wrapper key={`nav-${index}`}>
-                <Link
+                <NavLink
                     href={link.url}
                     isTransparent={true}
                     isNoBorder={true}
                 >
                     {link.text}
-                </Link>
+                </NavLink>
 
                 {link.dropdownComponent &&
                     <DropdownWrap width={link.dropdownWidth}>
@@ -118,7 +130,9 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                         </MobileProductLinksWrap>
 
                         <StyledButtonWrap>
-                          {_.map(navItems, (link, index) => this.getNavItem(link, index))}
+                          {_.map(navItems, (link, index) => (
+                              this.getNavItem(link, index)
+                          ))}
                         </StyledButtonWrap>
                     </Nav>
 
@@ -152,6 +166,17 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     }
 `;
 
+const NavLink = styled(Link).attrs({
+    activeStyle: { opacity: 1 },
+})`
+    opacity: 0.5;
+    transition: opacity 0.35s;
+
+    &:hover {
+        opacity: 1;
+    }
+`;
+
 const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
   align-items: center;
-- 
cgit v1.2.3