Merge pull request #1606 from gethinode/develop

feat: enable optional inline language selector

Author: markdumay

assets/scss/components/_navbar.scss

@@ -392,3 +392,17 @@
 .form-control.is-search {
     border: 1px solid var(--bs-border-color) !important;
 }
+
+.inline-menu li {
+  display: inline-block;
+  padding: 0.5rem;
+  color: var(--bs-nav-link-color);
+}
+
+.inline-menu li .active, .inline-menu li>a:hover {
+    box-shadow: inset 0 -1px 0 var(--bs-navbar-hover-color);
+}
+
+ul.inline-menu {
+  padding: 0;
+}

exampleSite/config/_default/params.toml

@@ -61,6 +61,7 @@
     maxNumHeadings = 9
     [navigation.language]
         icon = "fas globe"
+        inline = false
     [navigation.padding]
         x = 4
         y = 4

layouts/_partials/assets/helpers/navbar-languages.html

@@ -4,34 +4,39 @@
 {{- $pretty := .pretty -}}
 {{- $icon := .icon | default "fas globe" -}}
 {{- $fs := .fs | default 6 -}}
+{{- $inline := site.Params.navigation.language.inline | default false -}}
+{{- $class := cond $inline "inline-menu" "dropdown-menu dropdown-menu-end" }}
 
 {{- $lang := $page.Language.Lang -}}
 <li class="nav-item dropdown me-auto">
-    <a class="nav-link dropdown-toggle d-{{ $breakpoint }}-none" role="button" data-bs-toggle="dropdown" 
-        aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
-        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $icon) "spacing" true) }}{{ T "languageSwitcherLabel" }}
-    </a>
-    <a class="nav-link dropdown-toggle d-none d-{{ $breakpoint }}-block" role="button" data-bs-toggle="dropdown" 
-        aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
-        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $icon) "spacing" false) }}
-    </a>
-    <ul id="language-selector" class="dropdown-menu dropdown-menu-end navbar-fs-{{ $fs }} navbar-{{ $breakpoint }}-fs" data-translated="{{ $page.IsTranslated }}">
+    {{ if not $inline }}
+        <a class="nav-link dropdown-toggle d-{{ $breakpoint }}-none" role="button" data-bs-toggle="dropdown" 
+            aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
+            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $icon) "spacing" true) }}{{ T "languageSwitcherLabel" }}
+        </a>
+        <a class="nav-link dropdown-toggle d-none d-{{ $breakpoint }}-block" role="button" data-bs-toggle="dropdown" 
+            aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
+            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $icon) "spacing" false) }}
+        </a>
+    {{ end }}
+    <ul id="language-selector" class="{{ $class }} navbar-fs-{{ $fs }} navbar-{{ $breakpoint }}-fs" data-translated="{{ $page.IsTranslated }}">
         {{- if $page.IsTranslated -}}
             {{- range $page.AllTranslations -}}
                 <li>
                     {{- $state := cond (eq .Language.Lang $lang) "active" "" }}
                     <a class="dropdown-item {{ $state }}" hreflang="{{ .Language.Lang }}" href="{{ .RelPermalink }}">
-                        {{- .Language.LanguageName -}}
+                        {{- cond $inline (upper .Language.Lang) .Language.LanguageName -}}
                     </a>
                 </li>
             {{- end -}}
         {{- else -}}
             {{- range site.Languages -}}
-                {{ $dest := partial "utilities/URLJoin.html" (dict "base" $baseURL "path" .Lang) }}
-                {{ if and $pretty (not (hasSuffix $dest "/")) }}
-                    {{ $dest = printf "%s/" $dest }}
-                {{ end }}
-                <li><a class="dropdown-item" href="{{ $dest }}" hreflang="{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
+                <li>
+                    {{- $state := cond (eq .Lang $lang) "active" "disabled" }}
+                    <a class="dropdown-item {{ $state }}" href="{{ cond (eq $state "active") $page.RelPermalink "#!" }}" hreflang="{{ .Lang }}">
+                    {{- cond $inline (upper .Lang) (default .Lang .LanguageName) -}}
+                    </a>
+                </li>
             {{- end -}}
         {{- end -}}
     </ul>