Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Language switcher in menu #89

Open
3 tasks done
poVoq opened this issue Jan 23, 2023 · 2 comments
Open
3 tasks done

[FEATURE] Language switcher in menu #89

poVoq opened this issue Jan 23, 2023 · 2 comments
Assignees
Labels
enhancement New feature or request

Comments

@poVoq
Copy link

poVoq commented Jan 23, 2023

I have checked all the prerequisites below and I don't see this is available

  • Read the README.md
  • Have the extended version of Hugo installed
  • Used the exampleSite's config.toml as a reference

Describe the feature

Despite the apparent multi-language support in the Compose theme, I can't seem to find a way to actually switch to another language. It would be nice if there was a small drop-down menu to select the language.

Thanks!

@poVoq poVoq added the enhancement New feature or request label Jan 23, 2023
@onweru
Copy link
Owner

onweru commented Jan 24, 2023

Thanks @poVoq for pointing this out, I will enable that function. The assumption was that authors would publish on one language, which is obviously wrong.

@onweru onweru self-assigned this Jan 24, 2023
@ltguillaume
Copy link
Contributor

ltguillaume commented Feb 16, 2023

@onweru My take on this:

nav.html

    {{ if .IsTranslated }}
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-button" href="#">
          <span>{{ .Language }}</span>
        </a>
        <div class="dropdown-content">
          {{ range .Translations }}
            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
          {{ end }}
        </div>
      </li> 
    {{ end }}

_nav.sass

.dropdown
  .dropdown-button
    text-transform: uppercase
  .dropdown-content
    display: none
    background-color: var(--bg)
    box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
    z-index: 4
    @media screen and (min-width: 992px)
      position: absolute
      top: 3.5rem
    a
      display: block
      padding: 1rem
      &:hover
        background-color: var(--accent)
.dropdown:hover
  .dropdown-button
    background-color: var(--accent)
  .dropdown-content
    display: block

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants