Language changer with flag button. Grammar fixes.

_data/i18n/pages.yml

@@ -94,10 +94,10 @@ nav:
       name  : "Helpdesk"
       url   :  "/en/helpdesk/"
     ourwork:
-      name  : "For businesses"
+      name  : "Our works"
       url   :  "/en/ourwork/"
     aboutus:
-      name  : "About us"
+      name  : "About"
       url   :  "/en/aboutus/"
     contact:
       name  : "Contact"

_includes/header.html

@@ -13,13 +13,12 @@
     </a>
 
     <ul id="main-menu">
-      {% if page.language == "ee" %}
-      <a href="{{ pages.en[page.tag].url }}">In English</a>
-      {% elsif page.language == "en" %}
-      <a href="{{pages.ee[page.tag].url}}">Eesti keeles</a>
-      {% endif %}
-
       {% include main_nav.html %}
+      {% if page.language == "ee" %}
+      <li><a class="flag" id="flag-en" href="{{ pages.en[page.tag].url }}"></a></li>
+      {% elsif page.language == "en" %}
+      <li><a class="flag" id="flag-ee" href="{{pages.ee[page.tag].url}}"></a></li>
+      {% endif %}
     </ul>
   </div>
 

_includes/main_nav.html

@@ -1,8 +1,4 @@
 
-<!--
-    This iterates through navbar pages in current language
-    and gets url and name for navbar.
--->
 {% for menu in site.data.i18n.pages.nav[page.language] %}
     <li><a href="{{ menu[1].url}}">{{menu[1].name }}</a> </li>
 {% endfor %}

_sass/header.scss

@@ -65,6 +65,19 @@
                 fill: $color-primary;
             }
         }
+        .flag {
+            display         : inline-block;
+            width           : 32px;
+            height          : 32px;
+            margin-left     : 1rem;
+            vertical-align  : middle;
+        }
+        #flag-en {
+            background-image: url("/assets/en.svg");
+        }
+        #flag-ee {
+            background-image: url("/assets/est.svg");
+        }
     }
 
     @media (min-width: 40.1rem) {