navbar and title changes

src/components/header.js

@@ -1,20 +1,25 @@
 import React from "react"
-import { Link } from "gatsby"
 
 import logo from "../images/index/logo_white.png"
 import "bootstrap/dist/css/bootstrap.css"
 import "../styles/header.css"
 import {Navbar, Nav} from "react-bootstrap"
-import { globalHistory as history } from '@reach/router'
+import { Link } from '@reach/router'
 
-const Header = ( ) => { 
-  let curActive = [' ', ' ', ' '];
-  const { location } = history;
-  if (location.pathname=== '/about'){curActive[0] = 'active';}  
-  if (location.pathname=== '/projects/physics' || location.pathname === '/projects/education' || location.pathname === '/projects/math' || location.pathname === '/projects/software'){curActive[1] = 'active';}  
-  if (location.pathname=== '/partners'){curActive[2] = 'active';} 
+const NavLink = props => (
+  <Link
+    {...props}
+    getProps={({ isCurrent }) => {
+      return {
+        style: {
+          color: isCurrent ? "white" : "rgb(230, 221, 221)"
+        }
+      };
+    }}
+  />
+);
 
-  return(
+const Header = ( ) => (
     <header>
     <Navbar bg="dark" expand="lg" fixed="top">
     <div className="container">
@@ -22,15 +27,14 @@ const Header = ( ) => {
     <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="mr-auto">
           <Navbar.Brand><Link to="/"><img src={logo} height="50px" alt="npm logo" id="logo"/></Link></Navbar.Brand>
-          <Nav.Link><Link id={`${curActive[0]}`} to="./about">Группа</Link></Nav.Link>
-          <Nav.Link><Link id={`${curActive[1]}`} to="./projects/physics">Проекты</Link></Nav.Link>
-          <Nav.Link><Link id={`${curActive[2]}`} to="./partners">Партнеры</Link></Nav.Link>
+          <Nav.Link><NavLink to="/about">Группа</NavLink></Nav.Link>
+          <Nav.Link><NavLink to="/projects/physics">Проекты</NavLink></Nav.Link>
+          <Nav.Link><NavLink to="/partners">Партнеры</NavLink></Nav.Link>
         </Nav>
     </Navbar.Collapse>
     </div>
     </Navbar>
   </header>
 )
-}
 
 export default Header

src/components/layout.js

@@ -1,17 +1,24 @@
 import React from "react"
 import PropTypes from "prop-types"
 
+import favicon from "../images/icon.png"
+import Helmet from "react-helmet"
+
 import Header from "./header"
 import Footer from "./footer"
+import SEO from "./seo"
 
 import "../styles/layout.css"
 import "../styles/bootstrap.min.css"
 import "../styles/main.css"
 import "katex/dist/katex.min.css"
 
-const Layout = ({ children }) => {
-  return (
+const Layout = ({ children }) => (
     <>
+    <Helmet>
+      <link rel="icon" href={favicon}/>
+    </Helmet>
+      <SEO title=" "/>
       <Header siteTitle="NPM group" />
       <div class = "container">
         <main>{children}</main>
@@ -19,7 +26,6 @@ const Layout = ({ children }) => {
         <Footer/>
     </>
 )
-}
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,

src/components/seo.js

@@ -0,0 +1,60 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Helmet from "react-helmet"
+import { useStaticQuery, graphql } from "gatsby"
+
+const SEO = ({ description, lang, meta, title }) => {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+          }
+        }
+      }
+    `
+  )
+
+  const metaDescription = description || site.siteMetadata.description
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={title}
+      titleTemplate={site.siteMetadata.title}
+      meta={[
+        {
+          name: `description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:title`,
+          content: title,
+        },
+        {
+          property: `og:description`,
+          content: metaDescription,
+        },
+      ].concat(meta)}
+    />
+  )
+}
+
+SEO.defaultProps = {
+  lang: `ru`,
+  meta: [],
+  description: ``,
+}
+
+SEO.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.arrayOf(PropTypes.object),
+  title: PropTypes.string.isRequired,
+}
+
+export default SEO

src/styles/header.css

@@ -3,11 +3,10 @@
 a.nav-link { margin-top: 25px; max-height: 62px;}
 a.nav-link:hover { background-color: rgb(20, 142, 161); }
 a.nav-link a:hover { color: white; text-decoration: none; }
-a.nav-link a#active { 
+a[aria-current="page"] { 
     color: white; 
     background-color: rgb(20, 142, 161); 
     padding-top: 12px;
-    padding-bottom: 20px;
 }
 a.nav-link a { 
     padding: 12px;
@@ -19,7 +18,7 @@ a.nav-link a {
 /* -------------- logo ----------------------- */
 img#logo { opacity: 0.7; margin-top: 20px;}
 img#logo:hover { opacity: 1;}
-a[aria-current="page"] img#logo { opacity: 1; margin-top: 20px; }
+a[aria-current="page"] img#logo { opacity: 1; margin-top: 20px; background-color: rgb(52,58,64); }
 /* ------------------------------------------- */
 
 /* ----- collapse show ---------------------- */
@@ -29,8 +28,7 @@ a[aria-current="page"] img#logo { opacity: 1; margin-top: 20px; }
         color: white; 
         background-color: rgb(20, 142, 161); 
         padding-top: 11px;
-        padding-bottom: 12px;
-     }
+        padding-bottom: 12px; }
 }
 
 button.navbar-toggler.collapsed { margin-top: 0px; margin-left: 15px; }
@@ -57,3 +55,9 @@ div#navbarSupportedContent.navbar-collapse.collapse.show img#logo{ margin: auto;
     width: 100%;
     margin: 0;
     padding: 0; }
+
+
+@media (max-width: 769px) { 
+    a[aria-current="page"] img#logo { margin-top: 0; margin-left: 0; padding-left: 15px }
+    a[aria-current="page"] { padding-top: 0 }
+ }