css-for-js · ga676005 · May 26, 2022 · May 28, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components/macro';
+import { QUERIES } from '../../constants';
 
 import Header from '../Header';
 import ShoeIndex from '../ShoeIndex';
@@ -19,6 +20,14 @@ const App = () => {
 
 const Main = styled.main`
   padding: 64px 32px;
+
+  @media ${QUERIES.tabletAndDown} {
+    padding: 48px 32px;
+  }
+
+  @media ${QUERIES.phoneAndDown} {
+    padding: 48px 16px;
+  }
 `;
 
 export default App;
diff --git a/src/components/Breadcrumbs/Breadcrumbs.js b/src/components/Breadcrumbs/Breadcrumbs.js
@@ -23,7 +23,7 @@ const CrumbWrapper = styled.div`
     &::before {
       content: '/';
       margin-right: 8px;
-      color: ${COLORS.gray[300]};
+      color: var(--color-gray-300);
     }
   }
 `;

diff --git a/src/components/GlobalStyles/GlobalStyles.js b/src/components/GlobalStyles/GlobalStyles.js
@@ -64,13 +64,27 @@ table {
     float above the app.
   */
   isolation: isolate;
+
 }
 
 html {
   /*
     Silence the warning about missing Reach Dialog styles
   */
   --reach-dialog: 1;
+  --gray: 220deg 5% 40%;
+  --modal-backdrop: hsl(var(--gray) / .8);
+  --color-white: hsl(0deg 0% 100%);
+  --color-gray-100: hsl(185deg 5% 95%);
+  --color-gray-300: hsl(190deg 5% 80%);
+  --color-gray-500: hsl(196deg 4% 60%);
+  --color-gray-700: hsl(220deg 5% 40%);
+  --color-gray-900: hsl(220deg 3% 20%);
+  --color-primary: hsl(340deg 65% 47%);
+  --color-secondary: hsl(240deg 60% 63%);
+  --font-500: 500;
+  --font-500: 600;
+  --font-500: 800;  
 }
 
 html, body, #root {

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,18 +1,21 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 
-import { COLORS, WEIGHTS } from '../../constants';
+import { COLORS, QUERIES, WEIGHTS } from '../../constants';
 import Logo from '../Logo';
 import SuperHeader from '../SuperHeader';
 import MobileMenu from '../MobileMenu';
+import Icon from '../Icon';
+import UnstyledButton from '../UnstyledButton';
+import VisuallyHidden from '../VisuallyHidden';
+
 
 const Header = () => {
   const [showMobileMenu, setShowMobileMenu] = React.useState(false);
 
   // For our mobile hamburger menu, we'll want to use a button
   // with an onClick handler, something like this:
   //
-  // <button onClick={() => setShowMobileMenu(true)}>
 
   return (
     <header>
@@ -29,7 +32,28 @@ const Header = () => {
           <NavLink href="/kids">Kids</NavLink>
           <NavLink href="/collections">Collections</NavLink>
         </Nav>
-        <Side />
+        <Side >
+        </Side>
+        <MobileActions>
+          <UnstyledButton>
+            <Icon id={'shopping-bag'} strokeWidth={2} />
+            <VisuallyHidden>
+              Open cart
+            </VisuallyHidden>
+          </UnstyledButton>
+          <UnstyledButton>
+            <Icon id={'search'} strokeWidth={2} />
+            <VisuallyHidden>
+              Search
+            </VisuallyHidden>
+          </UnstyledButton>
+          <UnstyledButton onClick={() => setShowMobileMenu(true)}>
+            <Icon id={'menu'} strokeWidth={2} />
+            <VisuallyHidden>
+              Menu
+            </VisuallyHidden>
+          </UnstyledButton>
+        </MobileActions>
       </MainHeader>
 
       <MobileMenu
@@ -40,18 +64,48 @@ const Header = () => {
   );
 };
 
+const MobileActions = styled.div`
+  display: none;
+
+  @media ${QUERIES.tabletAndDown} {
+    display: flex;
+    gap: 32px;
+  }
+
+  @media ${QUERIES.phoneAndDown} {
+    display: flex;
+    gap: 24px;
+  }
+`
+
 const MainHeader = styled.div`
   display: flex;
   align-items: baseline;
   padding: 18px 32px;
   height: 72px;
   border-bottom: 1px solid ${COLORS.gray[300]};
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  @media ${QUERIES.tabletAndDown} {
+    align-items: center;
+    border-top: 4px solid;
+  }
+
+  @media ${QUERIES.phoneAndDown} {
+    padding-left: 16px;
+    padding-right : 16px;
+  }
 `;
 
 const Nav = styled.nav`
   display: flex;
-  gap: 48px;
+  gap: clamp(1rem,9vw - 4rem,5rem);
   margin: 0px 48px;
+
+  @media ${QUERIES.tabletAndDown} {
+    display: none;
+  }
 `;
 
 const Side = styled.div`

diff --git a/src/components/MobileMenu/MobileMenu.js b/src/components/MobileMenu/MobileMenu.js
@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components/macro';
 import { DialogOverlay, DialogContent } from '@reach/dialog';
 
-import { QUERIES } from '../../constants';
+import { QUERIES, COLORS } from '../../constants';
 
 import UnstyledButton from '../UnstyledButton';
 import Icon from '../Icon';
@@ -15,23 +15,95 @@ const MobileMenu = ({ isOpen, onDismiss }) => {
   }
 
   return (
-    <div>
-      <button onClick={onDismiss}>Dismiss menu</button>
-      <nav>
-        <a href="/sale">Sale</a>
-        <a href="/new">New&nbsp;Releases</a>
-        <a href="/men">Men</a>
-        <a href="/women">Women</a>
-        <a href="/kids">Kids</a>
-        <a href="/collections">Collections</a>
-      </nav>
-      <footer>
-        <a href="/terms">Terms and Conditions</a>
-        <a href="/privacy">Privacy Policy</a>
-        <a href="/contact">Contact Us</a>
-      </footer>
-    </div>
+    <Overlay>
+      <Content aria-label='MobileMenu'>
+        <Side>
+          <CloseButton onClick={onDismiss}>
+            <Icon id={'close'} />
+            <VisuallyHidden>Dismiss menu</VisuallyHidden>
+          </CloseButton>
+        </Side>
+        <Side>
+          <NavWrapper>
+            <NavLink className='active' href="/sale">Sale</NavLink>
+            <NavLink href="/new">New&nbsp;Releases</NavLink>
+            <NavLink href="/men">Men</NavLink>
+            <NavLink href="/women">Women</NavLink>
+            <NavLink href="/kids">Kids</NavLink>
+            <NavLink href="/collections">Collections</NavLink>
+          </NavWrapper>
+        </Side>
+        <Side>
+          <Footer>
+            <FooterLink href="/terms">Terms and Conditions</FooterLink>
+            <FooterLink href="/privacy">Privacy Policy</FooterLink>
+            <FooterLink href="/contact">Contact Us</FooterLink>
+          </Footer>
+        </Side>
+      </Content>
+    </Overlay>
   );
 };
 
+const Overlay = styled(DialogOverlay)`
+  position: fixed;
+  inset: 0;
+  background-color: var(--modal-backdrop);
+  display: none;
+
+  @media ${QUERIES.tabletAndDown} {
+    display: revert;
+  }
+`
+
+const Content = styled(DialogContent)`
+  height: 100%;
+  width: 300px;
+  margin-left: auto;
+  background-color: ${COLORS.white};
+  display: flex;
+  flex-direction: column;
+`
+
+const NavWrapper = styled.nav`
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  padding-left: 32px;
+`
+
+const NavLink = styled.a`
+  color: ${COLORS.gray[900]};
+  font-size: calc(18 / 16 * 1rem);
+
+  &.active {
+    color: ${COLORS.secondary};
+  }
+`
+
+const CloseButton = styled(UnstyledButton)`
+  position: absolute;
+  top: 10px;
+  right: 0px;
+  padding: 16px;
+`
+
+const Footer = styled.footer`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 14px;
+  padding-left: 32px;
+  padding-bottom: 32px;
+`
+
+const FooterLink = styled.a`
+  color: ${COLORS.gray[500]};
+`
+
+const Side = styled.div`
+  flex: 1;
+`
+
 export default MobileMenu;
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 
-import { COLORS, WEIGHTS } from '../../constants';
+import { COLORS, QUERIES, WEIGHTS } from '../../constants';
 
 import Icon from '../Icon';
 
@@ -14,7 +14,7 @@ const Select = ({ label, value, children, ...delegated }) => {
   const displayedValue = selectedChild.props.children;
 
   return (
-    <Wrapper>
+    <Wrapper className='sort-wrapper'>
       <VisibleLabel>{label}</VisibleLabel>
 
       <SelectWrapper>

diff --git a/src/components/ShoeIndex/ShoeIndex.js b/src/components/ShoeIndex/ShoeIndex.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 
-import { WEIGHTS } from '../../constants';
+import { QUERIES, WEIGHTS } from '../../constants';
 
 import Breadcrumbs from '../Breadcrumbs';
 import Select from '../Select';
@@ -47,10 +47,22 @@ const Wrapper = styled.div`
   flex-direction: row-reverse;
   align-items: baseline;
   gap: 32px;
+
+  @media ${QUERIES.tabletAndDown} {
+    flex-direction: column-reverse;
+    gap: 0px;
+  }
 `;
 
 const LeftColumn = styled.div`
   flex-basis: 248px;
+
+  @media ${QUERIES.tabletAndDown}{
+    flex-basis: revert;
+    & > *:not(:first-child) {
+      display: none;
+    }
+  }
 `;
 
 const MainColumn = styled.div`
@@ -61,6 +73,12 @@ const Header = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: baseline;
+
+  @media ${QUERIES.phoneAndDown} {
+    .sort-wrapper {
+      display: none;
+    }
+  }
 `;
 
 const Title = styled.h2`

diff --git a/src/components/SuperHeader/SuperHeader.js b/src/components/SuperHeader/SuperHeader.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 
-import { COLORS } from '../../constants';
+import { COLORS, QUERIES } from '../../constants';
 
 import SearchInput from '../SearchInput';
 import UnstyledButton from '../UnstyledButton';
@@ -22,6 +22,7 @@ const SuperHeader = () => {
   );
 };
 
+
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
@@ -32,6 +33,10 @@ const Wrapper = styled.div`
   height: 40px;
   padding-left: 32px;
   padding-right: 32px;
+
+  @media ${QUERIES.tabletAndDown} {
+    display: none;
+  }
 `;
 
 const MarketingMessage = styled.span`

diff --git a/src/constants.js b/src/constants.js
@@ -16,3 +16,15 @@ export const WEIGHTS = {
   medium: 600,
   bold: 800,
 };
+
+const BREAKPOINTS = {
+  phone: 600,
+  tablet: 950,
+  laptop: 1300,
+}
+
+export const QUERIES = {
+  phoneAndDown: `(max-width:  ${BREAKPOINTS.phone / 16}rem)`,
+  tabletAndDown: `(max-width: ${BREAKPOINTS.tablet / 16}rem)`,
+  laptopAndDown: `(max-width: ${BREAKPOINTS.laptop / 16}rem)`,
+}