Skip to content

Commit 95b801e

Browse files
arpbanarpban
authored
add api management link in solutions menu
1 parent 355e59f commit 95b801e

File tree

7 files changed

+216
-47
lines changed

7 files changed

+216
-47
lines changed

‎src/components/nav/MainNav.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
APIIcon,
2121
KubernetesIcon,
2222
DockerSwarmIcon,
23+
APIManagementIcon,
2324
} from 'images'
2425
import PostCard from './PostCard'
2526

@@ -153,6 +154,20 @@ const MainNav: React.FC = () => {
153154
<NavItem name="Solutions" hasSubmenu position={{ marginLeft: '-25%' }}>
154155
<Grid sx={{ gridTemplateColumns: '380px 288px', p: '40px', gap: '40px' }}>
155156
<MenuColumn.Column title="Solutions">
157+
<MenuColumn.Item
158+
href="https://traefik.io/solutions/api-management/"
159+
title="API Management"
160+
logo={<APIManagementIcon />}
161+
description="Simplify and accelerate API lifecycle management"
162+
external
163+
/>
164+
<MenuColumn.Item
165+
href="https://traefik.io/solutions/api-gateway/"
166+
title="API Gateway"
167+
logo={<APIIcon />}
168+
description="Act as a single entry point for microservices deployments"
169+
external
170+
/>
156171
<MenuColumn.Item
157172
href="https://traefik.io/solutions/kubernetes-ingress/"
158173
title="Kubernetes Ingress"
@@ -167,13 +182,6 @@ const MainNav: React.FC = () => {
167182
description="Powerful traffic management for your Docker Swarm deployment"
168183
external
169184
/>
170-
<MenuColumn.Item
171-
href="https://traefik.io/solutions/api-gateway/"
172-
title="API Gateway"
173-
logo={<APIIcon />}
174-
description="Act as a single entry point for microservices deployments"
175-
external
176-
/>
177185
</MenuColumn.Column>
178186

179187
{lastResource && <PostCard post={lastResource} />}

‎src/components/nav/MenuColumn.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ const Links = styled.ul`
4444
font-weight: normal;
4545
color: #677581;
4646
}
47+
48+
svg {
49+
overflow: visible;
50+
}
4751
`
4852

4953
type MenuColumnProps = {

‎src/images/APIIcon.tsx‎

Lines changed: 67 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,84 @@ const APIIcon = () => {
22
return (
33
<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
44
<defs>
5-
<linearGradient x1="50%" y1="-54.606%" x2="50%" y2="89.97%" id="fdig9oyh1b">
6-
<stop stopColor="currentColor" offset="0%" stopOpacity="0" />
7-
<stop stopColor="currentColor" offset="100%" stopOpacity="0.7" />
5+
<linearGradient x1="50%" y1="21.348%" x2="50%" y2="86.706%" id="pgvgsd733c">
6+
<stop stopColor="#818C96" stopOpacity="0" offset="0%" />
7+
<stop stopColor="#818C96" offset="100%" />
8+
</linearGradient>
9+
<linearGradient x1="50%" y1="0%" x2="50%" y2="86.637%" id="smd9s870ab">
10+
<stop stopColor="#03192D" offset="0%" />
11+
<stop stopColor="#03192D" offset="100%" />
12+
</linearGradient>
13+
<linearGradient x1="50%" y1="0%" x2="50%" y2="86.637%" id="ae1jzqtasd">
14+
<stop stopColor="#E5E8EA" offset="0%" />
15+
<stop stopColor="#B3BAC0" offset="100%" />
16+
</linearGradient>
17+
<linearGradient x1="50%" y1="0%" x2="50%" y2="86.637%" id="qqx153vm4f">
18+
<stop stopColor="#E5E8EA" offset="0%" />
19+
<stop stopColor="#B3BAC0" offset="100%" />
20+
</linearGradient>
21+
<linearGradient x1="50%" y1="21.348%" x2="50%" y2="86.706%" id="vnx7ohyvme">
22+
<stop stopColor="#818C96" stopOpacity="0" offset="0%" />
23+
<stop stopColor="#818C96" offset="100%" />
24+
</linearGradient>
25+
<linearGradient x1="0%" y1="53.94%" x2="100%" y2="53.94%" id="xowmzwyxjh">
26+
<stop stopColor="#E5E8EA" stopOpacity="0" offset="0%" />
27+
<stop stopColor="#B3BAC0" offset="100%" />
828
</linearGradient>
9-
<linearGradient x1="50%" y1="-6.285%" x2="50%" y2="86.706%" id="6qjajmhufa">
29+
<linearGradient x1="0%" y1="54.731%" x2="100%" y2="54.731%" id="3e0sf28zag">
1030
<stop stopColor="#818C96" stopOpacity="0" offset="0%" />
1131
<stop stopColor="#818C96" offset="100%" />
1232
</linearGradient>
33+
<filter x="-22.9%" y="-13.5%" width="145.8%" height="142.3%" filterUnits="objectBoundingBox" id="o471ax0gea">
34+
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
35+
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
36+
<feColorMatrix
37+
values="0 0 0 0 0.00784313725 0 0 0 0 0.0784313725 0 0 0 0 0.141176471 0 0 0 0.6 0"
38+
in="shadowBlurOuter1"
39+
result="shadowMatrixOuter1"
40+
/>
41+
<feMerge>
42+
<feMergeNode in="shadowMatrixOuter1" />
43+
<feMergeNode in="SourceGraphic" />
44+
</feMerge>
45+
</filter>
1346
</defs>
1447
<g fill="none" fillRule="evenodd">
1548
<path d="M0 0h48v48H0z" />
49+
<g
50+
filter="url(#o471ax0gea)"
51+
transform="translate(12 11)"
52+
fill="url(#smd9s870ab)"
53+
fillRule="nonzero"
54+
stroke="url(#pgvgsd733c)"
55+
strokeWidth=".72"
56+
>
57+
<path d="M12.003.36c3.524-.029 7.017.655 10.258 2.006.42.188.766.489 1.006.858a2.3 2.3 0 0 1 .373 1.262v7.903a13.47 13.47 0 0 1-2.524 7.679 13.622 13.622 0 0 1-6.479 4.89l-1.167.422c-.471.17-.97.258-1.464.26a4.28 4.28 0 0 1-1.434-.271l-1.178-.423a13.633 13.633 0 0 1-6.492-4.88A13.476 13.476 0 0 1 .36 12.395v-7.91A2.321 2.321 0 0 1 1.731 2.37 26.1 26.1 0 0 1 12.003.362z" />
58+
</g>
59+
<path
60+
d="M30.938 16.38A17.402 17.402 0 0 0 24 15a17.402 17.402 0 0 0-6.938 1.38A1.812 1.812 0 0 0 16 18.036v5.353c.058 3.922 2.52 7.398 6.182 8.726l.785.286c.33.125.68.192 1.033.198a3.119 3.119 0 0 0 1.062-.19l.778-.287c3.656-1.334 6.11-4.813 6.16-8.733v-5.353a1.812 1.812 0 0 0-1.062-1.658z"
61+
fill="url(#ae1jzqtasd)"
62+
fillRule="nonzero"
63+
opacity=".352"
64+
/>
1665
<path
17-
d="M13.96 33.58a6.62 6.62 0 0 1 5.06-2.38 6.7 6.7 0 0 1 5.46 2.88 18.54 18.54 0 0 0 2.1-.72 3.48 3.48 0 0 1 3.16-2.16h3.24a6.7 6.7 0 0 1 2.84.62 1.76 1.76 0 0 0-.52-1.16l-2.76-2.76a20.6 20.6 0 0 0 1.74-5.08h4a1.74 1.74 0 0 0 1.74-1.74v-2a1.74 1.74 0 0 0-1.74-1.74h-4a20.6 20.6 0 0 0-1.74-5.08l2.82-2.72a1.74 1.74 0 0 0 0-2.46L32.9 4.62a1.74 1.74 0 0 0-2.46 0l-2.7 2.76a20.88 20.88 0 0 0-5.14-1.64v-4A1.74 1.74 0 0 0 20.86 0h-1.74a1.74 1.74 0 0 0-1.74 1.74v4a20.6 20.6 0 0 0-5.08 1.74L9.54 4.62a1.74 1.74 0 0 0-2.46 0L4.62 7.08a1.74 1.74 0 0 0 0 2.46l2.76 2.76a20.6 20.6 0 0 0-1.64 5.08h-4A1.74 1.74 0 0 0 0 19.12v2c0 .961.779 1.74 1.74 1.74h4a20.6 20.6 0 0 0 1.74 5.08l-2.86 2.72a1.74 1.74 0 0 0 0 2.46l2.46 2.46a1.74 1.74 0 0 0 2.46 0l2.76-2.76a10 10 0 0 0 1.66.76zm6.14-20.42a7.64 7.64 0 1 1 .04 15.28 7.64 7.64 0 0 1-.04-15.28z"
18-
fill="currentColor"
66+
d="M24.004 18.5a10.374 10.374 0 0 1 4.134.82l.362 3.917a5.411 5.411 0 0 1-.988 3.054 5.337 5.337 0 0 1-2.534 1.942l-.486.178-1.458-.184a5.34 5.34 0 0 1-2.539-1.937 5.41 5.41 0 0 1-.995-3.046v-3.347c1.675-1.13 3.079-1.409 4.504-1.397z"
67+
stroke="url(#vnx7ohyvme)"
68+
fill="url(#qqx153vm4f)"
69+
fillRule="nonzero"
70+
/>
71+
<path
72+
d="M11.572 5.244a1.495 1.495 0 0 1 1.142.119c.338.183.606.494.724.891l.062 35.064c0 .414-.168.79-.44 1.06-.27.272-.646.44-1.06.44L1.572 39.78A1.498 1.498 0 0 1 .5 38.342V9.658A1.498 1.498 0 0 1 1.572 8.22z"
73+
stroke="url(#3e0sf28zag)"
74+
fill="url(#xowmzwyxjh)"
75+
fillRule="nonzero"
1976
/>
2077
<path
21-
d="M46 33.7a.997.997 0 0 1 1 1 .997.997 0 0 1-1 1h-1.16v9.28h1.22a.997.997 0 0 1 1 1 .997.997 0 0 1-1 1h-4.32a.997.997 0 0 1-1-1 .997.997 0 0 1 1-1h1.16V35.7h-1.16a.997.997 0 0 1-1-1 .997.997 0 0 1 1-1zm-13.02 0c1.17 0 2.23.475 2.998 1.242a4.227 4.227 0 0 1 1.242 2.998c0 1.17-.475 2.23-1.242 2.998a4.226 4.226 0 0 1-2.765 1.236l-.233.006h-2.24v3.8a.997.997 0 0 1-1 1 .997.997 0 0 1-.99-.864l-.01-.136V34.7a.997.997 0 0 1 .864-.99l.136-.01h3.24zm.06 2H30.8v4.48h2.24l.184-.007a2.233 2.233 0 0 0 1.4-.65c.405-.404.656-.964.656-1.583s-.25-1.179-.656-1.584a2.233 2.233 0 0 0-1.584-.656zm-14.02-1.956c1.015 0 1.955.368 2.683.986a4.131 4.131 0 0 1 1.403 2.49c.146.63 1.019 6.97 1.218 8.6a1 1 0 0 1-.82 1.14c-.322-.006-.597-.092-.803-.247a.94.94 0 0 1-.34-.486l-.026-.117-.48-3.41h-5.69l-.481 3.418a.96.96 0 0 1-1.106.848 1.007 1.007 0 0 1-.672-.39 1.006 1.006 0 0 1-.19-.753c.087-.692.299-2.099.52-3.58.33-2.193.677-4.546.703-5.053.168-.99.679-1.847 1.398-2.46a4.131 4.131 0 0 1 2.683-.986zm0 1.956a2.16 2.16 0 0 0-2.114 1.805l-.439 3.215h5.11l-.462-3.211-.038-.192a2.116 2.116 0 0 0-2.056-1.617z"
22-
stroke="url(#6qjajmhufa)"
23-
fill="url(#fdig9oyh1b)"
78+
d="M45.572 5.244a1.495 1.495 0 0 1 1.142.119c.338.183.606.494.724.891l.062 35.064c0 .414-.168.79-.44 1.06-.27.272-.646.44-1.06.44L35.572 39.78a1.498 1.498 0 0 1-1.072-1.438V9.658a1.498 1.498 0 0 1 1.072-1.438z"
79+
stroke="url(#3e0sf28zag)"
80+
fill="url(#xowmzwyxjh)"
2481
fillRule="nonzero"
82+
transform="matrix(-1 0 0 1 82 0)"
2583
/>
2684
</g>
2785
</svg>

‎src/images/APIManagementIcon.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const APIManagementIcon = () => {
2+
return (
3+
<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
4+
<defs>
5+
<linearGradient x1="50%" y1="0%" x2="50%" y2="86.637%" id="repxne4nqb">
6+
<stop stopColor="#E5E8EA" offset="0%" />
7+
<stop stopColor="#B3BAC0" offset="100%" />
8+
</linearGradient>
9+
<linearGradient x1="50%" y1="21.348%" x2="50%" y2="86.706%" id="l6tprhkzta">
10+
<stop stopColor="#818C96" stopOpacity="0" offset="0%" />
11+
<stop stopColor="#818C96" offset="100%" />
12+
</linearGradient>
13+
<filter x="-29.2%" y="-19.5%" width="158.3%" height="154.7%" filterUnits="objectBoundingBox" id="bn5ajwcj0c">
14+
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
15+
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
16+
<feColorMatrix
17+
values="0 0 0 0 0.00784313725 0 0 0 0 0.0784313725 0 0 0 0 0.141176471 0 0 0 0.6 0"
18+
in="shadowBlurOuter1"
19+
result="shadowMatrixOuter1"
20+
/>
21+
<feMerge>
22+
<feMergeNode in="shadowMatrixOuter1" />
23+
<feMergeNode in="SourceGraphic" />
24+
</feMerge>
25+
</filter>
26+
</defs>
27+
<g fill="none" fillRule="evenodd">
28+
<path d="M0 0h48v48H0z" />
29+
<circle
30+
stroke="url(#l6tprhkzta)"
31+
fill="url(#repxne4nqb)"
32+
fillRule="nonzero"
33+
opacity=".5"
34+
cx="24"
35+
cy="24"
36+
r="23.5"
37+
/>
38+
<circle stroke="url(#l6tprhkzta)" fill="url(#repxne4nqb)" fillRule="nonzero" cx="24" cy="24" r="18.5" />
39+
<g filter="url(#bn5ajwcj0c)" transform="translate(12 11)" fill="#03192D" fillRule="nonzero">
40+
<path d="m23.233 15.993-1.61-.92a10.219 10.219 0 0 0 0-4.573l1.636-.945a1.43 1.43 0 0 0 .51-1.941l-1.43-2.555a1.38 1.38 0 0 0-1.916-.511l-1.635.945a9.682 9.682 0 0 0-3.96-2.3V1.432a1.405 1.405 0 0 0-1.43-1.43h-2.836c-.79 0-1.43.64-1.43 1.43v1.84a10.219 10.219 0 0 0-3.96 2.299l-1.61-.945a1.43 1.43 0 0 0-1.814.485L.215 7.665a1.38 1.38 0 0 0 .511 1.941l1.61.92a9.887 9.887 0 0 0 0 4.573L.7 16.044a1.43 1.43 0 0 0-.511 1.942l1.558 2.452a1.38 1.38 0 0 0 1.916.511l1.635-.92a10.219 10.219 0 0 0 3.96 2.3v1.84c0 .78.625 1.416 1.405 1.43H13.5c.79 0 1.43-.64 1.43-1.43v-1.84a9.989 9.989 0 0 0 3.96-2.3l1.61.946a1.43 1.43 0 0 0 1.941-.537l1.405-2.554a1.405 1.405 0 0 0-.613-1.89zm-11.266 1.048a4.266 4.266 0 1 1 4.266-4.267 4.241 4.241 0 0 1-4.266 4.267z" />
41+
</g>
42+
</g>
43+
</svg>
44+
)
45+
}
46+
47+
export default APIManagementIcon

‎src/images/DockerSwarmIcon.tsx‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,63 @@ const DockerSwarmIcon = () => {
22
return (
33
<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
44
<defs>
5-
<linearGradient x1="50%" y1="-54.606%" x2="50%" y2="89.97%" id="rgd5gp3qra">
6-
<stop stopColor="currentColor" offset="0%" stopOpacity="0.1" />
7-
<stop stopColor="currentColor" offset="100%" stopOpacity="0.4" />
5+
<linearGradient x1="5.269%" y1="0%" x2="91.089%" y2="93.726%" id="h4xut0y6pb">
6+
<stop stopColor="#E5E8EA" offset="0%" />
7+
<stop stopColor="#B3BAC0" offset="100%" />
88
</linearGradient>
9-
<linearGradient x1="50%" y1="-6.285%" x2="50%" y2="86.706%" id="u4x2a8ddbb">
9+
<linearGradient x1="5.595%" y1="0%" x2="100%" y2="100%" id="x02h46ijea">
1010
<stop stopColor="#818C96" stopOpacity="0" offset="0%" />
1111
<stop stopColor="#818C96" offset="100%" />
1212
</linearGradient>
13+
<filter x="-16.3%" y="-12.2%" width="132.6%" height="134.1%" filterUnits="objectBoundingBox" id="bw21nq5y0c">
14+
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
15+
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
16+
<feColorMatrix
17+
values="0 0 0 0 0.00784313725 0 0 0 0 0.0784313725 0 0 0 0 0.141176471 0 0 0 0.6 0"
18+
in="shadowBlurOuter1"
19+
result="shadowMatrixOuter1"
20+
/>
21+
<feMerge>
22+
<feMergeNode in="shadowMatrixOuter1" />
23+
<feMergeNode in="SourceGraphic" />
24+
</feMerge>
25+
</filter>
1326
</defs>
1427
<g fill="none" fillRule="evenodd">
1528
<path d="M0 0h48v48H0z" />
16-
<path
17-
d="M46.972 2a7.073 7.073 0 0 0-7.037 6.383 6.862 6.862 0 0 0-2.054-.315 7.074 7.074 0 0 0-7.07 7.078 1.01 1.01 0 0 0 1.01 1.01h5.05a4.042 4.042 0 0 1 4.04 4.046 4.042 4.042 0 0 1-4.04 4.044H13.64c-4.263.06-8.472.97-12.38 2.676A1.866 1.866 0 0 0 .131 28.07a2.105 2.105 0 0 0 .05 1.583c.442.936.937 1.846 1.483 2.726 2.038 7.28 5.998 14.91 17.208 14.91 2.34.003 4.67-.296 6.935-.89a16.725 16.725 0 0 1-1.994-3.68c-4.89 1.072-10.646.821-14.216-3.127a18.39 18.39 0 0 1-3.585-6.792c3.85.359 7.52 1.795 10.591 4.143a41.641 41.641 0 0 0 6.645 3.64 1.516 1.516 0 0 1 2.973-.202 12.252 12.252 0 0 0 4.212 6.382A8.074 8.074 0 0 0 34.473 48a.903.903 0 0 0 .887-1.26l-2.307-5.386a1.516 1.516 0 1 1 2.786-1.197l.606 1.397c.014-.024 3.157-2.427 3.157-2.427A25.169 25.169 0 0 0 48 21.201V3a1.012 1.012 0 0 0-1.028-1zM20 33a2 2 0 1 1-.078-4 2 2 0 0 1 .078 4z"
18-
fill="currentColor"
29+
<rect
30+
stroke="url(#x02h46ijea)"
31+
fill="url(#h4xut0y6pb)"
1932
fillRule="nonzero"
33+
x="24.5"
34+
y="14.5"
35+
width="11"
36+
height="11"
37+
rx="1"
2038
/>
21-
<path
22-
d="m11.25 12.5.25 8.75-10.75.25-.25-8.75 10.75-.25zm9.43 0a9.564 9.564 0 0 0-.37 2.645 3.51 3.51 0 0 0 3.51 3.512l1.68-.001v2.594l-10.75.25-.25-8.75zm4.57-12 .25 6.127A9.611 9.611 0 0 0 22.147 9.5H14.75L14.5.75 25.25.5z"
23-
transform="translate(8)"
24-
fill="url(#rgd5gp3qra)"
39+
<rect
40+
stroke="url(#x02h46ijea)"
41+
fill="url(#h4xut0y6pb)"
2542
fillRule="nonzero"
26-
stroke="url(#u4x2a8ddbb)"
43+
x="11.5"
44+
y="14.5"
45+
width="11"
46+
height="11"
47+
rx="1"
2748
/>
49+
<rect
50+
stroke="url(#x02h46ijea)"
51+
fill="url(#h4xut0y6pb)"
52+
fillRule="nonzero"
53+
x="24.5"
54+
y="1.5"
55+
width="11"
56+
height="11"
57+
rx="1"
58+
/>
59+
<g filter="url(#bw21nq5y0c)" transform="translate(3 7)" fill="#03192D" fillRule="nonzero">
60+
<path d="M35.775 5.689a6.176 6.176 0 0 0-1.84-.28c-3.498 0-6.334 2.823-6.334 6.307 0 .498.405.902.905.902h4.524c.96 0 1.881.38 2.56 1.056a3.594 3.594 0 0 1 0 5.097 3.63 3.63 0 0 1-2.56 1.057H12.22c-3.82.053-7.59.863-11.09 2.384a1.667 1.667 0 0 0-1.012 1.024c-.17.458-.154.965.045 1.411.396.835.84 1.646 1.328 2.43 1.826 6.49 5.373 13.29 15.416 13.29a24.507 24.507 0 0 0 6.213-.793 14.883 14.883 0 0 1-1.787-3.28c-4.38.955-9.537.731-12.735-2.787a16.363 16.363 0 0 1-3.212-6.055c3.449.32 6.737 1.6 9.488 3.694 4.884 3.929 8.453 2.433 8.616 3.063a10.916 10.916 0 0 0 3.774 5.689 7.26 7.26 0 0 0 3.62 1.1.81.81 0 0 0 .713-.34.801.801 0 0 0 .08-.783l-2.066-4.8c-.127-.296.016.11.432 1.218.013-.02 5.435-3.203 5.435-3.203A22.387 22.387 0 0 0 43 17.113V.891a.9.9 0 0 0-.275-.636A.909.909 0 0 0 42.08 0c-3.259.001-5.985 2.462-6.304 5.689zM16.51 27.245a1.77 1.77 0 0 1 0-1.776 1.74 1.74 0 0 1 1.538-.869c.95.019 1.71.8 1.71 1.757a1.75 1.75 0 0 1-1.71 1.757 1.74 1.74 0 0 1-1.538-.869z" />
61+
</g>
2862
</g>
2963
</svg>
3064
)

0 commit comments

Comments
 (0)