refactor: Move main modal to components

Co-authored-by: David Ralph <me@davidcralph.co.uk>

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

@@ -0,0 +1,79 @@
+@import 'scss/variables';
+
+.modalSidebar {
+  @include themed {
+    top: 0;
+    left: 0;
+    position: sticky;
+    margin: 0;
+    padding: 0 5px;
+    background: t($modal-sidebar);
+    border-radius: 12px 0 0 12px;
+    overflow: hidden auto;
+    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;
+      color: t($subColor);
+      font-size: 17px;
+    }
+
+    hr {
+      height: 1px;
+      background: #ccc;
+      margin: 0 1.75rem;
+      border: none;
+    }
+
+    button {
+      color: t($color);
+      font-size: 18px;
+      list-style: none;
+      cursor: pointer;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      margin: 0.2rem;
+      padding: 0.5rem;
+      transition: 0.5s;
+      outline: none;
+      border: none;
+      background: none;
+      min-width: calc(100% - 1.2em);
+      text-align: left;
+
+      &:hover {
+        background: t($modal-sidebarActive);
+      }
+
+      &:active {
+        background: t($modal-sidebarActive);
+        box-shadow: 0 0 0 0.5px t($color);
+      }
+
+      &:focus {
+        background: t($modal-sidebarActive);
+        box-shadow: 0 0 0 0.5px t($color);
+      }
+    }
+
+    .tab-list-active {
+      background: t($modal-sidebarActive);
+    }
+  }
+}
+
+.css-j204z7-MuiFormControlLabel-root {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}