menubar: стилизация, сторисы

.gitignore

@@ -31,5 +31,6 @@ coverage
 .npmrc
 
 storybook-static
+*.tsbuildinfo
 
 .claude/*

.storybook/preview-head.html

@@ -41,6 +41,7 @@
   html {
     font-size: 87.5%;
   }
+
 </style>
 
 <script>

package.json

@@ -45,6 +45,7 @@
     "@mdx-js/react": "^3.1.1",
     "@primevue/auto-import-resolver": "4.3.6",
     "@primevue/themes": "4.3.6",
+    "@tabler/icons-vue": "^3.22.0",
     "@tabler/icons-webfont": "^3.22.0",
     "@vee-validate/rules": "^4.7.3",
     "lodash": "^4.17.21",

src/plugins/prime/stories/Menu/MenuBar/MenuBar.mdx

@@ -1,20 +1,75 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Title, Description } from '@storybook/addon-docs/blocks';
 import * as MenuBarStories from './MenuBar.stories';
 
-import { Template } from './MenuBar.template';
-
 <Meta of={MenuBarStories} />
 
-# MenuBar
+<Title />
+<Description />
+
+```javascript
+import { PBlockMenubar, PBlockMenuItem } from '@cdek-it/vue-ui-kit';
+```
 
-[PrimeVue MenuBar](https://primevue.org/menubar), [Макет](https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace--DS-?node-id=888-12875\&m=dev)
+## Варианты использования
 
 ### Basic
 
-```jsx dark
-const selectedClass = 'p-menuitem-checked';
+Горизонтальное меню с выпадающими подменю.
 
-<PrimeMenubar :model="items" />
-```
+<Canvas of={MenuBarStories.Basic} />
+
+### With Icon
+
+Menubar с иконками в пунктах меню и вложенных подменю.
+
+<Canvas of={MenuBarStories.WithIcon} />
+
+### Кастомный шаблон
+
+Menubar с кастомным отображением пунктов: иконка, подпись и описание.
+
+<Canvas of={MenuBarStories.Custom} />
+
+### Кастомный тег (itemAs)
+
+Menubar с рендером пунктов через `<button>` вместо `<a>` с помощью пропа `itemAs`.
+
+<Canvas of={MenuBarStories.WithItemAs} />
+
+## Слоты
+
+### start, item, end
+
+Логотип в `start`, кастомная стрелка в `submenuicon` и кнопка в `end`.
+
+<Canvas of={MenuBarStories.WithSlots} />
+
+### itemicon
+
+Кастомный рендер иконки пункта меню. Слот получает `{ item }`.
+
+<Canvas of={MenuBarStories.WithItemIconSlot} />
+
+### submenuicon
+
+Кастомная иконка стрелки подменю. Слот получает `{ item, root }`, где `root: true` — верхний уровень, `root: false` — вложенное подменю.
+
+<Canvas of={MenuBarStories.WithSubmenuIconSlot} />
+
+### submenuicon (active state)
+
+Иконка подменю с вращением при открытии через `data-p-active`. Откройте `Features → Core`, чтобы увидеть nested-состояние.
+
+<Canvas of={MenuBarStories.WithSubmenuIconActiveState} />
+
+### button
+
+Кастомная кнопка раскрытия мобильного меню (видна при узком viewport). Слот получает `{ toggleCallback }`.
+
+<Canvas of={MenuBarStories.WithButtonSlot} />
+
+### buttonicon
+
+Кастомная иконка внутри кнопки мобильного меню.
 
-<Story of={MenuBarStories.Primary} />
+<Canvas of={MenuBarStories.WithButtonIconSlot} />