initialize searchBar component

src/pages/Events/EventsPage.module.css

@@ -1,5 +1,6 @@
 .eventsContainer {
     width: 100%;
+    position: relative;
 }
 
 
@@ -34,7 +35,7 @@
 }
 
 
-.createButton, .sortButton {
+.createButton, .searchButton, .sortButton {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,25 +51,28 @@
     color: #019AFF;
 }
 
-.sortButton svg {
+.sortButton svg, .searchButton svg {
     transform: scale(0.8);
     fill: #019AFF;
 }
 
-.sortButton:hover {
+.createButton:hover, .searchButton:hover, .mobileFilter:hover {
+    transform: translateY(-5px);
     cursor: pointer;
 }
 
-.createButton:hover, .mobileFilter:hover {
-    transform: translateY(-5px);
-}
 
-
-.sortButton:focus {
+.sortButton:focus, .searchButton:focus {
     outline: none;
 }
-.sortButton:focus-visible {
-    outline: 2px solid black;
+
+
+
+.searchBar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
 }
 
 
@@ -92,7 +96,7 @@
         width: fit-content;
     }
 
-    .createButton:hover, .mobileFilter:hover {
+    .createButton:hover, .searchButton:hover, .mobileFilter:hover {
         transform: none !important;
     }
 }