Fixed the footer not at bottom

Author: tarunkumar2005

src/App.jsx

@@ -26,24 +26,27 @@ function App() {
   const { data, isLoading, error } = useRepoData();
 
   if (isLoading)
-    return <div className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
-      <h1>Loading...</h1>
-    </div>;
+    return (
+      <div className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+        <h1>Loading...</h1>
+      </div>
+    );
 
   if (error)
-    return <div className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
-      <h1>Error: {error.message}</h1>
-    </div>;
+    return (
+      <div className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+        <h1>Error: {error.message}</h1>
+      </div>
+    );
 
   return (
-    <div className='d-flex flex-column'>
+    <div className="d-flex flex-column min-vh-100">
       <Router>
         <SideBar>
-
-          <LoadingBar height={3} color='#f11946' progress={progress} />
+          <LoadingBar height={3} color="#f11946" progress={progress} />
           <CursorComponent />
 
-          <div className='flex-grow-1'>
+          <div className="d-flex flex-column justify-content-between min-vh-100">
             <Routes>
               {data.map((obj) => (
                 <React.Fragment key={obj.name}>
@@ -53,16 +56,15 @@ function App() {
                 </React.Fragment>
               ))}
             </Routes>
+            <Footer />
           </div>
 
-          <Footer />
           <BackToTop />
 
-          <button className="btn border-0" onClick={() => setShowChatbot(!showChatbot)} style={{ zIndex: 1001, position: 'fixed', bottom: '10px', right: '3px' }} >
-            <TbMessageChatbot className='text-light' style={{ fontSize: '3rem' }} />
+          <button className="btn border-0" onClick={() => setShowChatbot(!showChatbot)} style={{ zIndex: 1001, position: 'fixed', bottom: '10px', right: '3px' }}>
+            <TbMessageChatbot className="text-light" style={{ fontSize: '3rem' }} />
           </button>
           {showChatbot && <Chatbot />}
-
         </SideBar>
       </Router>
     </div>

src/components/shared/Footer.jsx

@@ -6,7 +6,7 @@ const Footer = () => {
   const year = new Date().getFullYear();
 
   return (
-    <footer className='mt-2 py-4 border-top border-info border-2 d-flex flex-column flex-md-row align-items-center justify-content-md-evenly text-center text-md-start' style={{backgroundColor: '#12151e', position: 'sticky', bottom: 0, width: '100%', zIndex: 1000}}>
+    <footer className="mt-2 py-4 border-top border-info border-2 d-flex flex-column flex-md-row align-items-center justify-content-md-evenly text-center text-md-start" style={{ backgroundColor: '#12151e', width: '100%', zIndex: 1000 }}>
       <div className="w-50 text-light mb-3 mb-md-0">
         <h5 className="h5 mb-3">WEB MASTER LOG 🚀</h5>
         <p className="small">
@@ -18,19 +18,19 @@ const Footer = () => {
         <h2 className="h5 mb-3">Connect with me</h2>
         <div className="d-flex justify-content-around mb-2">
           <motion.a whileHover={{ scale: 1.2 }} className="text-white me-2" href="https://discord.gg/tSqtvHUJzE">
-            <FaDiscord style={{width: '25px', height: '25px'}} />
+            <FaDiscord style={{ width: '25px', height: '25px' }} />
           </motion.a>
           <motion.a whileHover={{ scale: 1.2 }} className="text-white me-2" href="https://www.linkedin.com/in/avdhesh-varshney/">
-            <FaLinkedin style={{width: '25px', height: '25px'}} />
+            <FaLinkedin style={{ width: '25px', height: '25px' }} />
           </motion.a>
           <motion.a whileHover={{ scale: 1.2 }} className="text-white me-2" href="https://x.com/__Avdhesh__">
-            <FaXTwitter style={{width: '25px', height: '25px'}} />
+            <FaXTwitter style={{ width: '25px', height: '25px' }} />
           </motion.a>
           <motion.a whileHover={{ scale: 1.2 }} className="text-white me-2" href="https://www.youtube.com/@Code_A2Z">
-            <FaYoutube style={{width: '25px', height: '25px'}} />
+            <FaYoutube style={{ width: '25px', height: '25px' }} />
           </motion.a>
           <motion.a whileHover={{ scale: 1.2 }} className="text-white" href="https://github.com/Avdhesh-Varshney">
-            <FaGithub style={{width: '25px', height: '25px'}} />
+            <FaGithub style={{ width: '25px', height: '25px' }} />
           </motion.a>
         </div>