New language switch

assets/scss/_custom.scss

@@ -209,6 +209,21 @@ nav .nav-link {
       background: currentColor;
     }
   }
+
+  &.language {
+    padding-block: 0.25rem;
+  }
+
+  &.active.language {
+    &:hover,
+    &:focus-visible,
+    &:active,
+    &.active {
+      &:after {
+        width: 0;
+      }
+    }
+  }
 }
 
 .navbar-toggler {
@@ -220,6 +235,17 @@ nav .nav-link {
   box-shadow: none;
 }
 
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 3px;
+  height: 2em;
+  background-color: currentColor;
+  opacity: 0.8;
+  position: absolute;
+  top: 26%;
+}
+
 .overlay {
   height: 0;
   width: 100%;

layouts/partials/menu.html

@@ -31,13 +31,17 @@
                 ($firstUrlElement|lower) (.URL|lower) }}aria-current="page" {{end}} href="{{ .URL | absLangURL }}">{{ .Name }}</a>
             </li>
             {{ end }}
+
+            <li class="nav-item ms-4 {{ if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else if $home }}text-white{{ else if eq $type "about" }}text-white{{ else }}{{ end }}">
+                <div class="vr"></div>
+            </li>
             
             {{ if .Site.IsMultiLingual }}
-            <div class="ms-4 d-flex">
+            <div class="ms-4 d-flex align-items-center">
               {{ range .Site.Languages }}
                 {{ if eq . $.Site.Language }}
                 <li class="nav-item ms-2">
-                  <p class="nav-link active language text-uppercase {{ if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else if $home }}text-white{{ else if eq $type "about" }}text-white{{ else }}{{ end }}">{{ .Lang }}</p>
+                  <p class="nav-link active language text-uppercase mb-0 {{ if eq $theme "dark" }}background-white{{ else if eq $theme "light" }}text-dark background-white{{ else if $home }}color-blue-500 background-white{{ else if eq $type "about" }}color-blue-500 background-white{{ else }}text-white background-blue-500{{ end }}" {{ if $.Params.background }}style="color: {{ $.Params.background }};"{{ else }}{{ end }}>{{ .Lang }}</p>
                 </li>
                 {{ else }}
                   {{ range $.Translations }}