feat: 791-header-shell-links-removing-left-nav

packages/gatsby-theme-carbon/src/components/Header/Header.js

@@ -10,6 +10,7 @@ import {
 import { AppSwitcher20, Close20 } from '@carbon/icons-react';
 import cx from 'classnames';
 
+import HeaderNav from '../HeaderNav/HeaderNav';
 import GlobalSearch from '../GlobalSearch';
 import NavContext from '../../util/context/NavContext';
 import useMetadata from '../../util/hooks/useMetadata';
@@ -24,7 +25,7 @@ import {
   switcherButton,
 } from './Header.module.scss';
 
-const Header = ({ children }) => {
+const Header = ({ children, hasHeaderNavigation }) => {
   const {
     leftNavIsOpen,
     toggleNavState,
@@ -54,6 +55,7 @@ const Header = ({ children }) => {
         >
           {children}
         </Link>
+        {hasHeaderNavigation && <HeaderNav />}
         <HeaderGlobalBar>
           {isSearchEnabled && <GlobalSearch />}
           <HeaderGlobalAction

packages/gatsby-theme-carbon/src/components/Header/Header.module.scss

@@ -56,7 +56,6 @@ header.header {
   transition: opacity $duration--fast-02 $carbon--standard-easing;
   color: $inverse-01;
   text-decoration: none;
-  position: absolute;
   left: 3rem;
   white-space: nowrap;
   padding: 0 $spacing-05;

packages/gatsby-theme-carbon/src/components/HeaderNav/HeaderNav.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { HeaderNavigation } from 'carbon-components-react/lib/components/UIShell';
+import HeaderNavItem from './HeaderNavItem';
+
+import { useNavItems } from '../../util/NavItems';
+
+const HeaderNav = () => {
+  const navItems = useNavItems();
+
+  return (
+    <>
+      <HeaderNavigation aria-label="Carbon Design System">
+        {navItems.map((item, i) => (
+          <HeaderNavItem items={item.pages} category={item.title} key={i} />
+        ))}
+      </HeaderNavigation>
+    </>
+  );
+};
+
+export default HeaderNav;

packages/gatsby-theme-carbon/src/components/HeaderNav/HeaderNavItem.js

@@ -0,0 +1,95 @@
+import React, { useContext } from 'react';
+
+import { Link } from 'gatsby';
+import { Location } from '@reach/router';
+import cx from 'classnames';
+
+import {
+  HeaderMenu,
+  HeaderMenuItem,
+} from 'carbon-components-react/lib/components/UIShell';
+import styles from '../Header/Header.module.scss';
+
+import NavContext from '../../util/context/NavContext';
+import usePathprefix from '../../util/hooks/usePathprefix';
+
+const HeaderNavItem = (props) => {
+  const { items, category } = props;
+  const { toggleNavState } = useContext(NavContext);
+  const closeLeftNav = () => toggleNavState('leftNavIsOpen', 'close');
+  const pathPrefix = usePathprefix();
+
+  return (
+    <Location>
+      {({ location }) => {
+        const pathname = pathPrefix
+          ? location.pathname.replace(pathPrefix, '')
+          : location.pathname;
+
+        const isActive = items.some(
+          (item) => item.path.split('/')[1] === pathname.split('/')[1]
+        );
+
+        if (items.length === 1) {
+          return (
+            <HeaderMenuItem
+              onClick={closeLeftNav}
+              icon={<span>dummy icon</span>}
+              element={Link}
+              isActive={isActive}
+              to={`${items[0].path}`}
+            >
+              {category}
+            </HeaderMenuItem>
+          );
+        }
+        return (
+          <HeaderMenu
+            icon={<span>dummy icon</span>}
+            isActive={isActive} // TODO similar categories
+            defaultExpanded={isActive}
+            title={category}
+            menuLinkName={category}
+          >
+            <TabItems
+              onClick={closeLeftNav}
+              items={items}
+              pathname={pathname}
+            />
+          </HeaderMenu>
+        );
+      }}
+    </Location>
+  );
+};
+
+const TabItems = ({ items, pathname, onClick }) =>
+  items.map((item, i) => {
+    const hasActiveTab =
+      item.path.split('/') > 3
+        ? item.path.split('/')[3] === pathname.split('/')[3]
+        : item.path.split('/')[2] === pathname.split('/')[2];
+
+    return (
+      <HeaderMenuItem
+        to={`${item.path}`}
+        className={cx({
+          [styles.linkText__dark]: pathname === '/',
+        })}
+        onClick={onClick}
+        element={Link}
+        isActive={hasActiveTab}
+        key={i}
+      >
+        <span
+          className={cx(styles.linkText, {
+            [styles.linkText__active]: hasActiveTab,
+          })}
+        >
+          {item.title}
+        </span>
+      </HeaderMenuItem>
+    );
+  });
+
+export default HeaderNavItem;

packages/gatsby-theme-carbon/src/components/HeaderNav/index.js

@@ -0,0 +1,3 @@
+import HeaderNav from './HeaderNav';
+
+export default HeaderNav;

packages/gatsby-theme-carbon/src/components/Layout.js

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-unresolved */
 import React, { useLayoutEffect } from 'react';
 
-import LeftNav from './LeftNav';
 import Meta from './Meta';
+import LeftNav from './LeftNav';
 import Header from './Header';
 import Switcher from './Switcher';
 import Footer from './Footer';
@@ -19,6 +19,7 @@ const Layout = ({
   pageDescription,
   pageKeywords,
   tabs,
+  hasHeaderNavigation,
 }) => {
   const is404 = children.key === null;
 
@@ -43,9 +44,14 @@ const Layout = ({
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
-      <Header />
+      <Header hasHeaderNavigation={hasHeaderNavigation} />
       <Switcher />
-      <LeftNav homepage={homepage} is404Page={is404} theme={theme} />
+      <LeftNav
+        hasHeaderNavigation={hasHeaderNavigation}
+        homepage={homepage}
+        is404Page={is404}
+        theme={theme}
+      />
       <Container homepage={homepage} theme={theme}>
         {children}
         <Footer />

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import classnames from 'classnames';
 import { SideNav, SideNavItems } from 'carbon-components-react';
-import { useNavItems } from './LeftNavItemProvider';
+import { useNavItems } from '../../util/NavItems';
 
 import NavContext from '../../util/context/NavContext';
 import LeftNavItem from './LeftNavItem';
@@ -17,10 +17,14 @@ const LeftNav = (props) => {
 
   // TODO: replace old addon website styles with sass modules, move to wrapper
   return (
-    <LeftNavWrapper expanded={leftNavIsOpen}>
+    <LeftNavWrapper
+      expanded={leftNavIsOpen}
+      hasHeaderNavigation={props.hasHeaderNavigation}
+    >
       <SideNav
-        expanded
-        defaultExpanded
+        expanded={props.hasHeaderNavigation ? leftNavIsOpen : true}
+        defaultExpanded={!props.hasHeaderNavigation}
+        isPersistent={!props.hasHeaderNavigation}
         aria-label="Side navigation"
         className={classnames({
           [sideNavDark]: props.theme === 'dark' || props.homepage,

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js

@@ -3,11 +3,13 @@ import cx from 'classnames';
 
 import {
   leftNavWrapper,
+  hasHeaderNavStyles,
   expanded as expandedStyles,
 } from './LeftNavWrapper.module.scss';
 
-const LeftNavWrapper = ({ expanded, ...rest }) => {
+const LeftNavWrapper = ({ hasHeaderNavigation, expanded, ...rest }) => {
   const className = cx(leftNavWrapper, {
+    [hasHeaderNavStyles]: hasHeaderNavigation,
     [expandedStyles]: expanded,
   });
   return <div className={className} {...rest} />;

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.module.scss

@@ -13,7 +13,25 @@
   }
 
   @include carbon--breakpoint('lg') {
-    transform: translateX(0px);
+    transform: translateX(
+      0px
+    ); // when this is in desktop view and doesn't have header navigation
+  }
+}
+
+.leftNavWrapper.hasHeaderNavStyles {
+  @include carbon--breakpoint('lg') {
+    transform: translateX(
+      -256px
+    ); //when this has header navigation in desktop view
+  }
+}
+
+.hasHeaderNavStyles.expanded {
+  @include carbon--breakpoint('lg') {
+    transform: translateX(
+      -256px
+    ); // when this has header navigation and expanded in desktop view
   }
 }
 
@@ -23,7 +41,10 @@
 }
 
 .expanded {
-  transform: translateX(0px);
+  transform: translateX(
+    0px
+  ); //when this is in mobile view and expanded (for both header and non header)
+
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   @include carbon--breakpoint('lg') {
     box-shadow: none;

packages/gatsby-theme-carbon/src/templates/Default.js

@@ -39,6 +39,8 @@ const Default = ({ pageContext, children, location, Title }) => {
   };
 
   const currentTab = getCurrentTab();
+
+  // Update hasHeaderNavigation prop in the Layout component to true to render HeaderNav.
   return (
     <Layout
       tabs={tabs}
@@ -48,6 +50,7 @@ const Default = ({ pageContext, children, location, Title }) => {
       pageDescription={description}
       pageKeywords={keywords}
       titleType={titleType}
+      hasHeaderNavigation={false}
     >
       <PageHeader title={Title ? <Title /> : title} label="label" tabs={tabs} />
       {tabs && <PageTabs slug={slug} tabs={tabs} currentTab={currentTab} />}

packages/gatsby-theme-carbon/src/templates/Homepage.js

@@ -25,6 +25,7 @@ const Homepage = ({
       titleType={titleType}
       homepage
       theme="dark"
+      hasHeaderNavigation
     >
       {Banner}
       {FirstCallout}