From ee45f885bb7c300170a975da5530cc0d6f0cfd12 Mon Sep 17 00:00:00 2001
From: harshad-tahiliani <harshad@codalent.com>
Date: Fri, 25 Apr 2025 18:26:07 +0530
Subject: [PATCH] feat: nav update compare page

---
 src/components/nav/DrawerNav.tsx  | 15 ++++-----------
 src/components/nav/MainNav.tsx    | 30 +++++++-----------------------
 src/components/nav/MenuColumn.tsx | 29 ++++++++++++++++++++++++++---
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/components/nav/DrawerNav.tsx b/src/components/nav/DrawerNav.tsx
index 2df0da6..9a9fc55 100644
--- a/src/components/nav/DrawerNav.tsx
+++ b/src/components/nav/DrawerNav.tsx
@@ -128,20 +128,13 @@ const DrawerNav = ({ isDrawerOpen }: Props) => {
             </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-apigee/">vs Apigee</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>
-            <SubLink href="https://traefik.io/compare/traefik-vs-ambassador-edge-stack/">
-              vs Ambassador Edge Stack
-            </SubLink>
-            <SubLink href="https://traefik.io/compare/traefik-vs-api7-enterprise/">vs API7 Enterprise</SubLink>
-            <SubLink href="https://traefik.io/compare/traefik-vs-akana/">vs Akana</SubLink>
-            <SubLink href="https://traefik.io/compare/traefik-vs-zuplo/">vs Zuplo</SubLink>
+            <SubLink href="https://traefik.io/compare/traefik-vs-kong-konnect/">vs Kong Konnect</SubLink>
+            <SubLink href="https://traefik.io/compare/traefik-vs-tyk">vs Tyk</SubLink>
+            <SubLink href="https://traefik.io/compare/">See more comparisons</SubLink>
           </div>
         </div>
 
diff --git a/src/components/nav/MainNav.tsx b/src/components/nav/MainNav.tsx
index f53e4b5..c8c2062 100644
--- a/src/components/nav/MainNav.tsx
+++ b/src/components/nav/MainNav.tsx
@@ -342,11 +342,7 @@ const MainNav = () => {
         <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 Apigee" href="https://traefik.io/compare/traefik-vs-apigee/" external />
               <MenuColumn.Item
                 title="vs AWS API Gateway"
                 href="https://traefik.io/compare/traefik-vs-aws-api-gateway/"
@@ -357,31 +353,19 @@ const MainNav = () => {
                 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.Item
-                title="vs Ambassador Edge Stack"
-                href="https://traefik.io/compare/traefik-vs-ambassador-edge-stack/"
+                title="vs Kong Konnect"
+                href="https://traefik.io/compare/traefik-vs-kong-konnect/"
                 external
               />
+              <MenuColumn.Item title="vs Tyk" href="https://traefik.io/compare/traefik-vs-tyk/" external />
               <MenuColumn.Item
-                title="vs API7 Enterprise"
-                href="https://traefik.io/compare/traefik-vs-api7-enterprise/"
+                title="See more comparisons"
+                href="https://traefik.io/compare/"
                 external
+                className="menu-item-button"
               />
-              <MenuColumn.Item title="vs Akana" href="https://traefik.io/compare/traefik-vs-akana/" external />
-              <MenuColumn.Item title="vs Zuplo" href="https://traefik.io/compare/traefik-vs-zuplo/" external />
             </MenuColumn.Column>
           </Grid>
         </NavItem>
diff --git a/src/components/nav/MenuColumn.tsx b/src/components/nav/MenuColumn.tsx
index 605505b..1668096 100644
--- a/src/components/nav/MenuColumn.tsx
+++ b/src/components/nav/MenuColumn.tsx
@@ -52,6 +52,20 @@ const Links = styled.ul`
     }
   }
 
+  .menu-item-button {
+    padding: 12px;
+    width: 100%;
+    font-size: 16px;
+    height: 40px;
+    border-radius: 8px;
+    display: inline-block;
+    background: rgb(244, 245, 246);
+
+    i svg {
+      opacity: 1;
+    }
+  }
+
   span {
     font-size: 16px;
     font-weight: normal;
@@ -93,12 +107,21 @@ type MenuColumnLinkProps = {
   title: string | React.ReactNode
   logo?: React.ReactNode
   description?: string
+  className?: string
 }
 
-export const Item: React.FC<MenuColumnLinkProps> = ({ href, external, title, logo, description, ...props }) => (
+export const Item: React.FC<MenuColumnLinkProps> = ({
+  href,
+  external,
+  title,
+  logo,
+  description,
+  className,
+  ...props
+}) => (
   <li>
     {external ? (
-      <Link href={href} target="_self" {...props}>
+      <Link href={href} target="_self" className={className} {...props}>
         {logo ? (
           <Box sx={{ display: 'inline-flex', paddingTop: '5px' }}>
             {logo}
@@ -115,7 +138,7 @@ export const Item: React.FC<MenuColumnLinkProps> = ({ href, external, title, log
         </i>
       </Link>
     ) : (
-      <Link href={href} {...props}>
+      <Link href={href} className={className} {...props}>
         {title}
       </Link>
     )}