refactor: Use flexbox gap (#520)

assets/scss/partials/menu.scss

@@ -101,11 +101,16 @@
     background: none;
     border: none;
     position: absolute;
-    right: 30px;
-    top: 30px;
+    right: 0;
+    top: 0;
     z-index: 2;
     cursor: pointer;
 
+    [dir="rtl"] & {
+        left: 0;
+        right: auto;
+    }
+
     @include respond(md) {
         display: none;
     }
@@ -135,13 +140,12 @@
     box-shadow: var(--shadow-l1);
     display: none;
 
-    margin: 0 -15px;
+    margin: 0 calc(var(--container-padding) * -1);
 
     &,
     .menu-bottom-section {
         gap: 15px;
         @include respond(xl) {
-            margin-top: 30px;
             gap: 20px;
         }
     }
@@ -157,11 +161,6 @@
         padding: 0;
         box-shadow: none;
         margin: 0;
-        margin-top: var(--sidebar-element-separation);
-    }
-
-    @include respond(xl) {
-        margin-top: 30px;
     }
 
     li {
@@ -176,7 +175,6 @@
 
         svg {
             stroke-width: 1.33;
-            margin-right: 40px;
 
             width: 20px;
             height: 20px;
@@ -187,6 +185,7 @@
             display: inline-flex;
             align-items: center;
             color: var(--body-text-color);
+            gap: var(--menu-icon-separation);
         }
 
         span {
@@ -211,7 +210,8 @@
 
 .social-menu {
     list-style: none;
-    padding: 0%;
+    padding: 0;
+    margin: 0;
     display: flex;
     flex-direction: row;
     gap: 10px;