Merge pull request #593 from paulkrishanu4/update_scrollToTop

fixed scroll to top on render of new page

frontend/src/App.js

@@ -13,13 +13,18 @@ import OpenSource from "./Component/OpenSource";
 import Review from "./Component/Review";
 import AOS from 'aos';
 import 'aos/dist/aos.css';
-
+import { BrowserRouter } from 'react-router-dom';
+import ScrollToTop from "./Component/ScrollToTop";
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
   AOS.init();
   return (
     <>
+      <BrowserRouter>
+      <ScrollToTop/>
       <Navbar setSearchQuery={setSearchQuery} />
+
+
       <Routes>
         <Route path="/" element={<Home searchQuery={searchQuery} />}></Route>
         <Route path="/bookmark" element={<BookMark />}></Route>
@@ -28,9 +33,11 @@ function App() {
         <Route path="/review" element={<Review />}></Route>
         <Route path="*" element={<NotFound />} /> {/* 404 route */}
       </Routes>
+
       <BackToTopButton />
       <Footer />
       <ChatAssistant/>
+      </BrowserRouter>
     </>
   );
 }

frontend/src/ChatAssistant/ChatAssistant.css

@@ -68,6 +68,12 @@
 
 .Logo {
   cursor: pointer;
+
+  height:50px;
+  width:50px;
+}
+
+
   height: 50px;
   width: 50px;
 }

frontend/src/ChatAssistant/ChatAssistant.jsx

@@ -15,6 +15,10 @@ const ChatAssistant = () => {
     setIsOpen(!isOpen);
   };
 
+
+        <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />}
+        <div className={`${isOpen?"chatbot-animation":"chatbot-close-animation"}`}>
+
   const closeChatbot = () => {
     setIsOpen(false);
   };
@@ -56,6 +60,15 @@ const ChatAssistant = () => {
             )}
           </div>
         </div>
+
+      </div>
+
+    );
+  }
+
+
+export default ChatAssistant;
+
       )}
     </div>
   );

frontend/src/Component/ScrollToTop.jsx

@@ -0,0 +1,14 @@
+
+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;

frontend/src/index.css

@@ -1,7 +1,7 @@
 :root,
 body,
 html {
-  overflow-x: hidden;
+  scrollbar-width: none; 
   height: 100%;
 }
 

frontend/src/index.js

@@ -5,8 +5,8 @@ import App from './App';
 import { Provider } from 'react-redux';
 import store from './Store/store'
 import Darkmode from 'darkmode-js';
-import { BrowserRouter } from 'react-router-dom';
 import Preloader from './Component/Preloader';
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 const options = {
@@ -29,12 +29,8 @@ darkmode.showWidget();
 
 
 root.render(
-  <React.StrictMode>
-    <BrowserRouter>
       <Provider store={store}>
-        {/* <App /> */}
+        { /*<App />*/ }
         <Preloader/>
       </Provider>
-    </BrowserRouter>
-  </React.StrictMode>
 );