flags

_i18n/en.yml

 global:
-  english: English
-  hindi: हिन्दी
-  russian: Русский
-  german: Deutsch
-  french: Français
-  chinese: 汉语
+  en: English
+  hi: हिन्दी
+  ru: Русский
+  de: Deutsch
+  fr: Français
+  zh: 汉语
 titles:
   home: API Docs
   api-def: API Definitions

_includes/sidebar.html

@@ -35,4 +35,17 @@
       </ul>
     </section>
   {% endfor %}
+  <div class="lang-switch">
+    {% for lang in site.languages %}
+    {% if lang == site.active_lang %}
+      <a href=""><img class="active" src="/images/i18n/{{lang}}.svg"/></a>
+    {% else %}
+    {% if lang == site.default_lang %}
+      <a href=" {{ page.url }}"><img class="active" src="/images/i18n/{{lang}}.svg"/></a>
+    {% else %}
+      <a href="/{{ lang }}{{ page.url }}"><img src="/images/i18n/{{lang}}.svg"/></a>
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+  </div>
 </div>

_sass/_main.scss

@@ -780,3 +780,21 @@ pre.highlight > button:focus {
 img {
 	max-width: 100%;
 }
+
+.lang-switch {
+	padding-top: 20px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.lang-switch a {
+	padding: 0 4px;
+}
+.lang-switch img {
+	max-width: 40px;
+	height: auto;
+	cursor: pointer;
+}
+img.active {
+	opacity: 0.5;
+}

images/i18n/de.svg

+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-de" viewBox="0 0 512 512">
+  <path fill="#fc0" d="M0 341.3h512V512H0z"/>
+  <path fill="#000001" d="M0 0h512v170.7H0z"/>
+  <path fill="red" d="M0 170.7h512v170.6H0z"/>
+</svg>

images/i18n/en.svg

+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 512 512">
+  <path fill="#bd3d44" d="M0 0h512v512H0"/>
+  <path stroke="#fff" stroke-width="40" d="M0 58h512M0 137h512M0 216h512M0 295h512M0 374h512M0 453h512"/>
+  <path fill="#192f5d" d="M0 0h390v275H0z"/>
+  <marker id="us-a" markerHeight="30" markerWidth="30">
+    <path fill="#fff" d="m15 0 9.3 28.6L0 11h30L5.7 28.6"/>
+  </marker>
+  <path fill="none" marker-mid="url(#us-a)" d="m0 0 18 11h65 65 65 65 66L51 39h65 65 65 65L18 66h65 65 65 65 66L51 94h65 65 65 65L18 121h65 65 65 65 66L51 149h65 65 65 65L18 177h65 65 65 65 66L51 205h65 65 65 65L18 232h65 65 65 65 66z"/>
+</svg>

images/i18n/fr.svg

+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-fr" viewBox="0 0 512 512">
+  <path fill="#fff" d="M0 0h512v512H0z"/>
+  <path fill="#000091" d="M0 0h170.7v512H0z"/>
+  <path fill="#e1000f" d="M341.3 0H512v512H341.3z"/>
+</svg>

images/i18n/hi.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-in" viewBox="0 0 512 512">
+  <path fill="#f93" d="M0 0h512v170.7H0z"/>
+  <path fill="#fff" d="M0 170.7h512v170.6H0z"/>
+  <path fill="#128807" d="M0 341.3h512V512H0z"/>
+  <g transform="translate(256 256)scale(3.41333)">
+    <circle r="20" fill="#008"/>
+    <circle r="17.5" fill="#fff"/>
+    <circle r="3.5" fill="#008"/>
+    <g id="in-d">
+      <g id="in-c">
+        <g id="in-b">
+          <g id="in-a" fill="#008">
+            <circle r=".9" transform="rotate(7.5 -8.8 133.5)"/>
+            <path d="M0 17.5.6 7 0 2l-.6 5z"/>
+          </g>
+          <use xlink:href="#in-a" width="100%" height="100%" transform="rotate(15)"/>
+        </g>
+        <use xlink:href="#in-b" width="100%" height="100%" transform="rotate(30)"/>
+      </g>
+      <use xlink:href="#in-c" width="100%" height="100%" transform="rotate(60)"/>
+    </g>
+    <use xlink:href="#in-d" width="100%" height="100%" transform="rotate(120)"/>
+    <use xlink:href="#in-d" width="100%" height="100%" transform="rotate(-120)"/>
+  </g>
+</svg>

images/i18n/ru.svg

+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ru" viewBox="0 0 512 512">
+  <path fill="#fff" d="M0 0h512v170.7H0z"/>
+  <path fill="#0039a6" d="M0 170.7h512v170.6H0z"/>
+  <path fill="#d52b1e" d="M0 341.3h512V512H0z"/>
+</svg>

images/i18n/zh.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-cn" viewBox="0 0 512 512">
+  <defs>
+    <path id="cn-a" fill="#ff0" d="M1-.3-.7.8 0-1 .6.8-1-.3z"/>
+  </defs>
+  <path fill="#ee1c25" d="M0 0h512v512H0z"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="translate(128 128)scale(76.8)"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="rotate(-121 142.6 -47)scale(25.5827)"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="rotate(-98.1 198 -82)scale(25.6)"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="rotate(-74 272.4 -114)scale(25.6137)"/>
+  <use xlink:href="#cn-a" width="30" height="20" transform="matrix(16 -19.968 19.968 16 256 230.4)"/>
+</svg>