Merge pull request #18966 from newrelic/liz/add-french-nav-component

Add french nav component

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;

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} />;