header: add Language switch (#54)

adityatelange · web-flow · commit c33dabf3a233 · 2020-10-26T22:19:05.000+05:30
* language-switch: init
* header: move logo-switches together
diff --git a/assets/css/header.css b/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;
+}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -10,13 +10,15 @@
             document.body.classList.add('dark');
         }
     }
+
 </script>
 {{- end }}
 {{- if (and (.Site.Params.disableThemeToggle) (eq .Site.Params.defaultTheme "auto")) }}
 <script>
     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.body.classList.add('dark');
     }
+
 </script>
 {{- end }}
 <noscript>
@@ -25,43 +27,68 @@
         .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"
                     height="{{- .Site.Params.label.iconHeight | default "30px" -}}">
                 {{- end -}}
                 {{- .Site.Params.label.text | default .Site.Title -}}
             </a>
-            {{- 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">
-                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                        stroke-linejoin="round">
-                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                    </svg>
-                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                        stroke-linejoin="round">
-                        <circle cx="12" cy="12" r="5"></circle>
-                        <line x1="12" y1="1" x2="12" y2="3"></line>
-                        <line x1="12" y1="21" x2="12" y2="23"></line>
-                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                        <line x1="1" y1="12" x2="3" y2="12"></line>
-                        <line x1="21" y1="12" x2="23" y2="12"></line>
-                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-                    </svg>
-                </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">
+                        <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                        </svg>
+                        <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="5"></circle>
+                            <line x1="12" y1="1" x2="12" y2="3"></line>
+                            <line x1="12" y1="21" x2="12" y2="23"></line>
+                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                            <line x1="1" y1="12" x2="3" y2="12"></line>
+                            <line x1="21" y1="12" x2="23" y2="12"></line>
+                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                        </svg>
+                    </a>
+                </span>
+                {{- end}}
+                {{ $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>
-            {{- end}}
-        </p>
+        </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>
