feat(language-selector): Implement optional language selector (#298)

4 files changed, 39 insertions, 2 deletions

diff --git a/assets/sass/_partial/_header.scss b/assets/sass/_partial/_header.scss
index d81f17c..9c4de56 100644
--- a/assets/sass/_partial/_header.scss
+++ b/assets/sass/_partial/_header.scss
@@ -3,17 +3,24 @@
 // ==============================
 
 .header {
-  @include clearfix; 
+  @include clearfix;
   padding: $header-padding;
 
   @import '_header/logo';
   @import '_header/menu';
-}
 
+  .language-selector {
+    float: right;
+  }
+}
 
 @include max-screen() {
   .header {
     padding: 50px 0 0;
     text-align: center;
+
+    .language-selector {
+      display: none;
+    }
   }
 }
diff --git a/assets/sass/_partial/_language-selector.scss b/assets/sass/_partial/_language-selector.scss
new file mode 100644
index 0000000..7640e61
--- /dev/null
+++ b/assets/sass/_partial/_language-selector.scss
@@ -0,0 +1,25 @@
+.language-selector {
+  width: max-content;
+
+  .languages-list {
+    padding: 0;
+    background: darken($deputy-color, 3%);
+
+    .language-item {
+      display: inline-block;
+      list-style-type: none;
+      text-transform: uppercase;
+      font-family: $global-serif-font-family;
+      font-size: 18px;
+      padding: 0 10px;
+
+      &.active {
+        background: $theme-color;
+
+        > a {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
diff --git a/assets/sass/_partial/_slideout.scss b/assets/sass/_partial/_slideout.scss
index 2dc757d..58891fd 100644
--- a/assets/sass/_partial/_slideout.scss
+++ b/assets/sass/_partial/_slideout.scss
@@ -13,6 +13,10 @@
   -webkit-overflow-scrolling: touch;
   z-index: 0;
   display: none;
+
+  .language-selector {
+    padding-left: 30px;
+  }
 }
 
 .slideout-panel {
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 5bdac04..2b843f7 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -16,3 +16,4 @@
 @import "_partial/mobile";
 @import "_partial/back-to-top";
 @import "_partial/404";
+@import "_partial/language-selector";