fix: don't hide header at any viewport size (#364)

* fix: don't hide header at any viewport size

* fix: separate page tabs from the page header to simplify sticky logic

* fix: background color and default height

* fix: add default height for ie11

* fix: remove unused style systems

* fix: tabs z index

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

@@ -16,27 +16,20 @@ import NavContext from '../../util/context/NavContext';
 import useMetadata from '../../util/hooks/useMetadata';
 
 import {
-  hidden,
   header,
   switcherButtonOpen,
   skipToContent,
 } from './Header.module.scss';
 
-const Header = ({ children, shouldHideHeader }) => {
+const Header = ({ children }) => {
   const { leftNavIsOpen, toggleNavState, switcherIsOpen } = useContext(
     NavContext
   );
   const { isSearchEnabled } = useMetadata();
 
   return (
     <>
-      <ShellHeader
-        aria-label="Header"
-        className={cx({
-          [header]: true,
-          [hidden]: shouldHideHeader,
-        })}
-      >
+      <ShellHeader aria-label="Header" className={header}>
         <SkipToContent className={skipToContent} />
         <HeaderMenuButton
           className="bx--header__action--menu"

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

@@ -13,10 +13,6 @@ header.header {
   z-index: z('floating');
 }
 
-.header.hidden {
-  top: -48px;
-}
-
 .header :global(.bx--header__name) {
   @include carbon--type-style('body-short-02');
   @include carbon--breakpoint('lg') {

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

@@ -13,7 +13,6 @@ const Layout = ({
   children,
   homepage,
   theme,
-  shouldHideHeader,
   titleType,
   pageTitle,
   pageDescription,
@@ -42,14 +41,9 @@ const Layout = ({
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
-      <Header shouldHideHeader={shouldHideHeader} />
+      <Header />
       <Switcher />
-      <LeftNav
-        shouldHideHeader={shouldHideHeader}
-        homepage={homepage}
-        is404Page={is404}
-        theme={theme}
-      />
+      <LeftNav homepage={homepage} is404Page={is404} theme={theme} />
       <Container homepage={homepage} theme={theme}>
         {children}
         <Footer />

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

@@ -50,10 +50,7 @@ const LeftNav = props => {
 
   // TODO: replace old addon website styles with sass modules, move to wrapper
   return (
-    <LeftNavWrapper
-      expanded={leftNavIsOpen}
-      shouldHideHeader={props.shouldHideHeader}
-    >
+    <LeftNavWrapper expanded={leftNavIsOpen}>
       <SideNav
         expanded
         defaultExpanded

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

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

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

@@ -29,7 +29,3 @@
     box-shadow: none;
   }
 }
-
-.shouldHideHeader {
-  top: -48px;
-}

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

@@ -1,21 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import {
-  pageHeader,
-  text,
-  pageHeaderSticky,
-  pageHeaderShifted,
-} from './PageHeader.module.scss';
+import { pageHeader, withTabs, text } from './PageHeader.module.scss';
 
-const PageHeader = ({ children, title, tabs = [], shouldHideHeader }) => (
-  <div
-    className={cx({
-      [pageHeader]: pageHeader,
-      [pageHeaderSticky]: tabs.length,
-      [pageHeaderShifted]: shouldHideHeader,
-    })}
-  >
+const PageHeader = ({ title, tabs = [] }) => (
+  <div className={cx(pageHeader, { [withTabs]: tabs.length })}>
     <div className="bx--grid">
       <div className="bx--row">
         <div className="bx--col-lg-12">
@@ -25,16 +14,10 @@ const PageHeader = ({ children, title, tabs = [], shouldHideHeader }) => (
         </div>
       </div>
     </div>
-    {children}
   </div>
 );
 
 PageHeader.propTypes = {
-  /**
-   * Pass in the children that will be rendered within the PageHeader
-   */
-  children: PropTypes.node,
-
   /**
    * Specify the title for the page
    */

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

@@ -1,28 +1,24 @@
 @import '~carbon-components/scss/globals/scss/layout';
 
 .page-header {
+  --height: 20rem;
+  height: 20rem;
+  height: var(--height);
   background: $carbon--black-100;
   color: $inverse-01;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 20rem;
-  transition: top $duration--fast-02;
+  border-bottom: 1px solid $inverse-02;
+}
+
+.with-tabs {
+  height: calc(var(--height) - 3rem);
 }
 
 .text {
   @include carbon--type-style('display-01', true);
   margin-bottom: $spacing-07;
   margin-top: auto;
 }
-
-.page-header--sticky {
-  position: sticky;
-  z-index: z('header');
-  top: -14rem;
-}
-
-.page-header--sticky.page-header--shifted {
-  top: -17rem;
-}

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

@@ -1,7 +1,10 @@
 .tabs-container {
   margin: 0;
   width: 100%;
-  box-shadow: 0 -1px 0 rgba($ui-02, 0.25);
+  background: $carbon--black-100;
+  position: sticky;
+  top: 3rem;
+  z-index: z('header');
 }
 
 .list {

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

@@ -1,10 +1,6 @@
 import React from 'react';
 import slugify from 'slugify';
 import { useStaticQuery, graphql } from 'gatsby';
-import { breakpoints } from '@carbon/elements';
-import useMedia from 'use-media';
-
-import { useScrollDirection } from '../util/hooks';
 
 import BackToTopBtn from '../components/BackToTopBtn';
 import Layout from '../components/Layout';
@@ -17,9 +13,6 @@ import Main from '../components/Main';
 const Default = ({ pageContext, children, location }) => {
   const { frontmatter = {}, relativePagePath, titleType } = pageContext;
   const { tabs, title, theme, description, keywords } = frontmatter;
-  const scrollDirection = useScrollDirection();
-  const isMobile = useMedia({ maxWidth: breakpoints.md.width });
-  const shouldHideHeader = isMobile && tabs && scrollDirection === 'down';
 
   // get the path prefix if it exists
   const {
@@ -45,22 +38,15 @@ const Default = ({ pageContext, children, location }) => {
   const currentTab = getCurrentTab();
   return (
     <Layout
-      shouldHideHeader={shouldHideHeader}
       homepage={false}
       theme={theme}
       pageTitle={title}
       pageDescription={description}
       pageKeywords={keywords}
       titleType={titleType}
     >
-      <PageHeader
-        shouldHideHeader={shouldHideHeader}
-        title={title}
-        label="label"
-        tabs={tabs}
-      >
-        {tabs && <PageTabs slug={slug} tabs={tabs} currentTab={currentTab} />}
-      </PageHeader>
+      <PageHeader title={title} label="label" tabs={tabs} />
+      {tabs && <PageTabs slug={slug} tabs={tabs} currentTab={currentTab} />}
       <Main padded>
         {children}
         <EditLink relativePagePath={relativePagePath} />