index.tsx

import { Icon28UserCircleOutline } from "@vkontakte/icons"
import { Epic, Group, Panel, PanelHeader, PanelHeaderBack, Placeholder, Tabbar, TabbarItem, View } from "@vkontakte/vkui"
import { MouseEvent, useState } from "react"

type activeStory = "profile"

export const Navigetion = () => {
  const [activeStory, setActiveStory] = useState<activeStory>("profile")

  const onStoryChange = (e: MouseEvent) => {
    setActiveStory(
      e.currentTarget.getAttribute("data-story") as activeStory
    )
  }

  return (
    <Epic
      activeStory={activeStory}
      tabbar={
        <Tabbar>
          <TabbarItem
           onClick={onStoryChange}
           selected={activeStory === "profile"} 
           data-store="profile"
           text="Профиль"
          >
            <Icon28UserCircleOutline />
          </TabbarItem>
        </Tabbar>
      }
    >
      <View id="profile" activePanel="profile">
        <Panel id="profile">
          <PanelHeader left={<PanelHeaderBack />}>Профиль</PanelHeader>
          <Group style={{ height: "1000px" }}>
            <Placeholder icon={<Icon28UserCircleOutline width={56} height={56} />}></Placeholder>
          </Group>
        </Panel>
      </View>
    </Epic>
  )
}