add header and lang switcher

resources/client/assets/sass/app.scss

@@ -22,6 +22,14 @@
 
 
 ///////////////////// mixins
+@mixin defaultTransition() {
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -o-transition: 0.3s;
+}
+
 @mixin transition($p) {
   transition: $p;
   -webkit-transition: $p;
@@ -68,6 +76,7 @@ $darkGray: #303030;
 
 body {
   direction: rtl;
+  background: $bg;
 
   &:lang(en) {
     direction: ltr;
@@ -83,6 +92,15 @@ h1, h2, h3, h4, h5, h6 {
   font-family: 'sahel-bold';
 }
 
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.7);
+  }
+}
+
 /////// global classes
 .logo {
   display: inline-block;
@@ -93,33 +111,122 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.lang--bar {
-  background: $darkGray;
-  height: 25px;
+.header {
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
 
-  p {
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 13px;
-    line-height: 25px;
-    float: left;
+  .links {
+    li {
+      text-align: right;
+      padding: 30px 0;
+
+      &:lang(en) {
+        text-align: left;
+      }
+
+      &:first-child {
+        text-align: right;
+
+        &:lang(en) {
+          text-align: left;
+        }
+      }
+
+      a:not(.logo) {
+        position: relative;
+        padding: 5px 0;
+
+        &::after {
+          content: '';
+          display: block;
+          width: 20px;
+          height: 1px;
+          background: $darkGray;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          @include defaultTransition;
+        }
+
+        &:lang(en) {
+          &::after {
+            right: auto;
+            left: 0;
+          }
+        }
+
+        &:hover {
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+
+    }
   }
 
-  select {
-    @extend %appearance;
-    @extend %userSelect;
-    background: $darkGray;
-    color: #fff;
-    font-family: sans-serif;
-    border: none;
+  .lag-switcher {
+    .dropdown {
+      position: relative;
 
-    option{
-      padding: 5px;
-      background: #fff;
-      color: #000;
+      .title {
+        @include defaultTransition();
+        padding: 5px;
+
+        p {
+          @extend %userSelect;
+          @include defaultTransition();
+          text-align: center;
+          font-size: 23px;
+        }
+      }
+
+      .dropMenu {
+        width: 100%;
+        height: 0;
+        overflow: hidden;
+        background: $darkGray;
+        @include defaultTransition();
+        position: absolute;
+        top: 27px;
+        left: 0;
+
+        .drop-item {
+          padding-top: 10px;
+
+          p {
+            padding: 5px;
+            color: #fff;
+            font-size: 13px;
+            text-align: center;
+            cursor: pointer;
+            @extend %userSelect;
+            @include defaultTransition();
+          }
+        }
+      }
+    }
+
+    .dropdown-active {
+      .title {
+        background: $darkGray;
+
+        p {
+            color: #fff;
+
+        }
+      }
+
+      .dropMenu {
+        height: 75px;
+
+        p:hover {
+          background: rgba(255, 255, 255, 0.05);
+        }
+      }
     }
   }
 }
-
-.header {
-
-}