smooth scroll added

Author: mazeduldev

src/components/Navbar/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { FaBars } from 'react-icons/fa';
 import { IconContext } from 'react-icons/lib';
+import { animateScroll as scroll } from 'react-scroll';
 import { MenuIcon, Nav, NavbarContainer, NavItem, NavLink, NavLogo, NavMenu, NavBtn, NavBtnLink } from './NavbarElements';
 
 const Navbar = ({ toggle }) => {
@@ -18,29 +19,33 @@ const Navbar = ({ toggle }) => {
     window.addEventListener('scroll', changeNav);
   }, []);
 
+  const toggleHome = () => {
+    scroll.scrollToTop();
+  };
+
   return (
     <>
       <IconContext.Provider value={{ color: '#fff' }}>
         <Nav scrollNav={scrollNav}>
           <NavbarContainer>
-            <NavLogo to='/'>
+            <NavLogo to='/' onClick={toggleHome}>
               logo
           </NavLogo>
             <MenuIcon onClick={toggle}>
               <FaBars />
             </MenuIcon>
             <NavMenu>
               <NavItem>
-                <NavLink to='about'>About</NavLink>
+                <NavLink to='about' smooth={true} duration={500} spy={true} exact='true' offset={-80} >About</NavLink>
               </NavItem>
               <NavItem>
-                <NavLink to='discover'>Discover</NavLink>
+                <NavLink to='discover' smooth={true} duration={500} spy={true} exact='true' offset={-80}>Discover</NavLink>
               </NavItem>
               <NavItem>
-                <NavLink to='services'>Services</NavLink>
+                <NavLink to='services' smooth={true} duration={500} spy={true} exact='true' offset={-80}>Services</NavLink>
               </NavItem>
               <NavItem>
-                <NavLink to='signup'>Sign Up</NavLink>
+                <NavLink to='signup' smooth={true} duration={500} spy={true} exact='true' offset={-80}>Sign Up</NavLink>
               </NavItem>
             </NavMenu>
             <NavBtn>