From 51bf46654411b0b7f12d655a136403a377fae41e Mon Sep 17 00:00:00 2001
From: Maya Raman <maya.raman19@gmail.com>
Date: Tue, 16 Apr 2024 13:55:58 -0400
Subject: [PATCH 1/6] removing sidenav back button from sidenav
---
src/components/Sidenav/Sidenav.js | 12 ------------
1 file changed, 12 deletions(-)
diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
index 96f162866..edb3fe7d2 100644
--- a/src/components/Sidenav/Sidenav.js
+++ b/src/components/Sidenav/Sidenav.js
@@ -23,7 +23,6 @@ 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';
@@ -264,17 +263,6 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
MongoDB Documentation
</SideNavItem>
<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>}
From 02f1a70860f0761110862e494475d7412f3edc03 Mon Sep 17 00:00:00 2001
From: Maya Raman <maya.raman19@gmail.com>
Date: Tue, 16 Apr 2024 15:57:09 -0400
Subject: [PATCH 2/6] content for home butotn
---
src/components/Sidenav/Sidenav.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
index edb3fe7d2..2c04470e6 100644
--- a/src/components/Sidenav/Sidenav.js
+++ b/src/components/Sidenav/Sidenav.js
@@ -260,7 +260,8 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s
<NavTopContainer>
<ArtificialPadding />
<SideNavItem className={cx(titleStyle, sideNavItemBasePadding)} as={Link} to={baseUrl()}>
- MongoDB Documentation
+ <Icon glyph="Home"></Icon>
+ Docs Home
</SideNavItem>
<Border />
{ia && (
From eed4f5ad235beae99f996fdcb20633b656a425e4 Mon Sep 17 00:00:00 2001
From: Maya Raman <maya.raman19@gmail.com>
Date: Wed, 17 Apr 2024 10:54:03 -0400
Subject: [PATCH 3/6] style
---
src/components/Sidenav/Sidenav.js | 15 ++++++++++++++-
1 file changed, 14 insertions(+), 1 deletion(-)
diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
index 2c04470e6..75bf648ff 100644
--- a/src/components/Sidenav/Sidenav.js
+++ b/src/components/Sidenav/Sidenav.js
@@ -91,6 +91,19 @@ const titleStyle = LeafyCSS`
}
`;
+const homeLinkStyle = LeafyCSS`
+ span {
+ color: ${palette.gray.dark1};
+ font-weight: 400;
+ display: flex;
+ gap: 6px;
+ align-items: center;
+ svg {
+ color: ${palette.gray.dark2}
+ }
+ }
+`;
+
// Prevent content scrolling when the side nav is open on mobile and tablet screen sizes
const disableScroll = (shouldDisableScroll) => css`
body {
@@ -259,7 +272,7 @@ 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()}>
+ <SideNavItem className={cx(titleStyle, sideNavItemBasePadding, homeLinkStyle)} as={Link} to={baseUrl()}>
<Icon glyph="Home"></Icon>
Docs Home
</SideNavItem>
From 9f0e6c8615cb91af993c08d449d16294d6ec481e Mon Sep 17 00:00:00 2001
From: Maya Raman <maya.raman19@gmail.com>
Date: Thu, 18 Apr 2024 15:51:54 -0400
Subject: [PATCH 4/6] moving home button into component
---
src/components/Sidenav/DocsHomeButton.js | 34 ++++++++++++++++++
src/components/Sidenav/Sidenav.js | 37 ++------------------
src/components/Sidenav/styles/sideNavItem.js | 17 +++++++++
3 files changed, 54 insertions(+), 34 deletions(-)
create mode 100644 src/components/Sidenav/DocsHomeButton.js
diff --git a/src/components/Sidenav/DocsHomeButton.js b/src/components/Sidenav/DocsHomeButton.js
new file mode 100644
index 000000000..cf3763ed0
--- /dev/null
+++ b/src/components/Sidenav/DocsHomeButton.js
@@ -0,0 +1,34 @@
+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;
+ align-items: text-bottom;
+ 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;
diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
index 75bf648ff..debb52c7c 100644
--- a/src/components/Sidenav/Sidenav.js
+++ b/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';
@@ -26,7 +25,8 @@ import ProductsList from './ProductsList';
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;
@@ -76,34 +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;
- }
- }
-`;
-
-const homeLinkStyle = LeafyCSS`
- span {
- color: ${palette.gray.dark1};
- font-weight: 400;
- display: flex;
- gap: 6px;
- align-items: center;
- svg {
- color: ${palette.gray.dark2}
- }
- }
-`;
-
// Prevent content scrolling when the side nav is open on mobile and tablet screen sizes
const disableScroll = (shouldDisableScroll) => css`
body {
@@ -272,10 +244,7 @@ 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, homeLinkStyle)} as={Link} to={baseUrl()}>
- <Icon glyph="Home"></Icon>
- Docs Home
- </SideNavItem>
+ <DocsHomeButton />
<Border />
{ia && (
<IA
diff --git a/src/components/Sidenav/styles/sideNavItem.js b/src/components/Sidenav/styles/sideNavItem.js
index 9b812572b..4681b14e2 100644
--- a/src/components/Sidenav/styles/sideNavItem.js
+++ b/src/components/Sidenav/styles/sideNavItem.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;
+ }
+ }
+`;
From 61ff52562e3142abe32f65c3d57f61a6c04cdd22 Mon Sep 17 00:00:00 2001
From: Maya Raman <maya.raman19@gmail.com>
Date: Mon, 22 Apr 2024 10:13:42 -0400
Subject: [PATCH 5/6] removing align items
---
src/components/Sidenav/DocsHomeButton.js | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/components/Sidenav/DocsHomeButton.js b/src/components/Sidenav/DocsHomeButton.js
index cf3763ed0..d29dddcf0 100644
--- a/src/components/Sidenav/DocsHomeButton.js
+++ b/src/components/Sidenav/DocsHomeButton.js
@@ -14,10 +14,9 @@ const homeLinkStyle = LeafyCSS`
font-weight: 400;
display: flex;
gap: 6px;
- align-items: text-bottom;
svg {
height: 17px;
- color: ${palette.gray.dark2}
+ color: ${palette.gray.dark2};
}
}
`;
From 8a33f02d9259d51b0b3baeda9f611c0ebbcc7f63 Mon Sep 17 00:00:00 2001
From: Maya Raman <maya.raman19@gmail.com>
Date: Mon, 22 Apr 2024 16:36:12 -0400
Subject: [PATCH 6/6] removing sidenav back button and updating files
---
src/components/OpenAPI/index.js | 15 +--
src/components/Sidenav/SidenavBackButton.js | 106 --------------------
src/components/Sidenav/index.js | 10 +-
3 files changed, 4 insertions(+), 127 deletions(-)
delete mode 100644 src/components/Sidenav/SidenavBackButton.js
diff --git a/src/components/OpenAPI/index.js b/src/components/OpenAPI/index.js
index fb7f2cf1a..02c40f514 100644
--- a/src/components/OpenAPI/index.js
+++ b/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);
}
}
diff --git a/src/components/Sidenav/SidenavBackButton.js b/src/components/Sidenav/SidenavBackButton.js
deleted file mode 100644
index 6d2d0469d..000000000
--- a/src/components/Sidenav/SidenavBackButton.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { css, cx } from '@leafygreen-ui/emotion';
-import Icon from '@leafygreen-ui/icon';
-import { palette } from '@leafygreen-ui/palette';
-import { SideNavItem } from '@leafygreen-ui/side-nav';
-import Link from '../Link';
-import { useNavigationParents } from '../../hooks/use-navigation-parents';
-import { baseUrl } from '../../utils/base-url';
-import { theme } from '../../theme/docsTheme';
-import { formatText } from '../../utils/format-text';
-import { sideNavItemBasePadding } from './styles/sideNavItem';
-
-const backButtonStyling = css`
- font-size: ${theme.fontSize.small};
- margin-bottom: 16px;
- font-weight: 400;
- line-height: 20px;
- > span {
- color: ${palette.gray.dark1};
- }
-`;
-
-const htmlBackIcon = css`
- margin-right: ${theme.size.small};
-`;
-
-const SidenavBackButton = ({
- border,
- currentSlug,
- enableGlyph = true,
- handleClick,
- project,
- target,
- titleOverride,
- eol,
- ...props
-}) => {
- const parents = useNavigationParents(project);
- const glyph = enableGlyph ? <Icon glyph="ArrowLeft" size="small" /> : null;
- let title = titleOverride;
- let url = target;
-
- // Fetch page to navigate to using parent category page(s)
- if (!titleOverride) {
- if (project === 'landing') {
- const landingExceptions = ['/', 'search'];
-
- if (landingExceptions.includes(currentSlug)) {
- // At homepage; nothing to link back to
- return null;
- }
-
- title = 'home';
- url = '/';
- } else if (parents.length) {
- [{ title, url }] = parents.slice(-1);
- } else {
- title = 'docs home';
- url = baseUrl();
- }
- }
-
- if (!title || !title.length || !url) {
- return null;
- }
-
- let textShown = 'Back to ';
- if (eol) {
- url = 'https://docs.mongodb.com/legacy/';
- textShown = 'Return to Documentation';
- }
-
- return (
- <>
- <SideNavItem
- as={Link}
- className={cx([sideNavItemBasePadding, backButtonStyling])}
- to={url}
- glyph={glyph}
- onClick={handleClick}
- {...props}
- >
- {/*
- * Uses HTML/text-based arrow instead of LG icon as a workaround for a bug where the
- * icon can be rendered twice (see: OpenAPI component)
- */}
- {!enableGlyph && <span className={cx(htmlBackIcon)}>←</span>}
- {textShown} {!eol && formatText(title)}
- </SideNavItem>
- {border}
- </>
- );
-};
-
-SidenavBackButton.propTypes = {
- border: PropTypes.element,
- currentSlug: PropTypes.string,
- handleClick: PropTypes.func,
- project: PropTypes.string,
- target: PropTypes.string,
- titleOverride: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]),
- eol: PropTypes.bool,
-};
-
-export default SidenavBackButton;
diff --git a/src/components/Sidenav/index.js b/src/components/Sidenav/index.js
index 04a143bab..623a87fbf 100644
--- a/src/components/Sidenav/index.js
+++ b/src/components/Sidenav/index.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 };