Skip to content

Commit 333c7de

Browse files
harshad-tahilianiharshad-tahiliani
authored
feat: product navigation update
1 parent 82e05fa commit 333c7de

25 files changed

+619
-157
lines changed

‎src/components/nav/DrawerNav.tsx

+21-1
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,9 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
4444
<div className="sub-menu">
4545
<SubLink href="https://traefik.io/traefik/">Traefik Proxy</SubLink>
4646
<SubLink href="https://traefik.io/traefik-hub-api-gateway/">Traefik Hub API Gateway</SubLink>
47-
<SubLink href="https://traefik.io/traefik-enterprise/">Traefik Enterprise</SubLink>
4847
<SubLink href="https://traefik.io/traefik-hub/">Traefik Hub API Management</SubLink>
48+
<SubLink href="https://traefik.io/solutions/ai-gateway">AI Gateway</SubLink>
49+
<SubLink href="https://traefik.io/solutions/api-mocking">API Mocking</SubLink>
4950
</div>
5051
</div>
5152

@@ -112,6 +113,25 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
112113
</div>
113114
</div>
114115

116+
<div className="menu-item-wrapper menu-item-wrapper--expandable" onClick={(e) => toggleMenu(e)}>
117+
<span className="menu-item menu-item--with-icon">
118+
<span className="title">Compare</span>
119+
<span className="icon">
120+
<Chevron />
121+
</span>
122+
</span>
123+
<div className="sub-menu">
124+
<SubLink href="https://traefik.io/compare/traefik-vs-kong-konnect/">vs Kong Konnect</SubLink>
125+
<SubLink href="https://traefik.io/compare/traefik-vs-aws-api-gateway/">vs AWS API Gateway</SubLink>
126+
<SubLink href="https://traefik.io/compare/traefik-vs-azure-api-management/">vs Azure APIM</SubLink>
127+
<SubLink href="https://traefik.io/compare/traefik-vs-nginx/">vs NGINX</SubLink>
128+
<SubLink href="https://traefik.io/compare/traefik-vs-solo-gloo-gateway/">vs Solo.io Gloo Gateway</SubLink>
129+
<SubLink href="https://traefik.io/compare/traefik-vs-tyk">vs Tyk</SubLink>
130+
<SubLink href="https://traefik.io/compare/traefik-vs-gravitee/">vs Gravitee</SubLink>
131+
<SubLink href="https://traefik.io/compare/traefik-vs-envoy-gateway">vs Envoy Gateway</SubLink>
132+
</div>
133+
</div>
134+
115135
<div className="menu-item-wrapper">
116136
<SubLink href="https://traefik.io/pricing/" className="menu-item">
117137
Pricing

‎src/components/nav/MainNav.tsx

+123-55
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,15 @@ import NavItem from './NavItem'
55
import Product from './Product'
66
import * as MenuColumn from './MenuColumn'
77
import useGetLastPost from 'hooks/use-get-last-post'
8+
import { ReactComponent as IconKubernetes } from '../../images/IconKubernetes.svg'
9+
import { ReactComponent as IconDockerSwarm } from '../../images/IconDockerSwarm.svg'
10+
import { ReactComponent as IconApiGovernance } from '../../images/IconApiGovernance.svg'
11+
import { ReactComponent as IconsApiMocks } from '../../images/IconsApiMocks.svg'
12+
import { ReactComponent as IconAiGateway } from '../../images/IconAiGateway.svg'
13+
import { ReactComponent as IconWaf } from '../../images/IconWaf.svg'
814
import { ReactComponent as TraefikHubIcon } from '../../images/Traefikhub.svg'
915
import { ReactComponent as TraefikIcon } from '../../images/Traefik-Hub.svg'
1016
import { ReactComponent as TraefikProxyIcon } from '../../images/TraefikProxy.svg'
11-
import { ReactComponent as TraefikEnterpriseIcon } from '../../images/TraefikEnterprise.svg'
1217
import { ReactComponent as ApiGatewayIcon } from '../../images/APIGateway.svg'
1318
import { ReactComponent as ApiGovernanceIcon } from '../../images/APIGovernance.svg'
1419
import { ReactComponent as ApiMockingIcon } from '../../images/APIMocking.svg'
@@ -31,6 +36,7 @@ import { ReactComponent as WafIcon } from '../../images/menu_icons_waf.svg'
3136
import { ReactComponent as HashicorpIcon } from '../../images/menu_icons_hashicorp.svg'
3237
import { ReactComponent as AiGatewayIcon } from '../../images/menu_icons_ai_gateway.svg'
3338
import PostCard from './PostCard'
39+
import NavHeader from './NavHeader'
3440

3541
const Wrapper = styled(Flex)`
3642
display: none;
@@ -48,59 +54,85 @@ const MainNav = () => {
4854
<Flex as="ul" sx={{ height: '100%', alignItems: 'center', p: 0, m: 0, listStyle: 'none' }}>
4955
{/* Products */}
5056
<NavItem name="Products" hasSubmenu position={{ marginLeft: '-15%' }}>
51-
<Grid sx={{ gridTemplateColumns: '1fr 1fr 1fr', maxWidth: '1160px' }}>
52-
<Product
53-
title="Application Proxy"
54-
description="Simplify microservice discovery, routing, & load balancing."
55-
links={[
56-
{
57-
title: 'Traefik Proxy',
58-
url: 'https://traefik.io/traefik/',
59-
external: true,
60-
description: 'OSS Cloud-Native Application Proxy',
61-
icon: <TraefikProxyIcon />,
62-
},
63-
]}
64-
bgImage={'https://traefik.io/images/site-nav/[email protected]'}
65-
/>
66-
<Product
67-
title="API Gateway"
68-
description="Enhance security & centralize control of your APIs and microservices."
69-
links={[
70-
{
71-
title: 'Traefik Hub',
72-
url: 'https://traefik.io/traefik-hub-api-gateway/',
73-
tag: 'API Gateway',
74-
external: true,
75-
description: 'Seamless Upgrade from Traefik Proxy',
76-
tagColor: 'rgb(177,64,245)',
77-
icon: <TraefikIcon />,
78-
},
79-
{
80-
title: 'Traefik Enterprise',
81-
url: 'https://traefik.io/traefik-enterprise/',
82-
external: true,
83-
description: 'Standalone General-Purpose API Gateway',
84-
icon: <TraefikEnterpriseIcon />,
85-
},
86-
]}
87-
bgImage={'https://traefik.io/images/site-nav/[email protected]'}
88-
/>
89-
<Product
90-
title="API Management"
91-
description="Simplify & accelerate API lifecycle management in Kubernetes."
92-
links={[
93-
{
94-
title: 'Traefik Hub',
95-
url: 'https://traefik.io/traefik-hub/',
96-
external: true,
97-
tag: 'API Management',
98-
description: 'Kubernetes-Native API Management',
99-
icon: <TraefikHubIcon />,
100-
},
101-
]}
102-
bgImage={'https://traefik.io/images/site-nav/[email protected]'}
103-
/>
57+
<Grid sx={{ gridTemplateColumns: '1fr', maxWidth: '1160px' }}>
58+
<NavHeader title="Traefik Runtime Platform" />
59+
<Grid sx={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
60+
<Product
61+
links={[
62+
{
63+
title: 'Traefik Proxy →',
64+
url: 'https://traefik.io/traefik/',
65+
external: true,
66+
description: 'OSS Cloud-Native Application Proxy',
67+
icon: <TraefikProxyIcon />,
68+
},
69+
]}
70+
subLinks={[
71+
{
72+
title: 'Kubernetes Ingress',
73+
external: true,
74+
icon: <IconKubernetes />,
75+
url: 'https://traefik.io/solutions/kubernetes-ingress/',
76+
},
77+
{
78+
title: 'Docker Swarm Ingress',
79+
external: true,
80+
icon: <IconDockerSwarm />,
81+
url: 'https://traefik.io/solutions/docker-swarm-ingress/',
82+
},
83+
]}
84+
/>
85+
<Product
86+
links={[
87+
{
88+
title: 'Traefik API Gateway →',
89+
url: 'https://traefik.io/traefik-hub-api-gateway/',
90+
external: true,
91+
description: 'Seamless Upgrade from Traefik Proxy',
92+
icon: <TraefikIcon />,
93+
},
94+
]}
95+
subLinks={[
96+
{
97+
title: 'Web Application Firewall',
98+
external: true,
99+
icon: <IconWaf />,
100+
url: 'https://traefik.io/solutions/waf/',
101+
},
102+
{
103+
title: 'AI Gateway',
104+
external: true,
105+
icon: <IconAiGateway />,
106+
url: 'https://traefik.io/solutions/ai-gateway/',
107+
},
108+
]}
109+
/>
110+
<Product
111+
links={[
112+
{
113+
title: 'Traefik API Management →',
114+
url: 'https://traefik.io/traefik-hub/',
115+
external: true,
116+
description: 'GitOps-Driven API Management',
117+
icon: <TraefikHubIcon />,
118+
},
119+
]}
120+
subLinks={[
121+
{
122+
title: 'API Governance',
123+
external: true,
124+
icon: <IconApiGovernance />,
125+
url: 'https://traefik.io/solutions/api-governance/',
126+
},
127+
{
128+
title: 'API Mocking',
129+
external: true,
130+
icon: <IconsApiMocks />,
131+
url: 'https://traefik.io/solutions/api-mocking/',
132+
},
133+
]}
134+
/>
135+
</Grid>
104136
</Grid>
105137
</NavItem>
106138

@@ -183,7 +215,8 @@ const MainNav = () => {
183215
title: 'Runtime API Governance',
184216
url: 'https://traefik.io/solutions/api-governance/',
185217
external: true,
186-
description: 'Enforce critical runtime API policies for secure, reliable, and compliant API management.',
218+
description:
219+
'Enforce critical runtime API policies for secure, reliable, and compliant API management.',
187220
icon: <ApiGovernanceIcon />,
188221
badge: 'New!',
189222
},
@@ -264,6 +297,41 @@ const MainNav = () => {
264297
</Grid>
265298
</NavItem>
266299

300+
<NavItem name="Compare" hasSubmenu>
301+
<Grid sx={{ gridTemplateColumns: '1fr', width: '304px', p: '24px' }}>
302+
<MenuColumn.Column title="Compare Traefik Hub">
303+
<MenuColumn.Item
304+
title="vs Kong Konnect"
305+
href="https://traefik.io/compare/traefik-vs-kong-konnect/"
306+
external
307+
/>
308+
<MenuColumn.Item
309+
title="vs AWS API Gateway"
310+
href="https://traefik.io/compare/traefik-vs-aws-api-gateway/"
311+
external
312+
/>
313+
<MenuColumn.Item
314+
title="vs Azure APIM"
315+
href="https://traefik.io/compare/traefik-vs-azure-api-management/"
316+
external
317+
/>
318+
<MenuColumn.Item title="vs NGINX" href="https://traefik.io/compare/traefik-vs-nginx/" external />
319+
<MenuColumn.Item
320+
title="vs Solo.io Gloo Gateway"
321+
href="https://traefik.io/compare/traefik-vs-nginx/"
322+
external
323+
/>
324+
<MenuColumn.Item title="vs Tyk" href="https://traefik.io/compare/compare/traefik-vs-tyk" external />
325+
<MenuColumn.Item title="vs Gravitee" href="https://traefik.io/compare/traefik-vs-gravitee/" external />
326+
<MenuColumn.Item
327+
title="vs Envoy Gateway"
328+
href="https://traefik.io/compare/traefik-vs-envoy-gateway/"
329+
external
330+
/>
331+
</MenuColumn.Column>
332+
</Grid>
333+
</NavItem>
334+
267335
{/* Pricing */}
268336
<NavItem name="Pricing" url="https://traefik.io/pricing/" />
269337

‎src/components/nav/MenuColumn.tsx

+25-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react'
22
import styled from 'styled-components'
33
import Link from 'components/Link'
4-
import { Box, Text, theme } from '@containous/faency'
4+
import { Box, Text } from '@containous/faency'
5+
import { ReactComponent as ArrowRight } from '../../images/arrow-right.svg'
56

67
const Links = styled.ul`
78
list-style: none;
@@ -21,16 +22,28 @@ const Links = styled.ul`
2122
font-size: 16px;
2223
line-height: 1.38;
2324
font-weight: 500;
24-
color: ${theme.colors.dark};
25+
color: #354757;
2526
text-decoration: none;
2627
28+
svg {
29+
color: #677581;
30+
}
31+
32+
i svg {
33+
opacity: 0;
34+
transition: opacity 0.2s ease-in-out;
35+
}
36+
2737
&:hover {
28-
color: #1f56d6;
38+
color: #000;
2939
text-decoration: none;
3040
31-
p:first-of-type {
32-
color: #1f56d6;
33-
text-decoration: none;
41+
svg {
42+
color: #000;
43+
}
44+
45+
i svg {
46+
opacity: 1;
3447
}
3548
3649
span: {
@@ -60,11 +73,11 @@ export const Column: React.FC<MenuColumnProps> = ({ title, children }) => (
6073
<Text
6174
as="p"
6275
sx={{
63-
mb: '14px',
76+
mb: '24px',
6477
fontSize: '11px',
6578
fontWeight: 500,
6679
lineHeight: 1.33,
67-
color: '#7e89a7',
80+
color: '#03192d',
6881
letterSpacing: '2.75px',
6982
}}
7083
>
@@ -87,7 +100,7 @@ export const Item: React.FC<MenuColumnLinkProps> = ({ href, external, title, log
87100
{external ? (
88101
<Link href={href} target="_self" {...props}>
89102
{logo ? (
90-
<Box sx={{ display: 'flex', paddingTop: '5px' }}>
103+
<Box sx={{ display: 'inline-flex', paddingTop: '5px' }}>
91104
{logo}
92105
<Box sx={{ ml: '15px', maxWidth: '290px' }}>
93106
<Text as="p">{title}</Text>
@@ -97,6 +110,9 @@ export const Item: React.FC<MenuColumnLinkProps> = ({ href, external, title, log
97110
) : (
98111
title
99112
)}
113+
<i>
114+
<ArrowRight style={{ marginLeft: 4, display: 'inline-block', width: 16 }} />
115+
</i>
100116
</Link>
101117
) : (
102118
<Link href={href} {...props}>

‎src/components/nav/NavHeader.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import styled from 'styled-components'
2+
3+
type Props = {
4+
title: string
5+
bgImage?: string
6+
}
7+
8+
const NavHeader = (props: Props) => {
9+
return (
10+
<Wrapper>
11+
<span>{props.title}</span>
12+
<img
13+
src="https://traefik.io/images/site-nav/[email protected]"
14+
style={{
15+
position: 'absolute',
16+
inset: 0,
17+
width: '100%',
18+
height: '100%',
19+
}}
20+
alt=""
21+
/>
22+
</Wrapper>
23+
)
24+
}
25+
26+
export default NavHeader
27+
28+
const Wrapper = styled.div`
29+
padding: 24px 24px 18px;
30+
font-size: 20px;
31+
font-weight: 500;
32+
line-height: 1.1;
33+
color: #03192d;
34+
border-bottom: solid 1px #9aa3ab33;
35+
position: relative;
36+
`

‎src/components/nav/NavItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const Menu = styled(Box)`
102102

103103
const MenuInner = styled(Box)`
104104
background: ${theme.colors.menuBg};
105-
border-radius: 8px;
105+
border-radius: 16px;
106106
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
107107
0 24px 38px 3px rgba(0, 0, 0, 0.14);
108108
overflow: hidden;

0 commit comments

Comments
 (0)