diff options
author | Djordje Atlialp <djordje@atlialp.com> | 2021-08-25 00:43:49 +0300 |
---|---|---|
committer | Djordje Atlialp <djordje@atlialp.com> | 2021-08-25 00:43:49 +0300 |
commit | 04e1e08dbf717f553f08a014d974de3c6034ffed (patch) | |
tree | db3e6c2466e010e007fc751801a771c76613c45f | |
parent | 74b2f0329a22f1bea788af86e535514c3663211d (diff) |
Add global language menu
-rw-r--r-- | assets/scss/_menu.scss | 82 | ||||
-rw-r--r-- | exampleSite/config.toml | 6 | ||||
-rw-r--r-- | layouts/partials/logo.html | 2 | ||||
-rw-r--r-- | layouts/partials/menu.html | 15 |
4 files changed, 104 insertions, 1 deletions
diff --git a/assets/scss/_menu.scss b/assets/scss/_menu.scss index f427496..24846fb 100644 --- a/assets/scss/_menu.scss +++ b/assets/scss/_menu.scss @@ -81,3 +81,85 @@ } } } + + +.submenu { + background: $light-background-header; + + @media (prefers-color-scheme: dark) { + background: $dark-background-header; + } + + @media (prefers-color-scheme: light) { + background: $light-background-header; + } + + [data-theme=dark] & { + background: $dark-background-header; + } + + [data-theme=light] & { + background: $light-background-header; + } + + ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + } + + li a, .dropbtn { + display: inline-block; + text-decoration: none; + } + + li.dropdown { + display: inline-block; + } + + .dropdown-content { + display: none; + position: absolute; + background: $dark-background-header; + + @media (prefers-color-scheme: light) { + background: $light-background-header; + } + + [data-theme=dark] & { + background: $dark-background-header; + } + + [data-theme=light] & { + background: $light-background-header; + } + } + + .dropdown-content a { + padding: 12px 20px; + text-decoration: none; + display: block; + text-align: left; + } + + .dropdown-content a:hover { + background: $dark-background-header; + + @media (prefers-color-scheme: light) { + background: $light-background-header; + } + + [data-theme=dark] & { + background: $dark-background-header; + } + + [data-theme=light] & { + background: $light-background-header; + } + } + + .dropdown:hover .dropdown-content { + display: block; + } +}
\ No newline at end of file diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 460cfe7..da7723f 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -90,6 +90,12 @@ disableHugoGeneratorInject = false # enableSharingButtons = true + # Global language menu + # + # Enables the global language menu. + # + enableGlobalLanguageMenu = true + # Integrate Javascript files or stylesheets by adding the url to the external assets or by # linking local files with their path relative to the static folder, e.g. "css/styles.css" # diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html index 19777ee..70072e2 100644 --- a/layouts/partials/logo.html +++ b/layouts/partials/logo.html @@ -1,4 +1,4 @@ -<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{else}}{{ .Site.BaseURL | relLangURL }}{{ end }}" style="text-decoration: none;"> +<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{ else }}{{ .Site.BaseURL | relLangURL }}{{ end }}" style="text-decoration: none;"> <div class="logo"> {{ if .Site.Params.Logo.path }} <img src="{{ .Site.Params.Logo.path }}" alt="{{ .Site.Params.Logo.alt }}" /> diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index e958fab..2624414 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -4,5 +4,20 @@ {{ range .Site.Menus.main -}} <li><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li> {{- end }} + + {{- if .Site.Params.EnableGlobalLanguageMenu }} + <div class="submenu"> + <li class="dropdown"> + <a href="javascript:void(0)" class="dropbtn">{{ .Language }}</a> + <div class="dropdown-content"> + {{ if .Site.IsMultiLingual }} + {{ range $.Translations }} + <a title="{{ .Language }}" href="{{ .Permalink }}">{{ .Language }}</a> + {{ end }} + {{ end }} + </div> + </li> + </div> + {{- end }} </ul> </nav> |