change design

src/components/Sidebar.jsx

@@ -11,6 +11,7 @@ import { useUnread } from "../context/UnreadContext";
 import { useLanguageToggle } from "../hooks/useLanguageToggle";
 import { useTranslation } from 'react-i18next';
 import SupportModal from "./SupportModal";
+import ProfileAvatar from "./profile/ProfileAvatar";
 
 export default function Sidebar({
   open,
@@ -21,6 +22,9 @@ export default function Sidebar({
   onLoginClick,
   onRulesClick,
   onReviewsClick,
+  onCreatePost,
+  onProfileClick,
+  profileData,
 }) {
   const navigate = useNavigate();
   const { theme, toggle: toggleTheme } = useTheme();
@@ -28,6 +32,35 @@ export default function Sidebar({
   const { t } = useTranslation();
   const { language, toggleLanguage } = useLanguageToggle();
   const [supportOpen, setSupportOpen] = useState(false);
+  const HelpIcon = NavIcons.help;
+
+  const handleNavItem = (itemKey) => {
+    if (!isAuthenticated && itemKey === "myads") {
+      onLoginClick();
+      return;
+    }
+    if (itemKey === "chat") {
+      if (!isAuthenticated) {
+        onLoginClick();
+      } else {
+        navigate("/chats");
+      }
+      return;
+    }
+    if (itemKey === "create") {
+      onCreatePost?.();
+      return;
+    }
+    onNavClick(itemKey);
+  };
+
+  const handleProfileClick = () => {
+    if (!isAuthenticated) {
+      onLoginClick();
+    } else {
+      onProfileClick?.();
+    }
+  };
 
   return (
       <>
@@ -40,27 +73,15 @@ export default function Sidebar({
           <nav className="f-sb-nav">
             {NAV_ITEMS.map(({ icon, key: itemKey, labelKey }) => {
               const Ic = NavIcons[icon];
-              const handleClick = () => {
-                // «Мои объявления» требует авторизации
-                if (!isAuthenticated && itemKey === "myads") {
-                  onLoginClick();
-                } else if (itemKey === "chat") {
-                  if (!isAuthenticated) {
-                    onLoginClick();
-                  } else {
-                    navigate("/chats");
-                  }
-                } else {
-                  onNavClick(itemKey);
-                }
-                onClose();
-              };
               return (
                   <button
                       type="button"
                       key={itemKey}
-                      className={`f-sb-item${activeNav === itemKey ? " active" : ""}`}
-                      onClick={handleClick}
+                      className={`f-sb-item${activeNav === itemKey ? " active" : ""}${itemKey === "create" ? " f-sb-create" : ""}`}
+                      onClick={() => {
+                        handleNavItem(itemKey);
+                        onClose();
+                      }}
                   >
                     <Ic /> {t(labelKey)}
                     {itemKey === "chat" && totalUnread > 0 && (
@@ -99,20 +120,40 @@ export default function Sidebar({
               );
             })}
             <button type="button" className="f-sb-item" onClick={() => setSupportOpen(true)}>
-              <NavIcons.help /> {t('nav.support')}
-            </button>
+              <HelpIcon /> {t('nav.support')}            </button>
             <div className="f-sb-divider" />
-            <button type="button" className="f-sb-item f-sb-theme-toggle" onClick={toggleTheme}>
+            <button type="button" className="f-sb-item" onClick={toggleTheme}>
               {theme === "dark" ? <SunIcon /> : <MoonIcon />}
               {theme === "dark" ? t('sidebar.lightTheme') : t('sidebar.darkTheme')}
             </button>
-            <button type="button" className="f-sb-item f-sb-lang-toggle" onClick={toggleLanguage}>
+            <button type="button" className="f-sb-item" onClick={toggleLanguage}>
               <GlobeIcon />
               {language === 'ru' ? 'English' : 'Русский'}
             </button>
+            <div className="f-sb-divider" />
+            <button type="button" className="f-sb-profile" onClick={handleProfileClick}>
+              {isAuthenticated ? (
+                  <ProfileAvatar
+                      avatar={profileData?.avatar}
+                      name={`${profileData?.firstName || ""} ${profileData?.lastName || ""}`}
+                  />
+              ) : (
+                  <div className="f-profile-avatar-placeholder">👤</div>
+              )}
+              <div className="f-sb-profile-info">
+                <div className="f-sb-profile-name">
+                  {isAuthenticated
+                      ? `${profileData?.firstName || ""} ${profileData?.lastName || ""}`.trim() || profileData?.login
+                      : t('feed.login')}
+                </div>
+                <div className="f-sb-profile-login">
+                  {isAuthenticated ? profileData?.login || t('profile.default') : t('auth.noAccount')}
+                </div>
+              </div>
+            </button>
           </div>
         </div>
         {supportOpen && <SupportModal onClose={() => setSupportOpen(false)} />}
       </>
   );
-}
+}