Skip to content

feat: product navigation update #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Feb 14, 2025
Merged

feat: product navigation update #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
30727c6
feat: product navigation update
harshad-tahiliani Jan 20, 2025
41df832
Removed traefik enterprise from mobile nav
harshad-tahiliani Jan 20, 2025
bbe6890
Ai gateway and api mocking links in mobile product nav
harshad-tahiliani Jan 21, 2025
729a8e0
Product nav background image styles fix
harshad-tahiliani Jan 24, 2025
ba78e9f
Compare pages in nav menu & nav icon color update
harshad-tahiliani Jan 29, 2025
2449a27
Tyk Compare page link added in nav
harshad-tahiliani Feb 4, 2025
1d2766f
feat: added new compare pages in nav
harshad-tahiliani Feb 12, 2025
c620c36
feat: envoy gateway compare page in nav
harshad-tahiliani Feb 12, 2025
1ca05b7
fix: eslint issues
arpban Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion src/components/nav/DrawerNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,9 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
<div className="sub-menu">
<SubLink href="https://traefik.io/traefik/">Traefik Proxy</SubLink>
<SubLink href="https://traefik.io/traefik-hub-api-gateway/">Traefik Hub API Gateway</SubLink>
<SubLink href="https://traefik.io/traefik-enterprise/">Traefik Enterprise</SubLink>
<SubLink href="https://traefik.io/traefik-hub/">Traefik Hub API Management</SubLink>
<SubLink href="https://traefik.io/solutions/ai-gateway">AI Gateway</SubLink>
<SubLink href="https://traefik.io/solutions/api-mocking">API Mocking</SubLink>
</div>
</div>

Expand Down Expand Up @@ -112,6 +113,25 @@ 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 Azure APIM</SubLink>
<SubLink href="https://traefik.io/compare/traefik-vs-nginx/">vs NGINX</SubLink>
<SubLink href="https://traefik.io/compare/traefik-vs-solo-gloo-gateway/">vs Solo.io Gloo Gateway</SubLink>
<SubLink href="https://traefik.io/compare/traefik-vs-tyk">vs Tyk</SubLink>
<SubLink href="https://traefik.io/compare/traefik-vs-gravitee/">vs Gravitee</SubLink>
<SubLink href="https://traefik.io/compare/traefik-vs-envoy-gateway">vs Envoy Gateway</SubLink>
</div>
</div>

<div className="menu-item-wrapper">
<SubLink href="https://traefik.io/pricing/" className="menu-item">
Pricing
Expand Down
178 changes: 123 additions & 55 deletions src/components/nav/MainNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,15 @@ import NavItem from './NavItem'
import Product from './Product'
import * as MenuColumn from './MenuColumn'
import useGetLastPost from 'hooks/use-get-last-post'
import { ReactComponent as IconKubernetes } from '../../images/IconKubernetes.svg'
import { ReactComponent as IconDockerSwarm } from '../../images/IconDockerSwarm.svg'
import { ReactComponent as IconApiGovernance } from '../../images/IconApiGovernance.svg'
import { ReactComponent as IconsApiMocks } from '../../images/IconsApiMocks.svg'
import { ReactComponent as IconAiGateway } from '../../images/IconAiGateway.svg'
import { ReactComponent as IconWaf } from '../../images/IconWaf.svg'
import { ReactComponent as TraefikHubIcon } from '../../images/Traefikhub.svg'
import { ReactComponent as TraefikIcon } from '../../images/Traefik-Hub.svg'
import { ReactComponent as TraefikProxyIcon } from '../../images/TraefikProxy.svg'
import { ReactComponent as TraefikEnterpriseIcon } from '../../images/TraefikEnterprise.svg'
import { ReactComponent as ApiGatewayIcon } from '../../images/APIGateway.svg'
import { ReactComponent as ApiGovernanceIcon } from '../../images/APIGovernance.svg'
import { ReactComponent as ApiMockingIcon } from '../../images/APIMocking.svg'
Expand All @@ -31,6 +36,7 @@ import { ReactComponent as WafIcon } from '../../images/menu_icons_waf.svg'
import { ReactComponent as HashicorpIcon } from '../../images/menu_icons_hashicorp.svg'
import { ReactComponent as AiGatewayIcon } from '../../images/menu_icons_ai_gateway.svg'
import PostCard from './PostCard'
import NavHeader from './NavHeader'

const Wrapper = styled(Flex)`
display: none;
Expand All @@ -48,59 +54,85 @@ const MainNav = () => {
<Flex as="ul" sx={{ height: '100%', alignItems: 'center', p: 0, m: 0, listStyle: 'none' }}>
{/* Products */}
<NavItem name="Products" hasSubmenu position={{ marginLeft: '-15%' }}>
<Grid sx={{ gridTemplateColumns: '1fr 1fr 1fr', maxWidth: '1160px' }}>
<Product
title="Application Proxy"
description="Simplify microservice discovery, routing, & load balancing."
links={[
{
title: 'Traefik Proxy',
url: 'https://traefik.io/traefik/',
external: true,
description: 'OSS Cloud-Native Application Proxy',
icon: <TraefikProxyIcon />,
},
]}
bgImage={'https://traefik.io/images/site-nav/[email protected]'}
/>
<Product
title="API Gateway"
description="Enhance security & centralize control of your APIs and microservices."
links={[
{
title: 'Traefik Hub',
url: 'https://traefik.io/traefik-hub-api-gateway/',
tag: 'API Gateway',
external: true,
description: 'Seamless Upgrade from Traefik Proxy',
tagColor: 'rgb(177,64,245)',
icon: <TraefikIcon />,
},
{
title: 'Traefik Enterprise',
url: 'https://traefik.io/traefik-enterprise/',
external: true,
description: 'Standalone General-Purpose API Gateway',
icon: <TraefikEnterpriseIcon />,
},
]}
bgImage={'https://traefik.io/images/site-nav/[email protected]'}
/>
<Product
title="API Management"
description="Simplify & accelerate API lifecycle management in Kubernetes."
links={[
{
title: 'Traefik Hub',
url: 'https://traefik.io/traefik-hub/',
external: true,
tag: 'API Management',
description: 'Kubernetes-Native API Management',
icon: <TraefikHubIcon />,
},
]}
bgImage={'https://traefik.io/images/site-nav/[email protected]'}
/>
<Grid sx={{ gridTemplateColumns: '1fr', maxWidth: '1160px' }}>
<NavHeader title="Traefik Runtime Platform" />
<Grid sx={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
<Product
links={[
{
title: 'Traefik Proxy →',
url: 'https://traefik.io/traefik/',
external: true,
description: 'OSS Cloud-Native Application Proxy',
icon: <TraefikProxyIcon />,
},
]}
subLinks={[
{
title: 'Kubernetes Ingress',
external: true,
icon: <IconKubernetes />,
url: 'https://traefik.io/solutions/kubernetes-ingress/',
},
{
title: 'Docker Swarm Ingress',
external: true,
icon: <IconDockerSwarm />,
url: 'https://traefik.io/solutions/docker-swarm-ingress/',
},
]}
/>
<Product
links={[
{
title: 'Traefik API Gateway →',
url: 'https://traefik.io/traefik-hub-api-gateway/',
external: true,
description: 'Seamless Upgrade from Traefik Proxy',
icon: <TraefikIcon />,
},
]}
subLinks={[
{
title: 'Web Application Firewall',
external: true,
icon: <IconWaf />,
url: 'https://traefik.io/solutions/waf/',
},
{
title: 'AI Gateway',
external: true,
icon: <IconAiGateway />,
url: 'https://traefik.io/solutions/ai-gateway/',
},
]}
/>
<Product
links={[
{
title: 'Traefik API Management →',
url: 'https://traefik.io/traefik-hub/',
external: true,
description: 'GitOps-Driven API Management',
icon: <TraefikHubIcon />,
},
]}
subLinks={[
{
title: 'API Governance',
external: true,
icon: <IconApiGovernance />,
url: 'https://traefik.io/solutions/api-governance/',
},
{
title: 'API Mocking',
external: true,
icon: <IconsApiMocks />,
url: 'https://traefik.io/solutions/api-mocking/',
},
]}
/>
</Grid>
</Grid>
</NavItem>

Expand Down Expand Up @@ -183,7 +215,8 @@ const MainNav = () => {
title: 'Runtime API Governance',
url: 'https://traefik.io/solutions/api-governance/',
external: true,
description: 'Enforce critical runtime API policies for secure, reliable, and compliant API management.',
description:
'Enforce critical runtime API policies for secure, reliable, and compliant API management.',
icon: <ApiGovernanceIcon />,
badge: 'New!',
},
Expand Down Expand Up @@ -264,6 +297,41 @@ 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.Item title="vs NGINX" href="https://traefik.io/compare/traefik-vs-nginx/" external />
<MenuColumn.Item
title="vs Solo.io Gloo Gateway"
href="https://traefik.io/compare/traefik-vs-nginx/"
external
/>
<MenuColumn.Item title="vs Tyk" href="https://traefik.io/compare/compare/traefik-vs-tyk" external />
<MenuColumn.Item title="vs Gravitee" href="https://traefik.io/compare/traefik-vs-gravitee/" external />
<MenuColumn.Item
title="vs Envoy Gateway"
href="https://traefik.io/compare/traefik-vs-envoy-gateway/"
external
/>
</MenuColumn.Column>
</Grid>
</NavItem>

{/* Pricing */}
<NavItem name="Pricing" url="https://traefik.io/pricing/" />

Expand Down
34 changes: 25 additions & 9 deletions src/components/nav/MenuColumn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react'
import styled from 'styled-components'
import Link from 'components/Link'
import { Box, Text, theme } from '@containous/faency'
import { Box, Text } from '@containous/faency'
import { ReactComponent as ArrowRight } from '../../images/arrow-right.svg'

const Links = styled.ul`
list-style: none;
Expand All @@ -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: {
Expand Down Expand Up @@ -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',
}}
>
Expand All @@ -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>
Expand All @@ -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}>
Expand Down
36 changes: 36 additions & 0 deletions src/components/nav/NavHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import styled from 'styled-components'

type Props = {
title: string
bgImage?: string
}

const NavHeader = (props: Props) => {
return (
<Wrapper>
<span>{props.title}</span>
<img
src="https://traefik.io/images/site-nav/[email protected]"
style={{
position: 'absolute',
inset: 0,
width: '100%',
height: '100%',
}}
alt=""
/>
</Wrapper>
)
}

export default NavHeader

const Wrapper = styled.div`
padding: 24px 24px 18px;
font-size: 20px;
font-weight: 500;
line-height: 1.1;
color: #03192d;
border-bottom: solid 1px #9aa3ab33;
position: relative;
`
2 changes: 1 addition & 1 deletion src/components/nav/NavItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ const Menu = styled(Box)`

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