added english language

src/components/Sidebar.jsx

@@ -4,6 +4,7 @@ import {NavIcons} from "./icons/NavIcons";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "../context/ThemeContext";
 import { useUnread } from "../context/UnreadContext";
+import { useTranslation } from 'react-i18next';
 
 export default function Sidebar({
   open,
@@ -18,40 +19,48 @@ export default function Sidebar({
   const navigate = useNavigate();
   const { theme, toggle: toggleTheme } = useTheme();
   const { totalUnread } = useUnread();
+  const { t, i18n } = useTranslation();
+
+  const toggleLang = () => {
+    const next = i18n.language === 'ru' ? 'en' : 'ru';
+    i18n.changeLanguage(next);
+    localStorage.setItem('i18nextLng', next);
+  };
+
   return (
       <>
         <div className={`f-overlay${open ? " show" : ""}`} onClick={onClose} />
         <div className={`f-sidebar${open ? " open" : ""}`}>
           <div className="f-sb-head">
             <div className="f-sb-logo"><LogoIcon /></div>
-            <span className="f-sb-name">Находка</span>
+            <span className="f-sb-name">{t('app.name')}</span>
           </div>
           <nav className="f-sb-nav">
-            {NAV_ITEMS.map(({ icon, label }) => {
+            {NAV_ITEMS.map(({ icon, key: itemKey, labelKey }) => {
               const Ic = NavIcons[icon];
               const handleClick = () => {
                 // «Мои объявления» требует авторизации
-                if (!isAuthenticated && label === "Мои объявления") {
+                if (!isAuthenticated && itemKey === "myads") {
                   onLoginClick();
-                } else if (label === "Чат") {
+                } else if (itemKey === "chat") {
                   if (!isAuthenticated) {
                     onLoginClick();
                   } else {
                     navigate("/chats");
                   }
                 } else {
-                  onNavClick(label);
+                  onNavClick(itemKey);
                 }
                 onClose();
               };
               return (
                   <div
-                      key={label}
-                      className={`f-sb-item${activeNav === label ? " active" : ""}`}
+                      key={itemKey}
+                      className={`f-sb-item${activeNav === itemKey ? " active" : ""}`}
                       onClick={handleClick}
                   >
-                    <Ic /> {label}
-                    {label === "Чат" && totalUnread > 0 && (
+                    <Ic /> {t(labelKey)}
+                    {itemKey === "chat" && totalUnread > 0 && (
                       <span className="f-sb-unread-badge">{totalUnread > 99 ? "99+" : totalUnread}</span>
                     )}
                   </div>
@@ -59,29 +68,29 @@ export default function Sidebar({
             })}
           </nav>
           <div className="f-sb-bottom">
-            {NAV_BOTTOM.map(({ icon, label }) => {
+            {NAV_BOTTOM.map(({ icon, key: itemKey, labelKey }) => {
               const Ic = NavIcons[icon];
               const handleBottomClick = () => {
-                if (label === "Правила площадки") {
+                if (itemKey === "rules") {
                   onRulesClick?.();
                   onClose();
                   return;
                 }
-                if (label === "Отзывы") {
+                if (itemKey === "reviews") {
                   onReviewsClick?.();
                   onClose();
                   return;
                 }
-                onNavClick(label);
+                onNavClick(itemKey);
                 onClose();
               };
               return (
                   <div
-                      key={label}
-                      className={`f-sb-item${activeNav === label ? " active" : ""}`}
+                      key={itemKey}
+                      className={`f-sb-item${activeNav === itemKey ? " active" : ""}`}
                       onClick={handleBottomClick}
                   >
-                    <Ic /> {label}
+                    <Ic /> {t(labelKey)}
                   </div>
               );
             })}
@@ -97,7 +106,14 @@ export default function Sidebar({
                   <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                 </svg>
               )}
-              {theme === "dark" ? "Светлая тема" : "Тёмная тема"}
+              {theme === "dark" ? t('sidebar.lightTheme') : t('sidebar.darkTheme')}
+            </div>
+            <div className="f-sb-item f-sb-lang-toggle" onClick={toggleLang}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+              </svg>
+              {i18n.language === 'ru' ? 'English' : 'Русский'}
             </div>
           </div>
         </div>