`` – это новый слой навигации. Чтобы понять, что он себя представляет, достаточно открыть VK на iOS или на
Android. Внизу располагается панель с иконками, с помощью которой пользователь может переключаться между ключевыми
разделами.
`Epic` неразрывно связан с новыми компонентами для отрисовки
нижнего меню – [Tabbar](#!/Tabbar) и
[TabbarItem](#!/TabbarItem).
Логика работы `Epic` похожа на логику `View` и `Root`: Внутри `Epic` может находиться либо коллекция `Root`,
либо коллекция `View`. У каждого элемента коллекции должен быть уникальный `id`. Свойство `activeStory` указывает
на `id` активного окна.
**Важно:** При `viewWidth < SMALL_TABLET` в `Epic` всегда должен быть передан `Tabbar`, так как он является единственным способом переключения
между окнами.
``` jsx
const Example = withAdaptivity(({ viewWidth }) => {
const platform = usePlatform();
const [activeStory, setActiveStory] = React.useState('profile');
const onStoryChange = (e) => setActiveStory(e.currentTarget.dataset.story);
const isDesktop = viewWidth >= ViewWidth.TABLET;
const hasHeader = platform !== VKCOM;
return (
}
style={{ justifyContent: "center" }}
>
{isDesktop && (
{hasHeader && }
| }
>
feed
| }
>
services
| }
>
messages
| }
>
clips
| }
>
profile
)}
}>
}>Новости
} />
}>Сервисы
}>
}>Сообщения
}>
}>Клипы
}>
}>Профиль
}>
);
}, {
viewWidth: true
});
```