Finish animation and toggle for sidebar

src/components/layouts/header/Header.component.jsx

@@ -12,13 +12,21 @@ const Header = () => {
  const [scrollY, setScrollY] = useState(window.pageYOffset)
  const [visible, setVisible] = useState(true)
  const [searchVisible, setSearchVisible] = useState(false)
+ const [sidebarOpen, setSidebarOpen] = useState(false)
 
+ // handle scroll, if scroll, hide header
  const handleScroll = () => {
  const currentScrollPosition = window.pageYOffset
  setVisible(scrollY > currentScrollPosition)
  setScrollY(currentScrollPosition)
  }
 
+ //handle sidebar if hamburger clicked
+
+ const handleSideBar = () => {
+ setSidebarOpen(false)
+ }
+
  useEffect(() => {
  document.addEventListener("scroll", handleScroll)
  return () => document.removeEventListener("scroll", handleScroll)
@@ -33,9 +41,7 @@ const Header = () => {
  <div className="logo-name">WHAT TO WATCH?</div>
  <div className="logo-pill"></div>
  </Link>
- <div
- className="header-burger"
- onClick={() => console.log("sidebar")}>
+ <div className="header-burger" onClick={() => setSidebarOpen(true)}>
  <GiHamburgerMenu />
  </div>
  </div>
@@ -45,7 +51,7 @@ const Header = () => {
  </header>
  </div>
  {searchVisible ? <MovieSearchBar /> : ""}
- <SideBar />
+ <SideBar sidebarOpen={sidebarOpen} handleSideBar={handleSideBar} />
  </Fragment>
  )
 }

src/components/layouts/header/Header.styles.scss

@@ -84,6 +84,6 @@
  font-size: 2rem;
  position: absolute;
  top: 4px;
- left: 20px;
+ left: 60px;
  }
 }

src/components/layouts/sidebar/SideBar.component.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import "./SideBar.style.scss"
 
 import { Link } from "react-router-dom"
@@ -7,15 +7,19 @@ import { MdLocalMovies } from "react-icons/md"
 import { FiMonitor } from "react-icons/fi"
 import { BsPersonFill } from "react-icons/bs"
 
-const SideBar = () => {
- const [closedSidebar, setClosedSideBar] = useState(false)
+const SideBar = (props) => {
+ const [closedSidebar, setClosedSideBar] = useState(!props.sidebarOpen)
  const [toggleMovie, setToggleMovie] = useState(false)
  const [toggleTvShow, setToggleTvShow] = useState(true)
 
  // handle sidebar close
+ useEffect(() => {
+ setClosedSideBar(!props.sidebarOpen)
+ }, [props])
 
  const handleClose = () => {
  setClosedSideBar(true)
+ props.handleSideBar()
  }
 
  // handle drawer open/close