implement transition sidebar + smooth scroll + mini improvements

src/App.js

@@ -15,6 +15,16 @@ export default function App() {
   const { width } = useWindowSize();
   //   console.log(width);
 
+  const scrollToElement = (e, id) => {
+    e.preventDefault();
+
+    window.scroll({
+      top: document.getElementById(id).getBoundingClientRect().top,
+      left: 0,
+      behavior: 'smooth',
+    });
+  };
+
   return (
     <div className="w-full overflow-x-hidden">
       {width > 1000 ? (
@@ -23,6 +33,7 @@ export default function App() {
           setCurrentLanguage={setCurrentLanguage}
           showCookies={showCookies}
           setShowCookies={setShowCookies}
+          scrollToElement={scrollToElement}
         />
       ) : (
         <HeaderM
@@ -30,6 +41,7 @@ export default function App() {
           setCurrentLanguage={setCurrentLanguage}
           showCookies={showCookies}
           setShowCookies={setShowCookies}
+          scrollToElement={scrollToElement}
         />
       )}
 

src/components/Footer.js

@@ -17,13 +17,13 @@ export default function Footer() {
       <div className="w-full sm:px-20 px-4 flex sm:justify-end justify-center">
         <button
           onClick={() => handleScroll()}
-          className="font-avenirbook text-sm underline mb-4 text-gray-900 hover:no-underline focus:no-underline"
+          className="font-avenirbook text-sm mb-4 text-gray-900 hover:text-red-400 focus:text-red-400"
         >
-          Return to top
+          &#x2191; Return to top
         </button>
       </div>
 
-      <div className="w-full sm:px-20 px-4 flex sm:flex-row flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
+      <div className="w-full sm:px-20 px-4 flex sm:flex-row-reverse flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
         <div className="flex items-center h-full sm:w-auto w-full sm:justify-end justify-center sm:my-0 my-4">
           <a
             href="/"

src/components/HeaderD.js

@@ -8,6 +8,7 @@ export default function HeaderD({
   setCurrentLanguage,
   showCookies,
   setShowCookies,
+  scrollToElement,
 }) {
   const headerLinkClasses =
     'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg mx-4';
@@ -93,7 +94,8 @@ export default function HeaderD({
       <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
         <a
           href="#part-one"
-          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
+          onClick={(e) => scrollToElement(e, 'part-one')}
+          className="animate-bounce w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
         >
           {' '}
         </a>

src/components/HeaderM.js

@@ -3,11 +3,14 @@ import React, { useState } from 'react';
 import proximity_logo from '../assets/images/proximity_logo.svg';
 import backgroundVideo from '../assets/videos/video.mp4';
 
+import '../styles/sidebar.css';
+
 export default function HeaderD({
   currentLanguage,
   setCurrentLanguage,
   showCookies,
   setShowCookies,
+  scrollToElement,
 }) {
   const [showSidebar, setShowSidebar] = useState(false);
 
@@ -15,7 +18,11 @@ export default function HeaderD({
     'text-gray-900 font-avenirbook font-normal hover:underline focus:underline text-xl w-full my-1 py-2 text-center';
 
   const sidebar = (
-    <div className="z-20 w-full h-full flex flex-col justify-center bg-gray-100 bg-opacity-95 fixed">
+    <div
+      className={`z-20 w-full h-full flex flex-col justify-center bg-gray-100 bg-opacity-95 fixed ${
+        showSidebar ? 'sidebar-left-nav closed' : 'sidebar-left-nav'
+      }`}
+    >
       <a className={headerLinkClasses} href="/about">
         About
       </a>
@@ -126,14 +133,15 @@ export default function HeaderD({
       <div className="absolute z-10 w-full h-108 flex flex-col items-center justify-end">
         <a
           href="#part-one"
-          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
+          onClick={(e) => scrollToElement(e, 'part-one')}
+          className="animate-bounce w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
         >
           {' '}
         </a>
       </div>
 
       {showCookies && cookies}
-      {showSidebar && sidebar}
+      {sidebar}
 
       <video
         className="h-80 w-full bg-gray-900 z-0 object-cover absolute"

src/components/PartTwo.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import pencil from '../assets/images/pencil.png';
+import pencil from '../assets/images/pencil.gif';
 
 export default function PartTwo() {
   return (
@@ -8,11 +8,7 @@ export default function PartTwo() {
       className="w-full sm:h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4 my-8"
       id="part-two"
     >
-      <img
+      <img src={pencil} alt="pencil" className="object-cover sm:h-32 h-20" />
-        src={pencil}
-        alt="pencil"
-        className="object-cover sm:h-6 h-4 sm:mb-8 mb-4"
-      />
 
       <div className="text-red-600 uppercase text-sm font-bold font-avenirblack sm:mb-8 mb-4 tracking-wide sm:w-auto w-1/2 sm:text-left text-center">
         Business Problems we've solved

src/styles/sidebar.css

@@ -0,0 +1,13 @@
+.sidebar-left-nav {
+  -webkit-transform: translate3d(-100%, 0px, 0px);
+  transform: translate3d(-100%, 0px, 0px);
+  visibility: visible;
+  transition: all 0.5s ease 0s;
+  -webkit-transition: all 0.5s ease 0s;
+}
+
+.closed {
+  -webkit-transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
+  visibility: visible;
+}