Upgrade and use Dark Mode nav (#66)

package.json

@@ -147,7 +147,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@leafygreen-ui/palette": "^3.4.4",
-    "@mdb/consistent-nav": "^2.0.3-rc.15",
+    "@mdb/consistent-nav": "^2.2.0",
     "@mdb/flora": "^1.5.6",
     "@mdx-js/react": "^1.6.22",
     "@redocly/openapi-core": "^1.0.0-beta.104",

src/components/Redoc/Redoc.tsx

@@ -57,7 +57,22 @@ export class Redoc extends React.Component<RedocProps> {
           <OptionsProvider value={options}>
             <GlobalCss />
             <StyledHeader>
-              <UnifiedNav position="relative" property={{ name: 'DOCS', searchParams: [] }} />
+              <UnifiedNav
+                position="relative"
+                property={{ name: 'DOCS', searchParams: [] }}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                darkMode={false}
+                className="nav-light"
+              />
+              <UnifiedNav
+                position="relative"
+                property={{ name: 'DOCS', searchParams: [] }}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                darkMode={true}
+                className="nav-dark"
+              />
             </StyledHeader>
             <RedocWrap className="redoc-wrap">
               <StickyResponsiveSidebar menu={menu} className="menu-content">

src/globalStyles.ts

@@ -230,4 +230,20 @@ export const globalStyles = `
     --callbacks-title-outline: #3e647c;
     --callbacks-details-bg: ${palette.gray.dark3};
   }
+
+  .nav-dark {
+    display: none;
+  }
+
+  .nav-light {
+    display: initial;
+  }
+
+  .dark-theme .nav-dark {
+    display: initial;
+  }
+
+  .dark-theme .nav-light {
+    display: none;
+  }
 `;