Add global language menu

assets/scss/_menu.scss

@@ -81,3 +81,85 @@
     }
   }
 }
+
+
+.submenu {
+  background: $light-background-header;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  li a, .dropbtn {
+    display: inline-block;
+    text-decoration: none;
+  }
+
+  li.dropdown {
+    display: inline-block;
+  }
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background: $dark-background-header;
+
+    @media (prefers-color-scheme: light) {
+      background: $light-background-header;
+    }
+    
+    [data-theme=dark] & {
+      background: $dark-background-header;
+    }
+  
+    [data-theme=light] & {
+      background: $light-background-header;
+    }
+  }
+
+  .dropdown-content a {
+    padding: 12px 20px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+  }
+
+  .dropdown-content a:hover {
+    background: $dark-background-header;
+    
+    @media (prefers-color-scheme: light) {
+      background: $light-background-header;
+    }
+
+    [data-theme=dark] & {
+      background: $dark-background-header;
+    }
+  
+    [data-theme=light] & {
+      background: $light-background-header;
+    }
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+}

exampleSite/config.toml

@@ -90,6 +90,12 @@ disableHugoGeneratorInject = false
   #
   enableSharingButtons = true
 
+  # Global language menu
+  #
+  # Enables the global language menu.
+  #
+  enableGlobalLanguageMenu = true
+
   # Integrate Javascript files or stylesheets by adding the url to the external assets or by
   # linking local files with their path relative to the static folder, e.g. "css/styles.css"
   #

layouts/partials/logo.html

@@ -1,4 +1,4 @@
-<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{else}}{{ .Site.BaseURL | relLangURL }}{{ end }}" style="text-decoration: none;">
+<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{ else }}{{ .Site.BaseURL | relLangURL }}{{ end }}" style="text-decoration: none;">
     <div class="logo">
         {{ if .Site.Params.Logo.path }}
             <img src="{{ .Site.Params.Logo.path }}" alt="{{ .Site.Params.Logo.alt }}" />

layouts/partials/menu.html

@@ -4,5 +4,20 @@
         {{ range .Site.Menus.main -}}
             <li><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
         {{- end }}
+
+        {{- if .Site.Params.EnableGlobalLanguageMenu }}
+        <div class="submenu">
+            <li class="dropdown">
+                <a href="javascript:void(0)" class="dropbtn">{{ .Language }}</a>
+                <div class="dropdown-content">
+                    {{ if .Site.IsMultiLingual }}
+                        {{ range $.Translations }}
+                            <a title="{{ .Language }}" href="{{ .Permalink }}">{{ .Language }}</a>
+                        {{ end }}
+                    {{ end }}
+                </div>
+            </li>
+        </div>
+        {{- end }}
     </ul>
 </nav>