feat(docs): add responsive mobile header (#165)

* feat(docs): add responsive mobile header * fix: pr comments
bigcommerce · Aug 14, 2019 · dca031a · dca031a
1 parent d1e900f
commit dca031a
Show file tree

Hide file tree

Showing 17 changed files with 314 additions and 187 deletions.
diff --git a/packages/big-design-icons/src/components/MenuIcon.tsx b/packages/big-design-icons/src/components/MenuIcon.tsx
@@ -0,0 +1,16 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React from 'react';
+
+import { createStyledIcon, IconProps } from '../base';
+
+const Icon = React.memo<Partial<IconProps>>(({ title, theme, ...props }) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" stroke="currentColor" fill="currentColor" strokeWidth="0" {...props}>
+    <title>{title}</title>
+    <path fill="none" d="M0 0h24v24H0V0z" />
+    <path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" />
+  </svg>
+));
+
+export const MenuIcon = createStyledIcon(Icon);
diff --git a/packages/big-design-icons/src/components/index.ts b/packages/big-design-icons/src/components/index.ts
@@ -19,6 +19,7 @@ export * from './FileCopyIcon';
 export * from './FilterListIcon';
 export * from './InvertColorsIcon';
 export * from './LanguageIcon';
+export * from './MenuIcon';
 export * from './MoreHorizIcon';
 export * from './NotificationsIcon';
 export * from './OpenInNewIcon';

diff --git a/packages/big-design-icons/svgs/material/menu.svg b/packages/big-design-icons/svgs/material/menu.svg
diff --git a/packages/docs/components/Collapsible/styled.tsx b/packages/docs/components/Collapsible/styled.tsx
@@ -4,4 +4,5 @@ import styled from 'styled-components';
 export const StyledFlex = styled(Flex)`
   cursor: pointer;
   display: inline-flex;
+  flex-direction: row;
 `;
diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx
@@ -1,117 +1,122 @@
-import { Badge } from '@bigcommerce/big-design';
-import Link from 'next/link';
+import React from 'react';
 
-import { StyledFlex, StyledLogo } from './styled';
+import { StyledFlex } from './styled';
 import { SideNavGroup } from './SideNavGroup';
 import { SideNavLink } from './SideNavLink';
+import { SideNavLogo } from './SideNavLogo';
+import { SideNavMenu } from './SideNavMenu';
 
 export const SideNav: React.FC = () => {
   return (
-    <StyledFlex flexDirection="column" padding="medium" paddingBottom="xxxLarge">
-      <Link href="/GettingStarted/GettingStartedPage" as="/">
-        <StyledLogo>
-          <img src={`${process.env.URL_PREFIX}/static/logo-with-text.svg`} alt="BigDesign Logo" />
-        </StyledLogo>
-      </Link>
+    <StyledFlex
+      flexDirection={{ mobile: 'row', tablet: 'column' }}
+      alignContent={{ mobile: 'center', tablet: 'stretch' }}
+      justifyContent={{ mobile: 'space-between', tablet: 'flex-start' }}
+      padding="medium"
+      paddingBottom={{ mobile: 'medium', tablet: 'xxxLarge' }}
+    >
+      <SideNavLogo />
 
-      <SideNavGroup title="Introduction">
-        <SideNavLink href="/GettingStarted/GettingStartedPage" as="/">
-          Getting Started
-        </SideNavLink>
-      </SideNavGroup>
+      <SideNavMenu>
+        <SideNavGroup title="Introduction">
+          <SideNavLink href="/GettingStarted/GettingStartedPage" as="/">
+            Getting Started
+          </SideNavLink>
+        </SideNavGroup>
 
-      <SideNavGroup title="Foundations">
-        <SideNavLink href="/Colors/ColorsPage" as="/colors">
-          Colors
-        </SideNavLink>
-        <SideNavLink href="/Icons/IconsPage" as="/icons">
-          Icons
-        </SideNavLink>
-        <SideNavLink href="/Spacing/SpacingPage" as="/spacing">
-          Spacing
-        </SideNavLink>
-        <SideNavLink href="/Typography/TypographyPage" as="/typography">
-          Typography
-        </SideNavLink>
-      </SideNavGroup>
+        <SideNavGroup title="Foundations">
+          <SideNavLink href="/Colors/ColorsPage" as="/colors">
+            Colors
+          </SideNavLink>
+          <SideNavLink href="/Icons/IconsPage" as="/icons">
+            Icons
+          </SideNavLink>
+          <SideNavLink href="/Spacing/SpacingPage" as="/spacing">
+            Spacing
+          </SideNavLink>
+          <SideNavLink href="/Typography/TypographyPage" as="/typography">
+            Typography
+          </SideNavLink>
+        </SideNavGroup>
 
-      <SideNavGroup title="Layout">
-        <SideNavLink href="/Modal/ModalPage" as="/modal">
-          Modal
-        </SideNavLink>
-        <SideNavLink href="/Panel/PanelPage" as="/panel">
-          Panel
-        </SideNavLink>
-        <SideNavLink href="/Tabs/TabsPage" as="/tabs">
-          Tabs
-        </SideNavLink>
-      </SideNavGroup>
+        <SideNavGroup title="Layout">
+          <SideNavLink href="/Modal/ModalPage" as="/modal">
+            Modal
+          </SideNavLink>
+          <SideNavLink href="/Panel/PanelPage" as="/panel">
+            Panel
+          </SideNavLink>
+          <SideNavLink href="/Tabs/TabsPage" as="/tabs">
+            Tabs
+          </SideNavLink>
+        </SideNavGroup>
 
-      <SideNavGroup title="Actions &amp; Inputs">
-        <SideNavLink href="/Button/ButtonPage" as="/button">
-          Button
-        </SideNavLink>
-        <SideNavLink href="/Checkbox/CheckboxPage" as="/checkbox">
-          Checkbox
-        </SideNavLink>
-        <SideNavLink href="/Dropdown/DropdownPage" as="/dropdown">
-          Dropdown
-        </SideNavLink>
-        <SideNavLink href="/Form/FormPage" as="/form">
-          Form
-        </SideNavLink>
-        <SideNavLink href="/Input/InputPage" as="/input">
-          Input
-        </SideNavLink>
-        <SideNavLink href="/Link/LinkPage" as="/link">
-          Link
-        </SideNavLink>
-        <SideNavLink href="/Radio/RadioPage" as="/radio">
-          Radio
-        </SideNavLink>
-        <SideNavLink href="/Select/SelectPage" as="/select">
-          Select
-        </SideNavLink>
-        <SideNavLink href="/Textarea/TextareaPage" as="/textarea">
-          Textarea
-        </SideNavLink>
-      </SideNavGroup>
+        <SideNavGroup title="Actions &amp; Inputs">
+          <SideNavLink href="/Button/ButtonPage" as="/button">
+            Button
+          </SideNavLink>
+          <SideNavLink href="/Checkbox/CheckboxPage" as="/checkbox">
+            Checkbox
+          </SideNavLink>
+          <SideNavLink href="/Dropdown/DropdownPage" as="/dropdown">
+            Dropdown
+          </SideNavLink>
+          <SideNavLink href="/Form/FormPage" as="/form">
+            Form
+          </SideNavLink>
+          <SideNavLink href="/Input/InputPage" as="/input">
+            Input
+          </SideNavLink>
+          <SideNavLink href="/Link/LinkPage" as="/link">
+            Link
+          </SideNavLink>
+          <SideNavLink href="/Radio/RadioPage" as="/radio">
+            Radio
+          </SideNavLink>
+          <SideNavLink href="/Select/SelectPage" as="/select">
+            Select
+          </SideNavLink>
+          <SideNavLink href="/Textarea/TextareaPage" as="/textarea">
+            Textarea
+          </SideNavLink>
+        </SideNavGroup>
 
-      <SideNavGroup title="Status &amp; Feedback">
-        <SideNavLink href="/Badge/BadgePage" as="/badge">
-          Badge
-        </SideNavLink>
-        <SideNavLink href="/Progress/ProgressBarPage" as="/progress-bar">
-          Progress Bar
-        </SideNavLink>
-        <SideNavLink href="/Progress/ProgressCirclePage" as="/progress-circle">
-          Progress Circle
-        </SideNavLink>
-        <SideNavLink href="/Tooltip/TooltipPage" as="/tooltip">
-          Tooltip
-        </SideNavLink>
-      </SideNavGroup>
+        <SideNavGroup title="Status &amp; Feedback">
+          <SideNavLink href="/Badge/BadgePage" as="/badge">
+            Badge
+          </SideNavLink>
+          <SideNavLink href="/Progress/ProgressBarPage" as="/progress-bar">
+            Progress Bar
+          </SideNavLink>
+          <SideNavLink href="/Progress/ProgressCirclePage" as="/progress-circle">
+            Progress Circle
+          </SideNavLink>
+          <SideNavLink href="/Tooltip/TooltipPage" as="/tooltip">
+            Tooltip
+          </SideNavLink>
+        </SideNavGroup>
 
-      <SideNavGroup title="Utilities">
-        <SideNavLink href="/Box/BoxPage" as="/box">
-          Box
-        </SideNavLink>
-        <SideNavLink href="/Breakpoints/BreakpointsPage" as="/breakpoints">
-          Breakpoints
-        </SideNavLink>
-        <SideNavLink href="/Flex/FlexPage" as="/flex">
-          Flex
-        </SideNavLink>
-        <SideNavLink href="/Grid/GridPage" as="/grid">
-          Grid
-        </SideNavLink>
-        <SideNavLink href="/Margin/MarginPage" as="/margin">
-          Margin
-        </SideNavLink>
-        <SideNavLink href="/Padding/PaddingPage" as="/padding">
-          Padding
-        </SideNavLink>
-      </SideNavGroup>
+        <SideNavGroup title="Utilities">
+          <SideNavLink href="/Box/BoxPage" as="/box">
+            Box
+          </SideNavLink>
+          <SideNavLink href="/Breakpoints/BreakpointsPage" as="/breakpoints">
+            Breakpoints
+          </SideNavLink>
+          <SideNavLink href="/Flex/FlexPage" as="/flex">
+            Flex
+          </SideNavLink>
+          <SideNavLink href="/Grid/GridPage" as="/grid">
+            Grid
+          </SideNavLink>
+          <SideNavLink href="/Margin/MarginPage" as="/margin">
+            Margin
+          </SideNavLink>
+          <SideNavLink href="/Padding/PaddingPage" as="/padding">
+            Padding
+          </SideNavLink>
+        </SideNavGroup>
+      </SideNavMenu>
     </StyledFlex>
   );
 };
diff --git a/packages/docs/components/SideNav/SideNavGroup/SideNavGroup.tsx b/packages/docs/components/SideNav/SideNavGroup/SideNavGroup.tsx
@@ -11,7 +11,7 @@ const StyledList = styled(List)`
 
 export const SideNavGroup: React.FC<{ title: string }> = props => {
   return (
-    <Box marginTop="xLarge">
+    <Box marginTop={{ mobile: 'xxSmall', tablet: 'xLarge' }} marginHorizontal={{ mobile: 'medium', tablet: 'none' }}>
       <H4>{props.title}</H4>
       <StyledList bulleted={false}>{props.children}</StyledList>
     </Box>

diff --git a/packages/docs/components/SideNav/SideNavLink/SideNavLink.tsx b/packages/docs/components/SideNav/SideNavLink/SideNavLink.tsx
@@ -4,8 +4,13 @@ import styled from 'styled-components';
 import { List, NextLink } from '../../';
 
 const StyledLink = styled(Link)`
-  display: 'inline-block';
-  line-height: ${({ theme }) => theme.lineHeight.medium};
+  display: block;
+  line-height: ${({ theme }) => theme.lineHeight.large};
+
+  ${({ theme }) => theme.breakpoints.tablet} {
+    display: inline-block;
+    line-height: ${({ theme }) => theme.lineHeight.medium};
+  }
 `;
 
 export const SideNavLink: React.FC<{ href: string; as?: string }> = props => (

diff --git a/packages/docs/components/SideNav/SideNavLogo/SideNavLogo.tsx b/packages/docs/components/SideNav/SideNavLogo/SideNavLogo.tsx
@@ -0,0 +1,15 @@
+import { Flex } from '@bigcommerce/big-design';
+import Link from 'next/link';
+import React from 'react';
+
+import { StyledLogo } from './styled';
+
+export const SideNavLogo: React.FC = () => (
+  <Flex.Item>
+    <Link href="/GettingStarted/GettingStartedPage" as="/">
+      <StyledLogo>
+        <img src={`${process.env.URL_PREFIX}/static/logo-with-text.svg`} alt="BigDesign Logo" />
+      </StyledLogo>
+    </Link>
+  </Flex.Item>
+);
diff --git a/packages/docs/components/SideNav/SideNavLogo/index.tsx b/packages/docs/components/SideNav/SideNavLogo/index.tsx
@@ -0,0 +1 @@
+export * from './SideNavLogo';
diff --git a/packages/docs/components/SideNav/SideNavLogo/styled.tsx b/packages/docs/components/SideNav/SideNavLogo/styled.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const StyledLogo = styled.div`
+  cursor: pointer;
+
+  img {
+    margin: 0 auto;
+    max-width: 100%;
+  }
+`;
diff --git a/packages/docs/components/SideNav/SideNavMenu/SideNavMenu.tsx b/packages/docs/components/SideNav/SideNavMenu/SideNavMenu.tsx
@@ -0,0 +1,25 @@
+import { Button, Flex } from '@bigcommerce/big-design';
+import { MenuIcon } from '@bigcommerce/big-design-icons';
+import { default as Router } from 'next/router';
+import React from 'react';
+
+import { StyledMenu, StyledNavigation } from './styled';
+
+export const SideNavMenu: React.FC = props => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const handleClick = () => setIsExpanded(!isExpanded);
+  Router.events.on('routeChangeComplete', () => setIsExpanded(false));
+
+  return (
+    <Flex.Item style={{ display: 'flex', alignItems: 'center' }}>
+      <Flex>
+        <StyledMenu>
+          <Button variant="subtle" onClick={handleClick} iconOnly={<MenuIcon color="secondary70" />} />
+        </StyledMenu>
+        <StyledNavigation isExpanded={isExpanded} borderBottom="box" borderTop="box" shadow="floating">
+          {props.children}
+        </StyledNavigation>
+      </Flex>
+    </Flex.Item>
+  );
+};
diff --git a/packages/docs/components/SideNav/SideNavMenu/index.tsx b/packages/docs/components/SideNav/SideNavMenu/index.tsx
@@ -0,0 +1 @@
+export * from './SideNavMenu';
diff --git a/packages/docs/components/SideNav/SideNavMenu/styled.tsx b/packages/docs/components/SideNav/SideNavMenu/styled.tsx
@@ -0,0 +1,38 @@
+import { Flex } from '@bigcommerce/big-design';
+import styled from 'styled-components';
+
+export const StyledMenu = styled(Flex.Item)`
+  ${({ theme }) => theme.breakpoints.tablet} {
+    display: none;
+  }
+`;
+
+interface Navigation {
+  isExpanded: boolean;
+}
+
+export const StyledNavigation = styled(Flex.Item)<Navigation>`
+  ${({ theme }) => theme.shadow.floating}
+
+  background-color: ${({ theme }) => theme.colors.white};
+  border-bottom: ${({ theme }) => theme.border.box};
+  border-radius: 0;
+  border-top: ${({ theme }) => theme.border.box};
+  display: ${({ isExpanded }) => (isExpanded ? 'block' : 'none')};
+  height: 16rem;
+  left: 0;
+  overflow: auto;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 1;
+
+  ${({ theme }) => theme.breakpoints.tablet} {
+    border: 0;
+    box-shadow: none;
+    display: block;
+    height: auto;
+    position: static;
+    background-color: transparent;
+  }
+`;