Add ability to choose the language

1 files changed, 46 insertions, 1 deletions

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c36a7aa36..e61f4acd3 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -1,6 +1,13 @@
 @import '_variables';
 @import '_mixins';
 
+.menu-wrapper {
+  position: fixed;
+  height: calc(100vh - #{$header-height});
+  padding: 0;
+  width: $menu-width;
+}
+
 menu {
   background-color: $black-background;
   margin: 0;
@@ -11,6 +18,13 @@ menu {
   overflow: hidden;
   z-index: 1000;
   color: $menu-color;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+
+  .top-menu {
+    flex-grow: 1;
+  }
 
   .logged-in-block {
     height: 100px;
@@ -100,7 +114,7 @@ menu {
     a {
       display: flex;
       align-items: center;
-      padding-left: 26px;
+      padding-left: $menu-left-padding;
       color: $menu-color;
       cursor: pointer;
       height: 40px;
@@ -155,4 +169,35 @@ menu {
       }
     }
   }
+
+  .footer {
+    margin-bottom: 15px;
+    padding-left: $menu-left-padding;
+
+    .language {
+      display: inline-block;
+      color: $menu-bottom-color;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: $font-semibold;
+
+      .icon {
+        @include icon(28px);
+        opacity: 0.9;
+
+        &.icon-language  {
+          position: relative;
+          top: -1px;
+          width: 28px;
+          height: 24px;
+
+          background-image: url('../../assets/images/menu/language.png');
+        }
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
 }