fixed header

gatsby-config.js

@@ -10,6 +10,7 @@ module.exports = {
     titleTemplate: '%s · статьи и руководства по веб-разработке',
     description: 'сборник статей и руководств по тематике веб-разработки и IT для того чтобы помочь вам',
     url: 'https://devthread.ru',
+    email: 'support@devthread.ru',
     menuLinks: [
       {
         name: 'Статьи',
@@ -30,6 +31,7 @@ module.exports = {
     ]
   },
   plugins: [
+    'gatsby-plugin-react-helmet',
     'gatsby-plugin-sass',
     {
       resolve: "gatsby-plugin-react-svg",

package-lock.json

@@ -6661,6 +6661,14 @@
         "micromatch": "^3.1.10"
       }
     },
+    "gatsby-plugin-react-helmet": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.8.tgz",
+      "integrity": "sha512-K9X/LPUOw1f36jjMdNeIPPXTCTZGvF8Qfq9FIe0PuzHFfnESjxkchw6Rd9gB0/wQxSlvunIuEz0z13Vki2aRKw==",
+      "requires": {
+        "@babel/runtime": "^7.10.3"
+      }
+    },
     "gatsby-plugin-react-svg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@reach/router": "^1.3.4",
     "gatsby": "^2.23.12",
+    "gatsby-plugin-react-helmet": "^3.3.8",
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sass": "^2.3.7",
     "gatsby-source-filesystem": "^2.3.14",
@@ -31,9 +32,9 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
+    "url": "https://github.com/sergeyyarkov/devthread.ru"
   },
   "bugs": {
-    "url": "https://github.com/gatsbyjs/gatsby/issues"
+    "url": "https://github.com/sergeyyarkov/devthread.ru/issues"
   }
 }

src/components/About/About.js

@@ -4,7 +4,7 @@ import './About.scss'
 
 import ContactsIcon from '../../images/contacts-icon.svg'
 
-const About = ({ title, pageTitle }) => {
+const About = ({ title, pageTitle, email }) => {
   return (
     <div className="about">
       <div className="about-heading">
@@ -28,7 +28,7 @@ const About = ({ title, pageTitle }) => {
             <span>контакты</span>
           </div>
           <ul>
-            <li><a href="mailto:support@devthread.ru">support@devthread.ru</a></li>
+            <li><a href={`mailto:${email}`}>{email}</a></li>
             <li><a href="/">telegram</a></li>
             <Link to='/contacts'>форма обратной связи</Link>
           </ul>

src/components/Description/Description.js

@@ -14,7 +14,7 @@ export default () => {
               </div>
               <div className="description-content__info">
                 <p>
-                  здесь публикуются самые различные статьи и руководства на тему веб-разработки для того чтобы помочь вам
+                  сборник статей и руководств по тематике веб-разработки и IT для того чтобы помочь вам
                 </p>
                 <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="21px" height="21px" style={{msTransform: 'rotate(360deg)', WebkitTransform: 'rotate(360deg)', transform: 'rotate(360deg)'}} preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36">
                   <path fill="#EF9645" d="M4.861 9.147c.94-.657 2.357-.531 3.201.166l-.968-1.407c-.779-1.111-.5-2.313.612-3.093c1.112-.777 4.263 1.312 4.263 1.312c-.786-1.122-.639-2.544.483-3.331a2.483 2.483 0 0 1 3.456.611l10.42 14.72L25 31l-11.083-4.042L4.25 12.625a2.495 2.495 0 0 1 .611-3.478z" />

src/components/Header/Header.js

@@ -12,10 +12,12 @@ const Header = ({ title, menuLinks }) => {
   const [isScrolled, setIsScrolled] = React.useState(false)
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
 
-  React.useEffect(() => document.body.onscroll = () => window.pageYOffset >= 200 ? setIsScrolled(true) : setIsScrolled(false))
+  React.useEffect(() =>  {
+    isMobileOpen ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = ''
+    document.body.onscroll = () => window.pageYOffset >= 200 ? setIsScrolled(true) : setIsScrolled(false)
+  })
 
   const mobileHandler = () => {
-    !isMobileOpen ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = ''
     setIsMobileOpen(!isMobileOpen)
   }
 

src/hooks/useSiteMetadata.js

@@ -8,6 +8,7 @@ const useSiteMetadata = () => {
           title
           titleTemplate
           description
+          email
           siteUrl: url
           menuLinks {
             name

src/pages/about.js

@@ -6,7 +6,7 @@ import Offers from '../components/Offers/Offers'
 import About from '../components/About/About'
 
 const AboutPage = () => {
-  const { siteMetadata: { title, menuLinks } } = useSiteMetadata()
+  const { siteMetadata: { title, menuLinks, email } } = useSiteMetadata()
   return (
     <Layout>
       <SEO title='О сайте' description='Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства.' />
@@ -14,7 +14,7 @@ const AboutPage = () => {
         <div className="container-fluid">
           <div className="row">
             <div className="col-md-9 col-xs-12">
-              <About title={title} pageTitle={menuLinks.filter(page => page.link === '/about')[0].name} />
+              <About title={title} pageTitle={menuLinks.filter(page => page.link === '/about')[0].name} email={email} />
             </div>
             <div className="col-md-3 col-xs-12">
               <Offers />