code updated

src/App.css

@@ -1,4 +1,20 @@
- .App {
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #141421;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 100px;
+  border: 5px solid transparent;
+  background-clip: padding-box;
+  background-color: tomato;
+}
+
+
+.App {
   justify-content: center;
   align-items: flex-start;
 }
@@ -38,29 +54,4 @@
   .toggle-button {
     top: 15px;
   }
-}
-
-
-
-body {
-  --sb-track-color: #232E33;
-  --sb-thumb-color: linear-gradient(to right, #260843, #553d7a);
-  --sb-size: 8px;
-
-  scrollbar-color: var(--sb-thumb-color) 
-                   var(--sb-track-color);
-}
-
-body::-webkit-scrollbar {
-  width: var(--sb-size) 
-}
-
-body::-webkit-scrollbar-track {
-  background: var(--sb-track-color); 
-}
-
-body::-webkit-scrollbar-thumb {
-  background: var(--sb-thumb-color);
-  border-radius: 10px;
-  border: 1px solid #25035c;
-  }
+}

src/App.js

@@ -5,8 +5,6 @@ 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 />);
@@ -25,12 +23,14 @@ function App() {
   };
 
   const closeSidebar = (event) => {
-    if (newRef.current && !newRef.current.contains(event.target)) {
+    console.log('Close sidebar called');
+    if (newRef.current && event && !newRef.current.contains(event.target)) {
       setIsSidebarOpen(false);
       setButtonIcon(<FiChevronsRight />);
     }
   };
 
+
   return (
     <div className="App" ref={newRef}>
       <BrowserRouter>
@@ -41,11 +41,9 @@ function App() {
         <Routes>
           <Route path="/" element={<HomePage />} />
         </Routes>
-
       </BrowserRouter>
-
     </div>
   );
 }
 
-export default App;
+export default App;

src/Components/CustomComp/Button/Button.css

@@ -1,5 +1,5 @@
 .submit-btn {
-    padding: 10px 20px;
+    padding: 12px 25px;
     border-radius: 10px;
     background-color: #181828;
     color: white;
@@ -8,16 +8,17 @@
     border-style: solid;
     border-color: rgba(255, 255, 255, 0.2);
     cursor: pointer;
-    font-size: 18px;
+    font-size: 15px;
     font-weight: bold;
+    transition: all 0.3s ease;
 }
 
-.submit-btn:hover{
+.submit-btn:hover {
     background-color: grey;
-    border:2px solid rgb(255, 255, 255);
+    /* border: 1px solid rgb(255, 255, 255); */
 }
-.submit-btn:active{
 
+.submit-btn:active {
     background-color: rgb(247, 247, 247);
-    color:black;
-}
+    color: black;
+}

src/Components/Sidebar/Sidebar.css

@@ -38,7 +38,7 @@ nav ul {
     display: block;
     width: 100%;
     padding: 15px;
-    font-size: 18px;
+    font-weight: bold;
     transition: background-color 0.3s ease;
     background-color: rgba(0, 0, 0, 0.2);
     border-radius: 5px;

src/Components/Sidebar/Sidebar.jsx

@@ -4,6 +4,7 @@ import './Sidebar.css'
 
 export default function Sidebar({ isOpen, closeSidebar }) {
     const handleLinkClick = () => {
+        console.log("Link Clicked");
         closeSidebar();
     };
     return (