use two navs for dark mode

mongodb-forks · Sep 5, 2024 · 7bb456c · 7bb456c
1 parent 0087db9
commit 7bb456c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/components/Redoc/Redoc.tsx b/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">

diff --git a/src/globalStyles.ts b/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;
+  }
 `;