# Документация по переносу раздела "Информация о пользователе" в хедере

## Общая структура в React
- **Расположение**: В AppHeader.tsx, левая часть flex, после заголовка.
- **Тип**: Div с v-if="user", вложенные div для name/role.
- **Зависимости**: Tailwind CSS, useAuth для user data.
- **JSX**: <div class="text-sm text-gray-300">
  <div>{{ user.name || 'Пользователь' }}</div>
  <div class="text-xs opacity-75">{{ user.role }}</div>
</div>.

## Элементы
- Name: div {{ user.name || 'Пользователь' }} (text-sm).
- Role: div class "text-xs opacity-75" {{ user.role }} (text-xs opacity-75).
- Условие: v-if="user" (показывается только если авторизован).

## Стили (Tailwind примеры)
- Контейнер: flex items-center space-x-4 (в AppHeader).
- Текст: text-sm text-gray-300 для name, text-xs opacity-75 для role.
- Responsive: text-xs на mobile для всего блока.

## Взаимодействие
- Данные: Из useAuth (user from state), отображается после авторизации.
- Нет кликов, пассивный элемент.
- В AppHeader: <div class="flex items-center space-x-4"> <h1>...</h1> <div v-if="user">...</div> </div>.

## Vue маппинг
- <template>: <div v-if="user" class="text-sm text-gray-300">
  <div>{{ user.name || 'Пользователь' }}</div>
  <div class="text-xs opacity-75">{{ user.role }}</div>
</div>.
- inject useAuthStore для user.