💄 DOP-4658 side nav now handles dark mode

src/components/Card/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withPrefix, navigate } from 'gatsby';
+import { navigate } from 'gatsby';
 import styled from '@emotion/styled';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import LeafyGreenCard from '@leafygreen-ui/card';
@@ -12,6 +12,7 @@ import ConditionalWrapper from '../ConditionalWrapper';
 import Link from '../Link';
 import Tag from '../Tag';
 import { isRelativeUrl } from '../../utils/is-relative-url';
+import { getSuitableIcon } from '../../utils/get-suitable-icon';
 
 const cardBaseStyles = css`
   display: flex;
@@ -157,15 +158,7 @@ const Card = ({
     isLanding && !isLargeIconStyle ? landingStyles : '', // must come after other styles to override
   ];
 
-  let iconSrc;
-
-  if (icon) {
-    const isPath = icon.includes('/');
-    const getIcon = `${icon}${darkMode ? '_inverse' : ''}`;
-    const imageUrl = `https://webimages.mongodb.com/_com_assets/icons/${getIcon}.svg`;
-
-    iconSrc = isPath ? (darkMode && iconDark ? withPrefix(iconDark) : withPrefix(icon)) : imageUrl;
-  }
+  let iconSrc = getSuitableIcon(darkMode, iconDark, icon);
 
   return (
     <LeafyGreenCard className={cx(styling)} onClick={url ? () => onCardClick(url) : undefined}>

src/components/Sidenav/IALinkedData.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
-import { withPrefix } from 'gatsby';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { palette } from '@leafygreen-ui/palette';
 import { SideNavItem } from '@leafygreen-ui/side-nav';
 import Link from '../Link';
 import { theme } from '../../theme/docsTheme';
+import { getSuitableIcon } from '../../utils/get-suitable-icon';
 
 const ulStyling = css`
   display: grid;
@@ -62,12 +63,14 @@ const liStyling = css`
 `;
 
 const IALinkedData = ({ linkedData }) => {
+  const { darkMode } = useDarkMode();
   return (
     <ul className={cx(ulStyling)}>
-      {linkedData.map(({ headline, url, icon, 'icon-alt': iconAlt }, index) => {
+      {linkedData.map(({ headline, url, icon, 'icon-alt': iconAlt, 'icon-dark': iconDark }, index) => {
+        const iconSrc = getSuitableIcon(darkMode, iconDark, icon);
         return (
           <SideNavItem key={index} className={cx(liStyling)} as={Link} to={url}>
-            <img height={16} width={16} src={withPrefix(icon)} alt={iconAlt} />
+            <img height={16} width={16} src={iconSrc} alt={iconAlt} />
             <span>{headline}</span>
           </SideNavItem>
         );

src/components/Sidenav/Sidenav.js

@@ -160,8 +160,6 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
 
   const { darkMode } = useDarkMode();
 
-  const borderBottomStyle = darkMode ? palette.gray.dark2 : palette.gray.light2;
-
   // CSS top property values for sticky side nav based on header height
   const topValues = useStickyTopValues(eol);
 
@@ -240,10 +238,15 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
             widthOverride={isMobile ? viewportSize.width : SIDENAV_WIDTH}
           >
             <IATransition back={back} hasIA={!!ia} slug={slug} isMobile={isMobile}>
-              <NavTopContainer style={{ '--background-color': darkMode ? palette.gray.dark4 : palette.gray.light3 }}>
+              <NavTopContainer
+                style={{
+                  '--background-color': darkMode ? palette.gray.dark4 : palette.gray.light3,
+                  '--border-bottom-color': darkMode ? palette.gray.dark2 : palette.gray.light2,
+                }}
+              >
                 <ArtificialPadding />
                 <DocsHomeButton darkMode={darkMode} />
-                <Border style={{ '--border-bottom-color': borderBottomStyle }} />
+                <Border />
                 {ia && (
                   <IA
                     header={!hideIaHeader ? <span className={cx([titleStyle])}>{formatText(pageTitle)}</span> : null}
@@ -259,7 +262,6 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
                     css={css`
                       margin-bottom: 0;
                     `}
-                    style={{ '--border-bottom-color': borderBottomStyle }}
                   />
                 )}
               </NavTopContainer>

src/utils/get-suitable-icon.js

@@ -0,0 +1,20 @@
+import { withPrefix } from 'gatsby';
+
+/**
+ *
+ * @param {boolean} isDarkMode
+ * @param {boolean} iconDark
+ * @param {string} icon
+ * @returns {string}
+ */
+export const getSuitableIcon = (isDarkMode, iconDark, icon) => {
+  if (icon) {
+    const isPath = icon.startsWith('/');
+    const getIcon = `${icon}${isDarkMode ? '_inverse' : ''}`;
+    const imageUrl = `https://webimages.mongodb.com/_com_assets/icons/${getIcon}.svg`;
+
+    return isPath ? (isDarkMode && iconDark ? withPrefix(iconDark) : withPrefix(icon)) : imageUrl;
+  }
+
+  return '';
+};