refactor(website/responsive): make the website responsive

packages/gatsby-theme-styleguide/src/gatsby-components/Container/Container.js

@@ -2,5 +2,10 @@ import styled from 'styled-components'
 import { MagicUnit } from '@mozaic-ds/tokens/build/js/tokens.js'
 
 export default styled.div`
-  padding: ${MagicUnit}rem ${MagicUnit * 3}rem;
+  padding: ${MagicUnit}rem ${MagicUnit * 2}rem;
+
+  @media screen and (min-width: 1024px) {
+    padding-left: ${MagicUnit * 3}rem;
+    padding-right: ${MagicUnit * 3}rem;
+  }
 `

packages/gatsby-theme-styleguide/src/gatsby-components/PageTabs/PageTabs.js

@@ -10,12 +10,20 @@ const Tabs = styled.div`
   top: 0;
   border-bottom: solid 1px #000;
   background: #e6e6e6;
+
+  @media screen and (max-width: 767px) {
+    overflow-x: auto;
+  }
 `
 
 const TabsWrapper = styled.div`
   display: inline-flex;
-  padding-left: ${MagicUnit * 3}rem;
+  padding-left: ${MagicUnit * 1.5}rem;
   max-width: ${MagicUnit * 52}rem;
+
+  @media screen and (min-width: 768px) {
+    padding-left: ${MagicUnit * 3}rem;
+  }
 `
 
 const TabItem = styled.div``

packages/gatsby-theme-styleguide/src/gatsby-components/TableOfContents/tableofcontents.scss

@@ -2,17 +2,26 @@
 .toc {
   $toc: &;
 
+  flex: 1;
+  order: -1;
   padding-top: 1rem;
-  max-width: 16.5rem;
   width: 100%;
 
+  @media screen and (min-width: 1280px) {
+    order: initial;
+    max-width: 16.5rem;
+  }
+
   &__wrapper {
-    border-left: 1px solid #887f87;
-    max-height: 90vh;
-    overflow-y: auto;
     padding: 1rem;
-    position: sticky;
-    top: 0;
+
+    @media screen and (min-width: 1280px) {
+      border-left: 1px solid #887f87;
+      max-height: 90vh;
+      overflow-y: auto;
+      position: sticky;
+      top: 0;
+    }
   }
 
   &__title {

packages/gatsby-theme-styleguide/src/gatsby-components/base.scss

@@ -102,3 +102,7 @@ th:first-child,
 td:first-child {
   padding-left: 0;
 }
+
+.nav-open {
+  overflow: hidden;
+}

packages/gatsby-theme-styleguide/src/gatsby-components/layout.js

@@ -43,13 +43,30 @@ const Main = styled.main`
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
+
+  .nav-open & {
+    overflow: hidden;
+  }
 `
 
 const AsideContainer = styled.aside`
   background: #eeeef0;
   min-height: 100vh;
   position: relative;
   width: 18.75rem;
+
+  @media screen and (max-width: 1023px) {
+    left: 0;
+    position: fixed;
+    top: 0;
+    transition: all 0.4s;
+    transform: translateX(-100%);
+    z-index: 1000;
+  }
+
+  .nav-open & {
+    transform: translateX(0);
+  }
 `
 
 const Layout = ({ children, location }) => {

packages/gatsby-theme-styleguide/src/templates/pattern-page.js

@@ -9,21 +9,27 @@ import Layout from '../gatsby-components/layout'
 import PageTabs from '../gatsby-components/PageTabs'
 import TableOfContents from '../gatsby-components/TableOfContents'
 import PatternStatusGroup from '../gatsby-components/PatternStatusGroup'
+import { DisplayDisplayList32 } from '@mozaic-ds/icons/react'
+import { ControlCross32 } from '@mozaic-ds/icons/react'
 
 const FullWidthContainer = styled.div`
   ${({ separator }) => separator};
 `
 
 const PageContentWrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+
+  @media screen and (min-width: 1280px) {
+    flex-direction: row;
+  }
 `
 
 const PageContent = styled.div`
   flex: 1;
-  min-width: ${MagicUnit * 30}rem;
 
-  @media screen and (min-width: 1240px) {
+  @media screen and (min-width: 1280px) {
+    min-width: ${MagicUnit * 30}rem;
     flex: 0 0 ${MagicUnit * 52}rem;
   }
 
@@ -62,6 +68,41 @@ const Header = styled(Container)`
         `};
 `
 
+const MenuTriggerButton = styled.button`
+  background: #e6e6e6;
+  border: none;
+  cursor: pointer;
+  height: 2rem;
+  padding: 0;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  width: 2rem;
+  z-index: 2000;
+
+  @media screen and (min-width: 1024px) {
+    display: none;
+  }
+
+  .triggerMenu {
+    &__open {
+      display: block;
+
+      .nav-open & {
+        display: none;
+      }
+    }
+
+    &__close {
+      display: none;
+
+      .nav-open & {
+        display: block;
+      }
+    }
+  }
+`
+
 const HeaderTitle = styled.h1`
   font-weight: normal;
   margin: 0;
@@ -108,10 +149,34 @@ export default ({ data, location }) => {
   const hasTabs = samePageTabs.length > 1
   const hasMainCategory = mainCategory.length > 3
 
+  const handleMenu = () => {
+    if (document.body.classList.contains('nav-open')) {
+      document.body.classList.remove('nav-open')
+      return false
+    }
+
+    document.body.classList.add('nav-open')
+  }
+
   return (
     <Layout location={location} tableOfContents={tableOfContents}>
       <FullWidthContainer separator>
         <Header hasMainCategory={hasMainCategory}>
+          <MenuTriggerButton
+            className="triggerMenu"
+            type="button"
+            title="Open Menu"
+            onClick={handleMenu}
+          >
+            <DisplayDisplayList32
+              className="triggerMenu__open"
+              fill="currentColor"
+            />
+            <ControlCross32
+              className="triggerMenu__close"
+              fill="currentColor"
+            />
+          </MenuTriggerButton>
           {hasMainCategory && (
             <HeaderCategory>{mainCategory[1]}</HeaderCategory>
           )}