Компонент смены языка "LanguageSelector"

LanguageSelector.js

"use client";

// Импорт хуков и компонентов из библиотеки Next.js и React.
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";

// Импорт локализованных данных языков и стилей для компонента.
import { language } from "../../locales/selectLanguage";
import styles from "./LanguageSelector.module.scss";

// Импорт компонента Image из Next.js для оптимизированной загрузки изображений.
import Image from "next/image";
import languageselector from "../../public/uipictures/languageselector.png";

export default function LanguageSelector() {
  
  const router = useRouter();

  // Состояния для управления отображением выпадающего списка языков и активным языком.
  const [activeLanguagePopUp, setActiveLanguagePopUp] = useState(false);
  const [activeLanguage, setActiveLanguage] = useState(
    language.SelectLanguage[0]
  );

  // Обновление URL при смене языка.
  useEffect(() => {
    if (router.isReady && router.locale !== activeLanguage.Code) {
      router.push(router.asPath, undefined, {
        locale: activeLanguage.Code,
        shallow: true,
      });
    }
  }, [activeLanguage, router]);


  return (
    <div
      // Обработчик клика для переключения отображения выпадающего списка.
      onClick={() => setActiveLanguagePopUp(!activeLanguagePopUp)}
      // Применение стилей в зависимости от состояния выпадающего списка.
      className={
        activeLanguagePopUp
          ? `${styles.LanguageSelector} ${styles.LanguageSelector__open}`
          : styles.LanguageSelector
      }
    >
      {/* Задний фон для выпадающего списка */}
      <div className={styles.LanguageSelector__backdrop}></div>

      {/* Выбранный язык и иконка */}
      <div className={styles.LanguageSelector__select}>
        <div className={styles.LanguageSelector__selectimg}>
          <Image
            src={languageselector}
            alt="Language Selector"
            width={12}
            height={7}
          />
        </div>
        <span className={styles.LanguageSelector__selecttext}>
          {activeLanguage.FullLang}
        </span>
      </div>

      {/* Выпадающий список языков */}
      {activeLanguagePopUp && (
        <div className={styles.LanguageSelector__dropdown}>
          <ul className={styles.LanguageSelector__items}>
            {language.SelectLanguage.map(({ id, FullLang }) => (
              <li
                key={id}
                className={styles.LanguageSelector__item}
                // Обработчик клика для выбора языка.
                onClick={() => setActiveLanguage(language.SelectLanguage[id])}
              >
                {FullLang}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

LanguageSelector.module.scss

@import "../../styles/mixins.scss";
@import "../../styles/constants.scss";

.LanguageSelector {
  display: none;
  font-family: $ffNav;
  position: relative;
  z-index: 2;
  @include p920px {
    display: block;
  }

  &__open {
    .LanguageSelector__dropdown {
      display: block;
    }
    .LanguageSelector__backdrop {
      display: block;
    }
  }

  &__select {
    height: 18px;
    width: auto;
    background-color: $bgCharcoal;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  &__backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: transparent;
    z-index: -1;
  }

  &__selectimg {
    padding-right: 8px;
  }

  &__selecttext {
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    color: $fcAccent;
  }

  &__dropdown {
    display: none;
    position: fixed;
    width: 140px;
    max-height: 260px;
    overflow-y: auto;
    right: 0;
    margin-top: 10px;
    background-color: $bgCharcoal;
  }

  &__items {
    @include list-style-none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 16px;
    margin-bottom: 24px;
    margin-right: 35px;
  }

  &__item {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    color: $fcBg;
    padding-bottom: 20px;
    cursor: pointer;
    &:last-of-type {
      padding-bottom: 0;
    }
    &:hover {
      opacity: 0.8;
    }

    &:after {
      display: block;
      position: absolute;
      content: "";
      left: 0;
      width: 0;
      height: 1px;
      background-color: $bgOffWhite;
      transition: width 0.3s ease-out;
    }
    &:hover:after,
    &:focus:after {
      width: 100%;
      opacity: 0.8;
    }
  }
}

next.config.js

const nextConfig = {
  i18n: {
    locales: ["en", "ru", "sr"],
    defaultLocale: "en",
  },
};

module.exports = nextConfig;