fixed always loading error and scroll bar position

src/App.js

@@ -10,19 +10,20 @@ import Resume from "./components/Resume";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import "./style.css";
 import "bootstrap/dist/css/bootstrap.min.css";
-
+import ScrollToTop from "./components/ScrollToTop";
 function App() {
   const [load, upadateLoad] = useState(true);
   useEffect(() => {
     setTimeout(() => {
       upadateLoad(false);
-    }, 1000);
+    }, 1200);
   }, []);
   return (
     <Router>
       <Preloader load={load} />
       <div className="App" id={load ? "no-scroll" : "scroll"}>
         <Navbar />
+        <ScrollToTop />
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/project" component={Projects} />

src/components/Home2.js

@@ -32,7 +32,7 @@ function Home2() {
               </i>
               <br />
               <br />
-              Whenever possible, I also apply my passion for devloping products
+              Whenever possible, I also apply my passion for developing products
               with
               <i>
                 <b className="purple"> Modern Javascript Frameworks </b>

src/components/Navbar.js

@@ -6,8 +6,10 @@ import Likebtn from "./LikeBtn";
 import "../style.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import logo from "../Assets/logo.png";
+import { Link } from "react-router-dom";
 
 function NavBar() {
+  const [expand, updateExpanded] = useState(false);
   const [navColour, updateNavbar] = useState(false);
 
   function scrollHandler() {
@@ -22,7 +24,7 @@ function NavBar() {
 
   return (
     <Navbar
-      collapseOnSelect
+      expanded={expand}
       fixed="top"
       expand="md"
       className={navColour ? "sticky" : "navbar"}
@@ -31,30 +33,47 @@ function NavBar() {
         <Navbar.Brand href="/">
           <img src={logo} className="img-fluid logo" alt="brand" />
         </Navbar.Brand>
-        <Navbar.Toggle aria-controls="responsive-navbar-nav">
+        <Navbar.Toggle
+          aria-controls="responsive-navbar-nav"
+          onClick={() => {
+            updateExpanded(expand ? false : "expanded");
+          }}
+        >
           <span></span>
           <span></span>
           <span></span>
         </Navbar.Toggle>
         <Navbar.Collapse id="responsive-navbar-nav">
           <Nav className="ml-auto" defaultActiveKey="#home">
             <Nav.Item>
-              <Nav.Link href="/">
+              <Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
                 <i className="fas fa-home"></i> Home
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link href="/about">
+              <Nav.Link
+                as={Link}
+                to="/about"
+                onClick={() => updateExpanded(false)}
+              >
                 <i className="far fa-user"></i> About
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link href="/project">
+              <Nav.Link
+                as={Link}
+                to="/project"
+                onClick={() => updateExpanded(false)}
+              >
                 <i className="fab fa-codepen"></i> Projects
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link href="/resume">
+              <Nav.Link
+                as={Link}
+                to="/resume"
+                onClick={() => updateExpanded(false)}
+              >
                 <i className="far fa-file-alt"></i> Resume
               </Nav.Link>
             </Nav.Item>

src/components/ScrollToTop.js

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+  return null;
+}
+
+export default ScrollToTop;