moving home button into component

Author: mayaraman19

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;

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

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;
+    }
+  }
+`;