header: add Language switch (#54)

* language-switch: init
* header: move logo-switches together

assets/css/header.css

@@ -7,17 +7,18 @@
     max-width: calc(var(--nav-width) + var(--gap) * 2);
     margin-inline-start: auto;
     margin-inline-end: auto;
+    line-height: var(--header-height);
 }
 
 .nav a {
     display: block;
-    line-height: var(--header-height);
 }
 
 .logo,
 .menu {
     display: flex;
     margin: auto var(--gap);
+    flex-wrap: inherit;
 }
 
 .logo a {
@@ -40,7 +41,7 @@
     user-select: none;
 }
 
-body.dark #moon{
+body.dark #moon {
     vertical-align: middle;
     display: none;
 }
@@ -68,3 +69,22 @@ body:not(.dark) #sun {
     font-weight: 500;
     border-bottom: 2px solid currentColor;
 }
+
+.lang-switch ul {
+    display: inline-flex;
+}
+
+.lang-switch a {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 0 8px;
+}
+
+.lang-switch li {
+    display: inline-flex;
+}
+
+.logo-switches {
+    display: inline-flex;
+    flex-wrap: inherit;
+}

layouts/partials/header.html

@@ -10,6 +10,7 @@
             document.body.classList.add('dark');
         }
     }
+
 </script>
 {{- end }}
 {{- if (and (.Site.Params.disableThemeToggle) (eq .Site.Params.defaultTheme "auto")) }}
@@ -17,6 +18,7 @@
     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.body.classList.add('dark');
     }
+
 </script>
 {{- end }}
 <noscript>
@@ -25,11 +27,12 @@
         .top-link {
             display: none;
         }
+
     </style>
 </noscript>
 <header class="header">
     <nav class="nav">
-        <p class="logo">
+        <div class="logo">
             <a href="{{ "" | absLangURL }}">
                 {{- if .Site.Params.label.icon }}
                 <img src="{{- .Site.Params.label.icon -}}" alt="logo" aria-label="logo"
@@ -37,6 +40,7 @@
                 {{- end -}}
                 {{- .Site.Params.label.text | default .Site.Title -}}
             </a>
+            <span class="logo-switches">
                 {{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
                 <span class="theme-toggle">
                     <a id="theme-toggle">
@@ -61,7 +65,30 @@
                     </a>
                 </span>
                 {{- end}}
-        </p>
+                {{ $lang := .Lang}}
+                {{- with $.Site.Home.AllTranslations }}
+                <span class="lang-switch">
+                    <span>|</span>
+                    <ul>
+                        {{- range . -}}
+                        {{- if ne $lang .Lang }}
+                        <li>
+                            <a href="{{- .Permalink -}}" title="{{ .Language.LanguageName | default .Lang | humanize }}"
+                                aria-label="{{ .Language.LanguageName | default .Lang | humanize }}">
+                                {{- if (and $.Site.Params.displayFullLangName (.Language.LanguageName)) }}
+                                {{- .Language.LanguageName | humanize -}}
+                                {{- else }}
+                                {{- .Lang | humanize -}}
+                                {{- end -}}
+                            </a>
+                        </li>
+                        {{- end -}}
+                        {{- end}}
+                    </ul>
+                </span>
+                {{- end }}
+            </span>
+        </div>
         {{- $currentPage := . }}
         <ul class="menu" id="menu" onscroll="menu_on_scroll()">
             {{- range .Site.Menus.main }}
@@ -75,7 +102,7 @@
                     </span>
                 </a>
             </li>
-            {{- end }}
+            {{- end -}}
         </ul>
     </nav>
 </header>