updated footer

src/App.css

@@ -1,5 +1,4 @@
  .App {
-  display: flex;
   justify-content: center;
   align-items: flex-start;
 }

src/App.js

@@ -1,31 +1,36 @@
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import './App.css';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Sidebar from './Components/Sidebar/Sidebar';
 import HomePage from './Pages/HomePage/HomePage';
 import { FiChevronsRight, FiChevronsLeft } from "react-icons/fi";
 
+
+
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [buttonIcon, setButtonIcon] = useState(<FiChevronsRight />);
   const newRef = useRef();
 
   useEffect(() => {
-    document.addEventListener('mousedown', closeSidebar)
+    document.addEventListener('mousedown', closeSidebar);
     return () => {
-      document.removeEventListener("mousedown", closeSidebar);
-    }
-  }, [])
+      document.removeEventListener('mousedown', closeSidebar);
+    };
+  }, []);
 
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
     setButtonIcon(isSidebarOpen ? <FiChevronsRight /> : <FiChevronsLeft />);
   };
 
-  const closeSidebar = () => {
-    setIsSidebarOpen(false);
-    setButtonIcon(<FiChevronsRight />);
+  const closeSidebar = (event) => {
+    if (newRef.current && !newRef.current.contains(event.target)) {
+      setIsSidebarOpen(false);
+      setButtonIcon(<FiChevronsRight />);
+    }
   };
+
   return (
     <div className="App" ref={newRef}>
       <BrowserRouter>
@@ -34,11 +39,13 @@ function App() {
         </button>
         <Sidebar isOpen={isSidebarOpen} closeSidebar={closeSidebar} />
         <Routes>
-          <Route path='/' element={<HomePage />} />
+          <Route path="/" element={<HomePage />} />
         </Routes>
+
       </BrowserRouter>
+
     </div>
   );
 }
 
-export default App;
+export default App;

src/Components/Footer/Footer.css

@@ -0,0 +1,68 @@
+/* footer.css */
+
+footer {
+    background-color: #181828;
+    color: #fff; 
+    padding: 20px 0; 
+    width: 100%;
+    bottom: 0; 
+}
+
+.container {
+    max-width: 1200px; 
+    width: 100%; 
+    margin: 0 auto;
+    padding: 0 20px; 
+    box-sizing: border-box; 
+    display: flex;
+    flex-wrap: wrap; /* Allow elements to wrap to next line if needed */
+    justify-content: space-between; /* Distribute space between elements */
+}
+
+/* Style each section of the footer */
+.quick-links,
+.Contribute,
+.Community,
+.Developer-Resources {
+    flex: 0 0 calc(25% - 30px); /* Each section takes 25% of the container width minus padding */
+    padding: 0 15px; /* Add some padding to each section */
+    margin-bottom: 20px; /* Add some spacing between sections */
+}
+
+/* On smaller screens, make each section take 100% width */
+@media (max-width: 768px) {
+    .quick-links,
+    .Contribute,
+    .Community,
+    .Developer-Resources {
+        flex: 0 0 calc(50% - 30px); /* Each section takes 50% of the container width minus padding */
+    }
+}
+
+h3 {
+    margin-top: 0; /* Remove default margin for h3 */
+}
+
+ul {
+    list-style-type: none; /* Remove default bullet points */
+    padding: 0; /* Remove default padding */
+}
+
+ul li {
+    margin-bottom: 8px; /* Add some spacing between list items */
+}
+
+ul li a {
+    color: #fff; /* Link color */
+    text-decoration: none; /* Remove default underline */
+}
+
+ul li a:hover {
+    text-decoration: underline; /* Add underline on hover */
+}
+
+/* Align copyright text */
+.footer-content {
+    flex-basis: 100%; /* Make it take full width */
+    text-align: center; /* Center-align the text */
+}

src/Components/Footer/Footer.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import "./Footer.css"; // Corrected import path
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="container">
+        <div className="quick-links">
+          <h3>Quick Links</h3>
+          <ul>
+            <li><a href="https://sql-dev-tool.web.app/">Home</a></li>
+            <li><a href="https://github.com/topics/developer-tool">DevTools</a></li>
+          </ul>
+        </div>
+       <div className="Contribute">
+          <h3>Contribute</h3>
+          <ul>
+            <li><a href="/">Documentation</a></li>
+            <li><a href="https://github.com/PranabKumarSahoo/sql-dev-tools">Github Repository</a></li>
+          </ul>
+        </div>
+        <div className="Community">
+          <h3>Community</h3>
+          <ul>
+            <li><a href="https://www.socialwinterofcode.com/">SWOC</a></li>
+            <li><a href="/devtools">Discord</a></li>
+          </ul>
+        </div>
+        <div className="Developer Resources">
+          <h3>Developer Resources</h3>
+          <ul>
+            <li><a href="https://github.com/PranabKumarSahoo/sql-dev-tools?tab=MIT-1-ov-file#readme">Licence</a></li>
+            <li><a href="https://www.contributor-covenant.org/version/2/0/code_of_conduct/">Code of Conduct</a></li>
+          </ul>
+        </div>
+        <div className="footer-content">
+          <div className="copyright">
+            <p>&copy;2024 SQL DevTools Project-SWOC'24.</p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer; 

src/Pages/HomePage/HomePage.jsx

@@ -5,8 +5,12 @@ import CountOfRows from "../../Sections/CountOfRows/CountOfRows";
 import SelectStatement from "../../Sections/SelectStatement/SelectStatement";
 import NthHighest from "../../Sections/NthHighest/NthHighest";
 import NthMinimum from "../../Sections/NthMinimum/NthMinimum";
+
+import Footer from "../../Components/Footer/Footer";
+
 import Lightmode from "../../Components/Lightmode/Lightmode";
 
+
 export default function HomePage() {
   const [showScrollUpButton, setShowScrollUpButton] = useState(false);
 
@@ -62,7 +66,11 @@ export default function HomePage() {
         <button className='scroll-up-button' onClick={scrollToTop}>
           Scroll Up
         </button>
-      )}
+
+      )
+
+      }
+      <Footer/>
     </div>
   );
 }