From 7cd8584f7aac426affce1e41547ffaae1c532084 Mon Sep 17 00:00:00 2001
From: Liz Baker <lbaker@newrelic.com>
Date: Tue, 15 Oct 2024 10:39:21 -0700
Subject: [PATCH] chore: Add french nav component

---
 src/components/FrNav.js          | 46 ++++++++++++++++++++++++++++++++
 src/components/RootNavigation.js |  2 ++
 2 files changed, 48 insertions(+)
 create mode 100644 src/components/FrNav.js

diff --git a/src/components/FrNav.js b/src/components/FrNav.js
new file mode 100644
index 00000000000..70e4dc06107
--- /dev/null
+++ b/src/components/FrNav.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import Navigation from './Navigation';
+import { useStaticQuery, graphql } from 'gatsby';
+
+const FrNav = ({ className }) => {
+  const { nav } = useStaticQuery(frQuery);
+  return <Navigation nav={nav} className={className} />;
+};
+
+const frQuery = graphql`
+  query {
+    nav(slug: "/") {
+      id
+      title(locale: "fr")
+      url
+      filterable
+      pages {
+        ...MainLayout_navPagesfr
+        pages {
+          ...MainLayout_navPagesfr
+          pages {
+            ...MainLayout_navPagesfr
+            pages {
+              ...MainLayout_navPagesfr
+              pages {
+                ...MainLayout_navPagesfr
+                pages {
+                  ...MainLayout_navPagesfr
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  fragment MainLayout_navPagesfr on NavItem {
+    title(locale: "fr")
+    url
+    icon
+    label
+  }
+`;
+
+export default FrNav;
diff --git a/src/components/RootNavigation.js b/src/components/RootNavigation.js
index 4ac387e4a25..fd283ddb7b5 100644
--- a/src/components/RootNavigation.js
+++ b/src/components/RootNavigation.js
@@ -4,6 +4,7 @@ import JpNav from './JpNav';
 import EsNav from './EsNav';
 import PtNav from './PtNav';
 import EnNav from './EnNav';
+import FrNav from './FrNav';
 import StyleGuideNav from './StyleGuideNav';
 
 const RootNavigation = ({ locale, className, isStyleGuide }) => {
@@ -13,6 +14,7 @@ const RootNavigation = ({ locale, className, isStyleGuide }) => {
     en: <EnNav className={className} />,
     es: <EsNav className={className} />,
     pt: <PtNav className={className} />,
+    fr: <FrNav className={className} />,
   };
   if (isStyleGuide) {
     return <StyleGuideNav className={className} />;