change design

src/components/layout/AppTopBar.jsx

@@ -1,9 +1,10 @@
 import MenuIcon from "../icons/MenuIcon";
 import ProfileAvatar from "../profile/ProfileAvatar";
+import { useTranslation } from 'react-i18next';
 
 /**
- * Общая верхняя панель приложения: бургер-меню слева,
- * произвольный контент по центру, профиль/логин справа.
+ * Общая верхняя панель приложения (мобильная версия Instagram-style):
+ * бургер-меню слева, название сервиса, контент по центру, профиль/логин справа.
  */
 export default function AppTopBar({
   onMenuClick,
@@ -13,14 +14,19 @@ export default function AppTopBar({
   onProfileClick,
   onLoginClick,
   loginLabel,
+  hideProfile = false,
 }) {
+  const { t } = useTranslation();
   return (
       <div className="f-topbar">
         <button className="f-menu-btn" onClick={onMenuClick}>
           <MenuIcon />
         </button>
+        <span className="f-topbar-wordmark">{t('app.name')}</span>
         <div className="f-topbar-center">{centerContent}</div>
-        {isAuthenticated ? (
+        {hideProfile ? (
+            <span className="f-topbar-spacer" />
+        ) : isAuthenticated ? (
             <div className="f-topbar-profile" onClick={onProfileClick}>
               <ProfileAvatar
                   avatar={profileData.avatar}
@@ -34,4 +40,4 @@ export default function AppTopBar({
         )}
       </div>
   );
-}
+}