DOP-4533: FE removal of the SidenavBackButton (#1067)

Author: mayaraman19

src/components/OpenAPI/index.js

@@ -6,7 +6,6 @@ import { Global, css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { palette } from '@leafygreen-ui/palette';
 import ComponentFactory from '../ComponentFactory';
-import { SidenavBackButton } from '../Sidenav';
 import Spinner from '../Spinner';
 import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import useStickyTopValues from '../../hooks/useStickyTopValues';
@@ -91,13 +90,6 @@ const getGlobalCss = ({ topLarge, topMedium }) => css`
   }
 `;
 
-const Border = styled('hr')`
-  border: unset;
-  border-bottom: 1px solid ${palette.gray.light2};
-  margin: ${theme.size.default} 0;
-  width: 100%;
-`;
-
 const LoadingContainer = styled('div')`
   align-items: center;
   display: flex;
@@ -132,12 +124,9 @@ const LoadingWidget = ({ className }) => (
 );
 
 const MenuTitleContainer = ({ siteTitle, pageTitle }) => {
-  const docsTitle = siteTitle ? `${siteTitle} Docs` : 'Docs';
   return (
     <>
-      {/* Disable LG left arrow glyph due to bug where additional copies of the LG icon would be rendered 
-          at the bottom of the page. */}
-      <SidenavBackButton border={<Border />} enableGlyph={false} target="/" titleOverride={docsTitle} />
+      {/* TODO: Add DocsHomeButton here - see comment below */}
       <MenuTitle>{pageTitle}</MenuTitle>
     </>
   );
@@ -213,6 +202,8 @@ const OpenAPI = ({ metadata, nodeData: { argument, children, options = {} }, pag
                 sidebarEl.insertBefore(menuTitleContainerEl, searchEl);
                 const pageTitle = page?.options?.title || '';
                 const siteTitle = metadata?.title;
+                /* TODO: The below function is deprecated with React 18, need to replace it (potentially with 
+                  createRoot() and .render() (see React documentation) */
                 render(<MenuTitleContainer siteTitle={siteTitle} pageTitle={pageTitle} />, menuTitleContainerEl);
               }
             }

src/components/Sidenav/DocsHomeButton.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { SideNavItem } from '@leafygreen-ui/side-nav';
+import Icon from '@leafygreen-ui/icon';
+import { css as LeafyCSS, cx } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+import Link from '../Link';
+import { baseUrl } from '../../utils/base-url';
+import { sideNavItemBasePadding } from './styles/sideNavItem';
+import { titleStyle } from './styles/sideNavItem';
+
+const homeLinkStyle = LeafyCSS`
+  span {
+    color: ${palette.gray.dark1};
+    font-weight: 400;
+    display: flex;
+    gap: 6px;
+    svg {
+      height: 17px;
+      color: ${palette.gray.dark2};
+    }
+  }
+`;
+
+const DocsHomeButton = () => {
+  return (
+    <SideNavItem className={cx(titleStyle, sideNavItemBasePadding, homeLinkStyle)} as={Link} to={baseUrl()}>
+      <Icon glyph="Home"></Icon>
+      Docs Home
+    </SideNavItem>
+  );
+};
+
+export default DocsHomeButton;

src/components/Sidenav/Sidenav.js

@@ -13,7 +13,6 @@ import VersionDropdown from '../VersionDropdown';
 import useStickyTopValues from '../../hooks/useStickyTopValues';
 import { theme } from '../../theme/docsTheme';
 import { formatText } from '../../utils/format-text';
-import { baseUrl } from '../../utils/base-url';
 import { TocContext } from '../../context/toc-context';
 import { VersionContext } from '../../context/version-context';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
@@ -23,11 +22,11 @@ import GuidesTOCTree from './GuidesTOCTree';
 import IA from './IA';
 import IATransition from './IATransition';
 import ProductsList from './ProductsList';
-import SidenavBackButton from './SidenavBackButton';
 import { SidenavContext } from './sidenav-context';
 import SidenavMobileTransition from './SidenavMobileTransition';
 import Toctree from './Toctree';
-import { sideNavItemBasePadding, sideNavItemFontSize } from './styles/sideNavItem';
+import { sideNavItemBasePadding, sideNavItemFontSize, titleStyle } from './styles/sideNavItem';
+import DocsHomeButton from './DocsHomeButton';
 
 const SIDENAV_WIDTH = 268;
 
@@ -77,21 +76,6 @@ const sideNavStyling = ({ hideMobile, isCollapsed }) => LeafyCSS`
 
 `;
 
-const titleStyle = LeafyCSS`
-  color: ${palette.gray.dark3};
-  font-size: ${theme.fontSize.small};
-  font-weight: bold;
-  line-height: 20px;
-  text-transform: none;
-  :hover {
-    background-color: inherit;
-
-    &:after, span:after {
-      display: none;
-    }
-  }
-`;
-
 // Prevent content scrolling when the side nav is open on mobile and tablet screen sizes
 const disableScroll = (shouldDisableScroll) => css`
   body {
@@ -260,21 +244,8 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
             <IATransition back={back} hasIA={!!ia} slug={slug} isMobile={isMobile}>
               <NavTopContainer>
                 <ArtificialPadding />
-                <SideNavItem className={cx(titleStyle, sideNavItemBasePadding)} as={Link} to={baseUrl()}>
-                  MongoDB Documentation
-                </SideNavItem>
+                <DocsHomeButton />
                 <Border />
-                <SidenavBackButton
-                  handleClick={() => {
-                    setBack(true);
-                    hideMobileSidenav();
-                  }}
-                  project={project}
-                  currentSlug={slug}
-                  target={isGuidesTemplate ? '/' : ''}
-                  titleOverride={isGuidesTemplate ? siteTitle : ''}
-                  eol={eol}
-                />
                 {ia && (
                   <IA
                     header={!isLanding && <span className={cx([titleStyle])}>{formatText(pageTitle)}</span>}

src/components/Sidenav/SidenavBackButton.js

@@ -1,14 +1,6 @@
 import Sidenav from './Sidenav';
-import SidenavBackButton from './SidenavBackButton';
 import SidenavMobileMenuButton from './SidenavMobileMenuButton';
 import SidenavMobileMenuDropdown from './SidenavMobileMenuDropdown';
 import { SidenavContext, SidenavContextProvider } from './sidenav-context';
 
-export {
-  Sidenav,
-  SidenavBackButton,
-  SidenavContext,
-  SidenavContextProvider,
-  SidenavMobileMenuButton,
-  SidenavMobileMenuDropdown,
-};
+export { Sidenav, SidenavContext, SidenavContextProvider, SidenavMobileMenuButton, SidenavMobileMenuDropdown };

src/components/Sidenav/index.js

@@ -1,4 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
 import { theme } from '../../../theme/docsTheme';
 
 export const sideNavItemBasePadding = css`
@@ -31,3 +32,19 @@ export const sideNavItemTOCStyling = ({ level = 1 }) => css`
 export const sideNavItemFontSize = css`
   font-size: ${theme.fontSize.small};
 `;
+
+export const titleStyle = css`
+  color: ${palette.gray.dark3};
+  font-size: ${theme.fontSize.small};
+  font-weight: bold;
+  line-height: 20px;
+  text-transform: none;
+  :hover {
+    background-color: inherit;
+
+    &:after,
+    span:after {
+      display: none;
+    }
+  }
+`;