feat: multilingual site switch (#512)

* feat: multilingual site switch

* fix menu item margin

switch to flexbox gap

2 files changed, 34 insertions, 10 deletions

diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 1d612d1..257eedb 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -125,7 +125,6 @@
 .menu {
     padding-left: 0;
     list-style: none;
-    display: flex;
     flex-direction: column;
     overflow-y: auto;
     flex-grow: 1;
@@ -138,8 +137,17 @@
 
     margin: 0 -15px;
 
+    &,
+    .menu-bottom-section {
+        gap: 15px;
+        @include respond(xl) {
+            margin-top: 30px;
+            gap: 20px;
+        }
+    }
+
     &.show {
-        display: block;
+        display: flex;
     }
 
     @include respond(md) {
@@ -161,14 +169,6 @@
         vertical-align: middle;
         padding: 10px 30px;
 
-        &:not(:last-of-type) {
-            margin-bottom: 15px;
-
-            @include respond(xl) {
-                margin-bottom: 20px;
-            }
-        }
-
         @include respond(md) {
             width: 100%;
             padding: 10px 0;
@@ -200,6 +200,13 @@
             }
         }
     }
+
+    .menu-bottom-section {
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
 }
 
 .social-menu {
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index c861f6e..4d320a8 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -158,3 +158,20 @@
         display: none;
     }
 }
+
+#i18n-switch {
+    color: var(--body-text-color);
+    display: inline-flex;
+    align-content: center;
+
+    select {
+        border: 0;
+        background-color: transparent;
+        color: var(--body-text-color);
+
+        option {
+            color: var(--card-text-color-main);
+            background-color: var(--card-background);
+        }
+    }
+}