From e2eb1798abfbe175f0432cfd1c7712c92b946362 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Fri, 17 Sep 2021 13:04:59 +0000
Subject: [PATCH] feat: first draft language dropdown
---
layouts/partials/navbar.html | 33 +++++++++++++---
assets/css/style.css | 76 ++++++++++++++++++++++++++++++++++++++
2 files changed, 103 insertions(+), 6 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
index 2fe33ea..9e5a55d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -270,6 +270,80 @@
width: var(--sidebar-width);
}
+/*
+Language Switch
+*/
+
+.sl-nav {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: relative;
+ display: inline-block;
+}
+.sl-nav li {
+ cursor: pointer;
+ padding-bottom: 10px;
+}
+.sl-nav li ul {
+ display: none;
+}
+.sl-nav li:hover ul {
+ position: absolute;
+ top: 29px;
+ right: -15px;
+ display: block;
+ background: #fff;
+ padding-left: 0;
+ padding-top: 0px;
+ z-index: 1;
+ border-radius: 5px;
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+}
+.sl-nav li:hover .triangle {
+ position: absolute;
+ top: 15px;
+ right: -10px;
+ z-index: 10;
+ height: 14px;
+ overflow: hidden;
+ width: 30px;
+ background: transparent;
+}
+.sl-nav li:hover .triangle:after {
+ content: '';
+ display: block;
+ z-index: 20;
+ width: 15px;
+ transform: rotate(45deg) translateY(0px) translatex(10px);
+ height: 15px;
+ background: #fff;
+ border-radius: 2px 0px 0px 0px;
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+}
+.sl-nav li ul li {
+ position: relative;
+ text-align: left;
+ background: transparent;
+ padding: 15px 15px;
+ padding-bottom: 0;
+ z-index: 2;
+ font-size: 15px;
+ color: #3c3c3c;
+ display: block;
+}
+.sl-nav li ul li:last-of-type {
+ padding-bottom: 15px;
+}
+.sl-nav li ul li span {
+ padding-left: 5px;
+}
+.sl-nav li ul li span:hover,
+.sl-nav li ul li span.active {
+ color: var(--tag-color);
+}
+
+
.sidebar {
-webkit-background-size: cover;
background-size: cover;
@@ -341,6 +415,8 @@
color: #2660ab;
}
+
+
.post {
background-color: var(--bg-color);
margin: 30px;
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 92f87f6..70d5e58 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -35,14 +35,35 @@
</li>
{{ end }}
- {{ if .Site.IsMultiLingual }}
- {{ range $.Site.Home.AllTranslations }}
- <li><a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</a></li>
+ <li>
+ {{ if and .Site.IsMultiLingual }}
+ <ul class="sl-nav" aria-label="Language switcher">
+ <li>
+ <b>{{ .Site.Language.LanguageName }}</b> <i class="fa fa-angle-down" aria-hidden="true"></i>
+ <div class="triangle"></div>
+ <ul>
+ {{ range $.Translations }}
+
+ <li>
+ <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}"
+ ><span
+ {{ if eq . $.Site.Language }}
+ class="active"
+
+ {{ end }}
+ aria-label="{{ i18n "ariaLanguage" }}{{ .Language.LanguageName }}"
+ >{{ .Language.LanguageName }}</span
+ ></a
+ >
+ </li>
+
+ {{ end }}
+ </ul>
+ </li>
+ </ul>
{{ end }}
-
-
- {{ end }}
+ </li>
</div>
<li>
{{ if not .Site.Params.disableThemeSwitcher }}
--
Gitblit v1.10.0