Refactor MainModal and Tab components to integrate Library and Discover tabs

src/components/Elements/MainModal/scss/modules/_sidebar.scss

@@ -13,14 +13,6 @@
     height: 80vh;
     min-width: 250px;
 
-    .mainTitle {
-      text-align: center;
-      font-size: 35px;
-      display: flex;
-      justify-content: center;
-      padding: 25px;
-    }
-
     svg {
       margin-left: 20px;
       margin-right: 20px;

src/components/Elements/MainModal/scss/modules/_topBar.scss

@@ -0,0 +1,53 @@
+@use 'scss/variables' as *;
+
+.modalTopBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 1.5rem;
+  // width: 100%;
+
+  .topBarLeft {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .topBarLogo {
+      height: 32px;
+      width: auto;
+    }
+  }
+
+  .topBarRight {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-shrink: 0;
+
+    .topBarNavigation {
+      display: flex;
+      flex-flow: row;
+      gap: 0.5rem;
+    }
+
+    .closeModal {
+      display: grid;
+      place-items: center;
+      padding: 0.4em;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: 0.5s;
+      flex-shrink: 0;
+
+      svg {
+        font-size: 1.5em;
+      }
+
+      &:hover {
+        @include themed {
+          background: t($modal-sidebarActive);
+        }
+      }
+    }
+  }
+}