Gatsby.jsでウェブサイトを作る！【ナビゲーションバーの追加】

$yarn add react-icons

import { FaBars , FaTimes } from "react-icons/fa"　
import { IconContext } from "react-icons/lib"

import React, {useState, useEffect } from 'react'
import { FaBars , FaTimes } from "react-icons/fa"
import { IconContext } from "react-icons/lib"
import { 
  Nav, 
  NavbarContainer, 
  NavLogo, 
  NavIcon, 
  MobileIcon,
  NavLinks,
  NavItem,
  NavMenu,
} from "./NavbarElements"

const Navbar = () => {
    const [click, setClick] = useState(false)
    const [scroll, setScroll] = useState(false)
   /* クリックするとclickの値が反転するようにメソッドを定義 */
    const handleClick = () => setClick(!click)

    /*　スクロールが80に達するとscrollがtrueになる　*/
    const changeNav = () => {
      if (window.scroll >=80){
        setScroll(true)
      }else {
        setScroll(false)
      }
    }

    /* スクロールイベントがあるごとにを実行させる　*/
    useEffect(() => {
      changeNav()
      window.addEventListener("scroll", changeNav)
    }, [])

  return(
    <>
    　/* 全てのアイコンの色をデフォルトで指定する(黒）　*/
      <IconContext.Provider value={{ color: "#141414"}}>
        /*　NavbarElementsからactiveとclickが渡されてstateに値が渡される */
        <Nav active = {scroll} click = {click}>
          <NavbarContainer>
            <NavLogo to='/'>
              <NavIcon />
              EXPLOR
            </NavLogo>
            /*　クリックするとアイコンが変化する　＊/
            <MobileIcon onClick={handleClick}>
              {click ? <FaTimes /> : <FaBars />}
            </MobileIcon>
            *　クリックするとアイコンが変化する　＊/
            <NavMenu onClick={handleClick} click={click}>
              <NavItem>
                <NavLinks to='/'>Home</NavLinks>
              </NavItem>
              <NavItem>
                <NavLinks to='/images'>Images</NavLinks>
              </NavItem>
              <NavItem>
                <NavLinks to='/destinations'>Destinations</NavLinks>
              </NavItem>
            </NavMenu>
          </NavbarContainer>
        </Nav>
      </IconContext.Provider>
    </>
  )
}

export default Navbar;

$ yarn add gatsby-plugin-styled-components styled-components 

import styled from 'styled-components';

import styled from 'styled-components';
import { DiScala } from "react-icons/Di"
import { Link } from "gatsby"

export const Nav = styled.nav`
  background: ＄{({active}) => active ? "#fff" 
  : "linear-gradient(to bottom,rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100% )"}; /* グラデーション */
  height: 80px;
  display: flex;
  justify-content: center; /* displayとセット 横並びにして中心に寄せる */
  align-items: center;  /* アイテムを中央付近にまとめる  */
  font-size: 1rem;
  position: sticky; /* Navをフロートする */
  top: 0;
  z-index: 999; /* 重なり順 */

  @media screen and (max-width: 960px){
    background: ＄{({click}) => (click ? "#fff" : "transparent" )}; /*　白 : 透明 */
    /* 変化するすべてのプロパティへの適用  */
    transition: 0.8s all ease; 
  }
`
export const NavbarContainer = styled.div`
  display: flex;
/* 各アイテムを均等に配置し、最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる */
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
`

export const NavLogo = styled(Link)`
color: #141414;
/* フレックスアイテムを先頭に寄せる */
justify-content: flex-start;
cursor: pointer;
/* テキストの装飾を行いません（初期値）*/
text-decoration: none;
/*　元のフォントサイズの150% */
font-size: 1.5rem;
display: flex;
align-items: center;
`
export const NavIcon = styled(DiScala)`
margin: 0 0.5rem 0 2rem;
`
export const MobileIcon = styled.div`
/* 画面がデスクトップサイズの場合は、非表示にする　*/
  display: none;

@media screen and (max-width: 960px){
  display: block;
  position: absolute;
  top: 0;
  right: 0;
/* 左に100% 下に60%移動させる　*/
  transform: translate(-100%, 60%);
  font-size: 1.8rem;
  cursor: pointer;
}
`
export const NavMenu = styled.ul`
  display: flex;
  align-items: center;
/* リストの点を消す　*/
  list-style: none;
  text-align: center;

  @media screen and (max-width: 960px){
    display: flex;
  /* 積み重なるように配置する */
    flex-direction: column;
    width: 100%;
    height: 90vh;
    position: absolute;
 /*　クリックする前は画面いっぱいに表示 : クリック後は上に移動して消える　*/
    top: ＄{({ click }) => (click ? "100%" : "-1000px") };
    /* 透明になる */
      opacity: 1; 
　/*　時間的変化をつける　|適応するプロパティ|変化までの時間|変化の仕方|(変化がいつ始まるか) */
　　/* easeは開始と完了が滑らか　*/
      transition: all 0.2s ease;
      background: #fff;
  }
`

export const NavItem = styled.li`
  height: 80px;

  @media screen and (max-width: 960px){
    width: 100%;
  }
`


export const NavLinks = styled(Link)`
  color: #141414;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0.5rem 1rem;
  height: 100%;
  font-family: "Ubuntu", sans-serif;

  @media screen and (max-width: 960px){
    text-align: center;
    padding: 2rem;
    width: 100%;
/*　table状に並べる　*/
    display: table;

    &:hover {
      color: #ff4040;
      transition: all 0.3s ease;
    }
  }
  `

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import "./layout.css"
import Navbar from "./Navbar";

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Navbar />

        <main>{children}</main>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout