refactor: nav, languageswitch

alexanderdavide

06.57.2022 a22e9dfe00ed260f934243a602d7451ff8bae944

refactor: nav, languageswitch

 assets/css/style.rtl.css

@@ -105,7 +105,7 @@
    left: 0;
    right: auto;
  }
  header .nav__list li {
  /* header .nav__list li {
    padding-left: 20px;
  }
  header .nav__list li:not(:last-of-type) {
@@ -113,7 +113,7 @@
  }
  .triangle {
    display: inline-block;
  }
  } */
}

@media (min-width: 1921px) {

 assets/scss/main.scss

@@ -1,4 +1,5 @@
@import './modules/variables';
@import './modules/config';
@import './partials/hugo';
@import './partials/base';
@import './partials/layout/html';

 assets/scss/modules/_config.scss

New file
@@ -0,0 +1,5 @@
@mixin desktop {
  @media screen and (min-width: 961px) {
    @content;
  }
}

 assets/scss/partials/components/_languageswitch.scss

@@ -1,103 +1,71 @@
.languageswitch {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;
  padding-right: 20px;

  &__label {
    cursor: pointer;
    white-space: nowrap;
  }

  &__list {
    display: none;
    list-style: none;
    label {
      cursor: pointer;
    padding: 0;
    position: relative;

    @include desktop {
      background: $accent;
      border-color: $primary;
      border-radius: 5px;
      box-shadow: $shadow;
      position: absolute;
      top: 40px;
    }

    &-item {
      .dropdown__list {
        display: none;
        position: absolute;
        top: 29px;
        right: -15px;
        background: $accent;
        border-color: $primary;
        padding-left: 0;
        padding-top: 0px;
        z-index: 1;
        border-radius: 5px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);

        &-item {
          position: relative;
          text-align: left;
          background: transparent;
          padding: 12px;
          z-index: 2;
          color: $primary;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }

  &__picker:checked {
    ~ .dropdown__list {
      display: block;
    }

    ~ .triangle {
      position: absolute;
      top: 15px;
      right: -10px;
      z-index: 10;
      height: 14px;
      overflow: hidden;
      width: 30px;
      background: transparent;
      color: $primary;
      display: block;
      line-height: 1;
      padding: 0.5rem 0.75rem 0.5rem 0;
      text-align: center;
      white-space: nowrap;

      &:after {
        content: '';
        z-index: 20;
        width: 15px;
        transform: rotate(45deg) translateY(0px) translatex(10px);
        height: 15px;
        background: $accent;
        border-radius: 2px 0px 0px 0px;
        border-color: $primary;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        float: left;
        display: block;
      @include desktop {
        padding: 1.2rem;
      }
    }
  }

  @media screen and (max-width: 960px) {
    .languageswitch {
      &__list {
        padding-right: inherit;
  &__triangle {
    display: none;

        label {
          cursor: pointer;
    &::before {
      content: '';
      background: $accent;
      box-shadow: $shadow;
      border-color: $primary;
      border-radius: 2px 0px 0px 0px;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
      height: 14px;
      bottom: 0px;
      left: calc(50% / 2);
      overflow: hidden;
      position: absolute;
      transform: rotate(45deg) translateY(0px) translatex(10px);
      width: 14px;
    }
  }

  &__picker {
    &:checked {
      ~ .languageswitch {
        &__list {
          display: block;
        }

        .triangle {
          display: none;
        }

        &-item {
          .dropdown__list {
            right: inherit;
            position: relative;
            top: inherit;
            padding-right: 0px;
            background: none;
            border-color: inherit;
            box-shadow: none;
            &-item {
              text-align: center;
              padding: 0.5rem 0.75rem;
              padding-left: initial;
            }
        &__triangle {
          @include desktop {
            display: block;
          }
        }
      }

 assets/scss/partials/layout/_nav.scss

@@ -5,7 +5,6 @@
  &__list {
    margin: 0;
    list-style: none;
    padding: 20px 30px;
    background-color: $primary-lighter;
    width: 100%;

@@ -14,14 +13,19 @@
      padding: 0.5rem 0.75rem;
      text-transform: uppercase;
      text-align: center;
      font-size: 1.3em;
    }

    @include desktop {
      padding: 20px 30px;
    }
  }

  &__link {
    &--active {
      border-bottom: 1px solid $primary;
      padding-bottom: 22px;
      @include desktop {
        border-bottom: 1px solid $primary;
        padding-bottom: 22px;
      }
    }
  }

@@ -40,6 +44,7 @@
    &__list {
      display: flex;
      background-color: $accent;

      &-item {
        &:not(:last-child) {
          padding-right: 20px;

 layouts/partials/navbar.html

@@ -32,50 +32,55 @@
            >{{ .Name }}</a
          >
        </li>

      {{ end }}
      </ul>
      <ul class="nav__list nav__list--end">
        {{ if and .IsTranslated .Site.IsMultiLingual }}
          <li class="languageswitch">
            <ul class="languageswitch__list" aria-label="Language switcher">
              <li class="languageswitch__list-item">
                <input class="languageswitch__picker" type="checkbox" id="languagepicker" aria-label="switch language" hidden />
                <label for="languagepicker">{{ .Site.Language.LanguageName }}</label>
                <label for="languagepicker"><i class="fa fa-angle-down" aria-hidden="true"></i></label>
                <div class="triangle"></div>
    </ul>
    <ul class="nav__list nav__list--end">
      {{ if and .IsTranslated .Site.IsMultiLingual }}
        <li class="nav__list-item">
          <div class="languageswitch">
            <input
              class="languageswitch__picker"
              type="checkbox"
              id="languagepicker"
              aria-label="switch language"
              hidden
            />
            <label class="languageswitch__label" for="languagepicker"
              >{{ .Site.Language.LanguageName }} <i class="fa fa-angle-down" aria-hidden="true"></i
            ></label>
            <div class="languageswitch__triangle"></div>
            <ul class="languageswitch__list">
              {{ range $.Translations }}
                <li class="languageswitch__list-item">
                  <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}"
                    ><span
                      {{ if eq . $.Site.Language }}
                        class="active"

                <ul class="dropdown__list">
                  {{ range $.Translations }}
                      {{ end }}
                      aria-label="{{ i18n "ariaLanguage" }}{{ .Language.LanguageName }}"
                      >{{ .Language.LanguageName }}</span
                    >
                  </a>
                </li>

                    <li class="dropdown__list-item">
                      <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>
              {{ end }}
            </ul>
          </li>
          </div>
        </li>

        {{ end }}
        {{ if not .Site.Params.disableThemeSwitcher }}
          <li class="themeswitch">
      {{ end }}
      {{ if not .Site.Params.disableThemeSwitcher }}
        <li class="nav__list-item">
          <div class="themeswitch">
            <a title="Switch Theme">
              <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
            </a>
          </li>
          </div>
        </li>

        {{ end }}
      </ul>
      {{ end }}
    </ul>
  </nav>
</div>