2 files changed, 120 insertions, 0 deletions
diff --git a/docs/generator/custom/themes/material/partials/footer.html b/docs/generator/custom/themes/material/partials/footer.html
index fe232b6d5..0631a3042 100644
--- a/docs/generator/custom/themes/material/partials/footer.html
+++ b/docs/generator/custom/themes/material/partials/footer.html
@@ -52,3 +52,16 @@
   </div>
 </footer>
 <script>!function(e,a,t,n,o,c,i){e.GoogleAnalyticsObject=o,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(t),i=a.getElementsByTagName(t)[0],c.async=1,c.src="https://www.google-analytics.com/analytics.js",i.parentNode.insertBefore(c,i)}(window,document,"script",0,"ga"),ga("create","UA-64295674-3",""),ga("set","anonymizeIp",!0),ga("send","pageview","/doc"+window.location.pathname);var links=document.getElementsByTagName("a");if(Array.prototype.map.call(links,function(a){a.host!=document.location.host&&a.addEventListener("click",function(){var e=a.getAttribute("data-md-action")||"follow";ga("send","event","outbound",e,a.href)})}),document.forms.search){var query=document.forms.search.query;query.addEventListener("blur",function(){if(this.value){var e=document.location.pathname;ga("send","pageview",e+"?q="+this.value)}})}</script>
+<script>
+  let currentLang = getLanguage();
+
+  let sel = document.getElementById('sel');
+  let opts = sel.options;
+  for (let opt, j = 0; opt = opts[j]; j++) {
+    if (opt.value == currentLang) {
+      sel.selectedIndex = j;
+      break;
+    }
+  }
+
+</script>
diff --git a/docs/generator/custom/themes/material/partials/header.html b/docs/generator/custom/themes/material/partials/header.html
new file mode 100644
index 000000000..54086ecf5
--- /dev/null
+++ b/docs/generator/custom/themes/material/partials/header.html
@@ -0,0 +1,107 @@
+<header class="md-header" data-md-component="header">
+  <nav class="md-header-nav md-grid">
+    <div class="md-flex">
+      <div class="md-flex__cell md-flex__cell--shrink">
+        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-header-nav__button md-logo">
+          {% if config.theme.logo.icon %}
+            <i class="md-icon">{{ config.theme.logo.icon }}</i>
+          {% else %}
+            <img src="{{ config.theme.logo | url }}" width="24" height="24">
+          {% endif %}
+        </a>
+      </div>
+      <div class="md-flex__cell md-flex__cell--shrink">
+        <label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
+      </div>
+      <div class="md-flex__cell md-flex__cell--stretch">
+        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
+          {% block site_name %}
+            {% if config.site_name == page.title %}
+              {{ config.site_name }}
+            {% else %}
+              <span class="md-header-nav__topic">
+                {{ config.site_name }}
+              </span>
+              <span class="md-header-nav__topic">
+                {{ page.title }}
+              </span>
+            {% endif %}
+          {% endblock %}
+        </div>
+      </div>
+      <div class="md-flex__cell md-flex__cell--shrink">
+        {% block search_box %}
+          {% if "search" in config["plugins"] %}
+            <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
+            {% include "partials/search.html" %}
+          {% endif %}
+        {% endblock %}
+      </div>
+
+      <!-- netdata -->
+      <style>
+        .language-selector li {
+          list-style: none;
+        }
+
+        .language-option.selected {
+          background-color: #ccc;
+        }
+      </style>
+      <script>
+        function getLanguage() {
+          const lang = window.location.pathname.split("/")[1];
+
+          if (lang.length == 0 || lang.length > 2) {
+            return "en";
+          }
+
+          return lang;
+        }
+
+        function languagePrefix(lang) {
+          if (lang === "en") {
+            return "";
+          }
+
+          return `/${lang}`;
+        }
+
+        function updatePathname(pathname, lang) {
+          if (currentLang !== "en") {
+            const parts = pathname.split("/");
+            parts.shift();
+            parts.shift();
+            pathname = `/${parts.join("/")}`;
+          }
+
+          return `${languagePrefix(lang)}${pathname}`;
+        }
+
+        function setLanguage(sel) {
+          if (sel.value === currentLang) {
+            return;
+          }
+
+          window.location.pathname = updatePathname(window.location.pathname, sel.value);
+        }
+      </script>
+
+      <div style="vertical-align: middle; white-space: nowrap; padding-left: 20px;" class="md-flex__cell md-flex__cell--shrink">
+        <img src="/custom/img/geography-16.png" style="vertical-align: middle;"/>
+        <select id="sel" onchange="setLanguage(this);" style="vertical-align: middle; background-color: #3f51b5; color: white; border: none;">
+          <option href="#" value='en'>English</option>
+          <option href="#" value='zh'>中文</option>
+        </select>
+      </div>
+
+      {% if config.repo_url %}
+        <div class="md-flex__cell md-flex__cell--shrink">
+          <div class="md-header-nav__source">
+            {% include "partials/source.html" %}
+          </div>
+        </div>
+      {% endif %}
+    </div>
+  </nav>
+</header>