dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: migrate from styled-components to emotion

Browse Source
This commit is contained in:
Dan Head
2021-01-20 20:56:39 +00:00
parent eba8b769a2
commit 2febe92029
22 changed files with 199 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
gatsby-config.js
View File

@@ -98,6 +98,7 @@ module.exports = {
},
`gatsby-plugin-react-helmet`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`
`gatsby-plugin-sharp`,
`gatsby-plugin-emotion`
]
};

227
package-lock.json generated
View File

@@ -1134,29 +1134,151 @@
"to-fast-properties": "^2.0.0"
}
},
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"@emotion/babel-plugin": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.1.2.tgz",
"integrity": "sha512-Nz1k7b11dWw8Nw4Z1R99A9mlB6C6rRsCtZnwNUOj4NsoZdrO2f2A/83ST7htJORD5zpOiLKY59aJN23092949w==",
"requires": {
"@emotion/memoize": "0.7.4"
"@babel/helper-module-imports": "^7.7.0",
"@babel/plugin-syntax-jsx": "^7.12.1",
"@babel/runtime": "^7.7.2",
"@emotion/hash": "^0.8.0",
"@emotion/memoize": "^0.7.5",
"@emotion/serialize": "^1.0.0",
"babel-plugin-macros": "^2.6.1",
"convert-source-map": "^1.5.0",
"escape-string-regexp": "^4.0.0",
"find-root": "^1.1.0",
"source-map": "^0.5.7",
"stylis": "^4.0.3"
},
"dependencies": {
"@emotion/memoize": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
"integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
},
"escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
}
}
},
"@emotion/babel-plugin-jsx-pragmatic": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz",
"integrity": "sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ==",
"requires": {
"@babel/plugin-syntax-jsx": "^7.2.0"
}
},
"@emotion/babel-preset-css-prop": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.0.0.tgz",
"integrity": "sha512-E7z3jMf1OyThGpp3ngYGxOSGX5AdoSQTuqM9QgJNAHFh3Fi8N5CbWx6g+IdySJ8bjPiMgFQsIeEhkyy+4mDpCQ==",
"requires": {
"@babel/plugin-transform-react-jsx": "^7.12.1",
"@babel/runtime": "^7.7.2",
"@emotion/babel-plugin": "^11.0.0",
"@emotion/babel-plugin-jsx-pragmatic": "^0.1.5"
}
},
"@emotion/cache": {
"version": "11.1.3",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.1.3.tgz",
"integrity": "sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==",
"requires": {
"@emotion/memoize": "^0.7.4",
"@emotion/sheet": "^1.0.0",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"stylis": "^4.0.3"
}
},
"@emotion/hash": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
"@emotion/react": {
"version": "11.1.4",
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.1.4.tgz",
"integrity": "sha512-9gkhrW8UjV4IGRnEe4/aGPkUxoGS23aD9Vu6JCGfEDyBYL+nGkkRBoMFGAzCT9qFdyUvQp4UUtErbKWxq/JS4A==",
"requires": {
"@babel/runtime": "^7.7.2",
"@emotion/cache": "^11.1.3",
"@emotion/serialize": "^1.0.0",
"@emotion/sheet": "^1.0.1",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"hoist-non-react-statics": "^3.3.1"
}
},
"@emotion/serialize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.0.tgz",
"integrity": "sha512-zt1gm4rhdo5Sry8QpCOpopIUIKU+mUSpV9WNmFILUraatm5dttNEaYzUWWSboSMUE6PtN2j1cAsuvcugfdI3mw==",
"requires": {
"@emotion/hash": "^0.8.0",
"@emotion/memoize": "^0.7.4",
"@emotion/unitless": "^0.7.5",
"@emotion/utils": "^1.0.0",
"csstype": "^3.0.2"
}
},
"@emotion/sheet": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz",
"integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g=="
},
"@emotion/styled": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.0.0.tgz",
"integrity": "sha512-498laccxJlBiJqrr2r/fx9q+Pr55D0URP2UyOkoSGLjevb8LLAFWueqthsQ5XijE66iGo7y3rzzEYdA7CHmZEQ==",
"requires": {
"@babel/runtime": "^7.7.2",
"@emotion/babel-plugin": "^11.0.0",
"@emotion/is-prop-valid": "^1.0.0",
"@emotion/serialize": "^1.0.0",
"@emotion/utils": "^1.0.0"
},
"dependencies": {
"@emotion/is-prop-valid": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz",
"integrity": "sha512-G5X0t7eR9pkhUvAY32QS3lToP9JyNF8It5CcmMvbWjmC9/Yq7IhevaKqxl+me2BKR93iTPiL/h3En1ZX/1G3PQ==",
"requires": {
"@emotion/memoize": "^0.7.4"
}
}
}
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@emotion/utils": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
"integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
},
"@emotion/weak-memoize": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
},
"@endemolshinegroup/cosmiconfig-typescript-loader": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz",
@@ -3410,22 +3532,6 @@
"resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.13.0.tgz",
"integrity": "sha512-6sL3JVKDa3OjXtmBYrr467BnQeUjNI7p2dy+aBwbB8WqChHLJOFh5+lxfzC0z/7hBehqmWpBV7xHfZdIP1lAzQ=="
},
"babel-plugin-styled-components": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
"integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
"requires": {
"@babel/helper-annotate-as-pure": "^7.0.0",
"@babel/helper-module-imports": "^7.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"lodash": "^4.17.11"
}
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-transform-react-remove-prop-types": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -4445,11 +4551,6 @@
}
}
},
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5410,11 +5511,6 @@
}
}
},
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
},
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -5539,16 +5635,6 @@
"fastparse": "^1.1.2"
}
},
"css-to-react-native": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
}
},
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -7809,6 +7895,11 @@
"pkg-dir": "^4.1.0"
}
},
"find-root": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
},
"find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -8735,6 +8826,15 @@
"micromatch": "^4.0.2"
}
},
"gatsby-plugin-emotion": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-emotion/-/gatsby-plugin-emotion-5.3.0.tgz",
"integrity": "sha512-zDbEOb5MvL4ve1OTZCtgVuEJUoyBgqJBByPO+xq87TsuKPJyzE2aRD7mtCcwivh4Yo7KBl1X9bl3EiOm5m50IA==",
"requires": {
"@babel/runtime": "^7.11.2",
"@emotion/babel-preset-css-prop": "^11.0.0"
}
},
"gatsby-plugin-manifest": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.10.0.tgz",
@@ -17401,38 +17501,6 @@
"inline-style-parser": "0.1.1"
}
},
"styled-components": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
"integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^0.8.8",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
},
"dependencies": {
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -17455,6 +17523,11 @@
}
}
},
"stylis": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.6.tgz",
"integrity": "sha512-1igcUEmYFBEO14uQHAJhCUelTR5jPztfdVKrYxRnDa5D5Dn3w0NxXupJNPr/VV/yRfZYEAco8sTIRZzH3sRYKg=="
},
"sudo-prompt": {
"version": "8.2.5",
"resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-8.2.5.tgz",

6
package.json
View File

@@ -17,9 +17,12 @@
]
},
"dependencies": {
"@emotion/react": "^11.1.4",
"@emotion/styled": "^11.0.0",
"@fontsource/cooper-hewitt": "^4.1.0",
"gatsby": "^2.29.3",
"gatsby-image": "^2.8.0",
"gatsby-plugin-emotion": "^5.3.0",
"gatsby-plugin-manifest": "^2.10.0",
"gatsby-plugin-react-helmet": "^3.7.0",
"gatsby-plugin-react-svg": "^3.0.0",
@@ -30,8 +33,7 @@
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-slick": "^0.27.13",
"slick-carousel": "^1.8.1",
"styled-components": "^5.2.1"
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"eslint": "^7.17.0",

2
src/components/button.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
const Container = styled.button`
background-color: transparent;

2
src/components/card.js
View File

@@ -1,7 +1,7 @@
import React from "react";
import { Link as GatsbyLink } from "gatsby";
import Img from "gatsby-image";
import styled from "styled-components";
import styled from "@emotion/styled";
const Container = styled.div`
display: flex;

2
src/components/content.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
const Container = styled.div`
transform: ${props =>

3
src/components/custom-slick.js
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useRef } from "react";
import Slick from "react-slick";
import styled, { css } from "styled-components";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import LeftArrow from "../icons/left-arrow.svg";
import RightArrow from "../icons/right-arrow.svg";
import "slick-carousel/slick/slick.css";

2
src/components/footer.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
const Container = styled.footer`
background-color: var(--color-white);

3
src/components/header-logo.js
View File

@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import styled, { css } from "styled-components";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import LogoArrows from "../icons/logo-arrows.svg";
const Container = styled.div`

4
src/components/header.js
View File

@@ -1,6 +1,6 @@
import React from "react";
import Img from "gatsby-image";
import styled from "styled-components";
import styled from "@emotion/styled";
const Container = styled.header`
position: relative;
@@ -29,7 +29,7 @@ export default function Header({ image, children }) {
/*
import React, { useState } from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
import MenuButton from "./menu-button";
import Nav from "./nav";

2
src/components/icon-with-content.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
import { Icon } from "./";
const Container = styled.div`

2
src/components/icon.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
const Container = styled.span`
display: inline-block;

2
src/components/input-text.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
const Container = styled.div`
max-width: 320px;

2
src/components/link.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
import { Link as GatsbyLink } from "gatsby";
const StyledLink = styled.a`

2
src/components/menu-button.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
const Container = styled.button`
position: relative;

3
src/components/nav-item.js
View File

@@ -1,5 +1,6 @@
import React from "react";
import styled, { css } from "styled-components";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import NavLink from "./nav-link";
const SubList = styled.ul`

2
src/components/nav-link.js
View File

@@ -1,6 +1,6 @@
import React from "react";
import { Link as GatsbyLink } from "gatsby";
import styled from "styled-components";
import styled from "@emotion/styled";
const Link = styled(GatsbyLink)`
display: inline-block;

2
src/components/nav.js
View File

@@ -1,6 +1,6 @@
import React from "react";
import { Link } from "gatsby";
import styled from "styled-components";
import styled from "@emotion/styled";
import NavItem from "./nav-item";
import MenuButton from "./menu-button";
import LogoArrows from "../icons/logo-arrows.svg";

2
src/components/review-summary.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import styled from "styled-components";
import styled from "@emotion/styled";
import Text from "./text";
import RatedPeople from "../icons/rated-people.svg";
import Bark from "../icons/bark.svg";

3
src/components/section.js
View File

@@ -1,5 +1,6 @@
import React from "react";
import styled, { css } from "styled-components";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
const Container = styled.div`
padding: var(--spacing-y-lg) var(--spacing-x-sm);

3
src/components/text.js
View File

@@ -1,5 +1,6 @@
import React from "react";
import styled, { css } from "styled-components";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
const StyledText = styled.p`
margin-bottom: var(--spacing-y-xs);

30
src/layout.js
View File

@@ -2,12 +2,12 @@ import React, { useState } from "react";
import { useStaticQuery, graphql } from "gatsby";
import { Helmet } from "react-helmet";
import { Footer, Nav } from "./components";
import { createGlobalStyle } from "styled-components";
import { css, Global } from "@emotion/react";
import "@fontsource/cooper-hewitt/400.css";
import "@fontsource/cooper-hewitt/400-italic.css";
import "@fontsource/cooper-hewitt/700.css";
const GlobalStyle = createGlobalStyle`
const GlobalStyles = css`
:root {
--theme-max-width: 960px;
--theme-color-primary: #9c0905;
@@ -66,12 +66,13 @@ const GlobalStyle = createGlobalStyle`
body {
box-sizing: border-box;
margin: 0;
font-family: 'Cooper Hewitt', sans-serif;
font-family: "Cooper Hewitt", sans-serif;
overflow-x: hidden;
overflow-y: ${props => (props.navOpen ? "hidden" : "auto")};
}
*, *:before, *:after {
*,
*:before,
*:after {
box-sizing: inherit;
}
@@ -108,7 +109,6 @@ export default function Layout({ children }) {
`);
const { title, description, keywords, navData } = data.site.siteMetadata;
const [navOpen, setNavOpen] = useState();
const [loaded, setLoaded] = useState();
return (
<>
<main>
@@ -121,17 +121,21 @@ export default function Layout({ children }) {
htmlAttributes={{
lang: "en"
}}
onChangeClientState={() => setLoaded(true)}
/>
<GlobalStyle navOpen={navOpen} />
{loaded && (
<>
<Global styles={GlobalStyles} />
<Global
styles={
navOpen && {
body: {
"overflow-y": "hidden"
}
}
}
/>
{children}
<Footer />
</>
)}
</main>
{loaded && <Nav data={navData} open={navOpen} setOpen={setNavOpen} />}
<Nav data={navData} open={navOpen} setOpen={setNavOpen} />
</>
);
}