last ditch open api effort

Author: mayaraman19

src/components/OpenAPI/index.js

@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from 'react';
-import { render } from 'react-dom';
 import PropTypes from 'prop-types';
 import { RedocStandalone } from 'redoc';
 import { Global, css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { palette } from '@leafygreen-ui/palette';
+import { createRoot } from 'react-dom/client';
 import ComponentFactory from '../ComponentFactory';
-import { SidenavBackButton } from '../Sidenav';
 import Spinner from '../Spinner';
 import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import useStickyTopValues from '../../hooks/useStickyTopValues';
 import { isBrowser } from '../../utils/is-browser';
 import { theme } from '../../theme/docsTheme';
 import { getPlaintext } from '../../utils/get-plaintext';
 import { fetchOASFile } from '../../utils/realm';
+import DocsHomeButton from '../Sidenav/DocsHomeButton';
 import { isLinkInWhitelist, WhitelistErrorCallout } from './whitelist';
 import {
   codeBlockCss,
@@ -91,13 +91,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;
@@ -110,15 +103,6 @@ const LoadingMessage = styled('div')`
   margin-bottom: ${theme.size.small};
 `;
 
-const MenuTitle = styled('div')`
-  color: ${palette.gray.dark3};
-  font-size: ${theme.fontSize.small};
-  font-weight: bold;
-  line-height: 20px;
-  margin: ${theme.size.medium} ${theme.size.default};
-  text-transform: capitalize;
-`;
-
 const JustifiedWhitelistWarning = styled(WhitelistErrorCallout)`
   margin: 20px auto;
   max-width: 840px;
@@ -131,18 +115,6 @@ const LoadingWidget = ({ className }) => (
   </LoadingContainer>
 );
 
-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} />
-      <MenuTitle>{pageTitle}</MenuTitle>
-    </>
-  );
-};
-
 const OpenAPI = ({ metadata, nodeData: { argument, children, options = {} }, page, ...rest }) => {
   const usesRST = options?.['uses-rst'];
   const usesRealm = options?.['uses-realm'];
@@ -210,10 +182,10 @@ const OpenAPI = ({ metadata, nodeData: { argument, children, options = {} }, pag
               if (searchEl) {
                 const menuTitleContainerEl = document.createElement('div');
                 menuTitleContainerEl.className = menuTitleContainerClass;
+                const root = createRoot(menuTitleContainerEl);
+                const element = <DocsHomeButton />;
+                root.render(element);
                 sidebarEl.insertBefore(menuTitleContainerEl, searchEl);
-                const pageTitle = page?.options?.title || '';
-                const siteTitle = metadata?.title;
-                render(<MenuTitleContainer siteTitle={siteTitle} pageTitle={pageTitle} />, menuTitleContainerEl);
               }
             }
           }}