Compare pages in nav menu & nav icon color update

Author: harshad-tahiliani

src/components/nav/DrawerNav.tsx

@@ -113,6 +113,20 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
           </div>
         </div>
 
+        <div className="menu-item-wrapper menu-item-wrapper--expandable" onClick={(e) => toggleMenu(e)}>
+          <span className="menu-item menu-item--with-icon">
+            <span className="title">Compare</span>
+            <span className="icon">
+              <Chevron />
+            </span>
+          </span>
+          <div className="sub-menu">
+            <SubLink href="https://traefik.io/compare/traefik-vs-kong-konnect/">vs Kong Konnect</SubLink>
+            <SubLink href="https://traefik.io/compare/traefik-vs-aws-api-gateway/">vs AWS API Gateway</SubLink>
+            <SubLink href="https://traefik.io/compare/traefik-vs-azure-api-management/">vs AWS API Gateway</SubLink>
+          </div>
+        </div>
+
         <div className="menu-item-wrapper">
           <SubLink href="https://traefik.io/pricing/" className="menu-item">
             Pricing

src/components/nav/MainNav.tsx

@@ -297,6 +297,28 @@ const MainNav = () => {
           </Grid>
         </NavItem>
 
+        <NavItem name="Compare" hasSubmenu>
+          <Grid sx={{ gridTemplateColumns: '1fr', width: '304px', p: '24px' }}>
+            <MenuColumn.Column title="Compare Traefik Hub">
+              <MenuColumn.Item
+                title="vs Kong Konnect"
+                href="https://traefik.io/compare/traefik-vs-kong-konnect/"
+                external
+              />
+              <MenuColumn.Item
+                title="vs AWS API Gateway"
+                href="https://traefik.io/compare/traefik-vs-aws-api-gateway/"
+                external
+              />
+              <MenuColumn.Item
+                title="vs Azure APIM"
+                href="https://traefik.io/compare/traefik-vs-azure-api-management/"
+                external
+              />
+            </MenuColumn.Column>
+          </Grid>
+        </NavItem>
+
         {/* Pricing */}
         <NavItem name="Pricing" url="https://traefik.io/pricing/" />
 

src/components/nav/MenuColumn.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import Link from 'components/Link'
 import { Box, Text, theme } from '@containous/faency'
+import { ReactComponent as ArrowRight } from '../../images/arrow-right.svg'
 
 const Links = styled.ul`
   list-style: none;
@@ -21,16 +22,28 @@ const Links = styled.ul`
     font-size: 16px;
     line-height: 1.38;
     font-weight: 500;
-    color: ${theme.colors.dark};
+    color: #354757;
     text-decoration: none;
 
+    svg {
+      color: #677581;
+    }
+
+    i svg {
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+
     &:hover {
-      color: #1f56d6;
+      color: #000;
       text-decoration: none;
 
-      p:first-of-type {
-        color: #1f56d6;
-        text-decoration: none;
+      svg {
+        color: #000;
+      }
+
+      i svg {
+        opacity: 1;
       }
 
       span: {
@@ -60,11 +73,11 @@ export const Column: React.FC<MenuColumnProps> = ({ title, children }) => (
     <Text
       as="p"
       sx={{
-        mb: '14px',
+        mb: '24px',
         fontSize: '11px',
         fontWeight: 500,
         lineHeight: 1.33,
-        color: '#7e89a7',
+        color: '#03192d',
         letterSpacing: '2.75px',
       }}
     >
@@ -87,7 +100,7 @@ export const Item: React.FC<MenuColumnLinkProps> = ({ href, external, title, log
     {external ? (
       <Link href={href} target="_self" {...props}>
         {logo ? (
-          <Box sx={{ display: 'flex', paddingTop: '5px' }}>
+          <Box sx={{ display: 'inline-flex', paddingTop: '5px' }}>
             {logo}
             <Box sx={{ ml: '15px', maxWidth: '290px' }}>
               <Text as="p">{title}</Text>
@@ -97,6 +110,9 @@ export const Item: React.FC<MenuColumnLinkProps> = ({ href, external, title, log
         ) : (
           title
         )}
+        <i>
+          <ArrowRight style={{ marginLeft: 4, display: 'inline-block', width: 16 }} />
+        </i>
       </Link>
     ) : (
       <Link href={href} {...props}>