refactor(website/responsive): make the website responsive

adeo · Aug 31, 2020 · ad10af0 · ad10af0
1 parent 4e4d115
commit ad10af0
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 15 deletions.
diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/Container/Container.js b/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;
+  }
 `
diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/PageTabs/PageTabs.js b/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``

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/TableOfContents/tableofcontents.scss b/packages/gatsby-theme-styleguide/src/gatsby-components/TableOfContents/tableofcontents.scss
@@ -1,11 +1,14 @@
 /* Table of contents */
 .toc {
-  margin: 0;
   flex: 1;
-  order: 0;
-  height: auto;
-  min-width: 13rem;
-  max-width: 18rem;
+  margin: 0;
+  order: -1;
+
+  @media screen and (min-width: 1280px) {
+    order: initial;
+    min-width: 13rem;
+    max-width: 18rem;
+  }
 
   &__wrapper {
     padding-right: 1.5rem;

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/layout.js b/packages/gatsby-theme-styleguide/src/gatsby-components/layout.js
@@ -43,13 +43,32 @@ const Main = styled.main`
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
+
+  .nav-open & {
+    overflow: hidden;
+  }
 `
 
-const AsideContainer = styled.aside`
+const AsideContainer = styled.aside``
+
+const AsideWrapper = styled.div`
   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 }) => {
@@ -65,10 +84,12 @@ const Layout = ({ children, location }) => {
           <Global>
             <Helmet title={data.site.siteMetadata.title}></Helmet>
             <AsideContainer>
-              <Menu
-                location={location}
-                siteTitle={data.site.siteMetadata.title}
-              />
+              <AsideWrapper>
+                <Menu
+                  location={location}
+                  siteTitle={data.site.siteMetadata.title}
+                />
+              </AsideWrapper>
             </AsideContainer>
             <MDXProvider components={shortcodes}>
               <Main id="scroller">{children}</Main>

diff --git a/packages/gatsby-theme-styleguide/src/templates/pattern-page.js b/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
 
+  function handleMenu(e) {
+    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>
           )}