feat(AsideHeader): bringing to a flat interface for items

Author: BlackPoretsky

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [3.6.4](https://github.com/gravity-ui/navigation/compare/v3.6.3...v3.6.4) (2025-08-11)
+
+
+### Bug Fixes
+
+* **dataui-3175:** hydration error in AsideHeader ([#455](https://github.com/gravity-ui/navigation/issues/455)) ([58cc7d1](https://github.com/gravity-ui/navigation/commit/58cc7d1ab3e5c33652e37988f04272eceaa75147))
+
+## [3.6.3](https://github.com/gravity-ui/navigation/compare/v3.6.2...v3.6.3) (2025-07-31)
+
+
+### Bug Fixes
+
+* **HotkeysPanel:** fix styles priority ([#457](https://github.com/gravity-ui/navigation/issues/457)) ([cd4da86](https://github.com/gravity-ui/navigation/commit/cd4da86553a6517f412c46f8f0c5fdc701f5b0b0))
+
+## [3.6.2](https://github.com/gravity-ui/navigation/compare/v3.6.1...v3.6.2) (2025-07-29)
+
+
+### Bug Fixes
+
+* **HotkeysPanel:** rename toggle panel hotkey prop ([#453](https://github.com/gravity-ui/navigation/issues/453)) ([d7a2f63](https://github.com/gravity-ui/navigation/commit/d7a2f63b1e60e0573c5dedd58d6846059b8dac02))
+
 ## [3.6.1](https://github.com/gravity-ui/navigation/compare/v3.6.0...v3.6.1) (2025-07-28)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/navigation",
-  "version": "3.6.1",
+  "version": "3.6.4",
   "description": "Gravity UI Navigation components",
   "license": "MIT",
   "repository": {

package.json

@@ -35,10 +35,12 @@ export type CompositeBarProps = {
     menuMoreTitle?: string;
     onMoreClick?: () => void;
     compact: boolean;
+    compositeId?: string;
 };
 
 type CompositeBarViewProps = CompositeBarProps & {
     collapseItems?: AsideHeaderItem[];
+    compositeId?: string;
 };
 
 const CompositeBarView: FC<CompositeBarViewProps> = ({
@@ -49,6 +51,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
     collapseItems,
     multipleTooltip = false,
     compact,
+    compositeId,
 }) => {
     const ref = useRef<List<AsideHeaderItem>>(null);
     const tooltipRef = useRef<HTMLDivElement>(null);
@@ -193,6 +196,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                 onMouseLeave={onTooltipMouseLeave}
             >
                 <List<AsideHeaderItem>
+                    id={compositeId}
                     ref={ref}
                     items={items}
                     selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}
@@ -235,6 +239,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
     onMoreClick,
     multipleTooltip = false,
     compact,
+    compositeId,
 }) => {
     if (items.length === 0) {
         return null;
@@ -260,6 +265,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
                             return (
                                 <div style={{width, height}}>
                                     <CompositeBarView
+                                        compositeId={compositeId}
                                         type="menu"
                                         compact={compact}
                                         items={listItems}

src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx

@@ -12,6 +12,8 @@ import {CompositeBar} from './CompositeBar';
 import {Header} from './Header';
 import {Panels} from './Panels';
 
+const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
+
 export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
     const {
         size,
@@ -50,6 +52,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
                     <Header />
                     {visibleMenuItems?.length ? (
                         <CompositeBar
+                            compositeId={MENU_ITEMS_COMPOSITE_ID}
                             type="menu"
                             compact={compact}
                             items={visibleMenuItems}

src/components/AsideHeader/components/FirstPanel.tsx

@@ -38,9 +38,7 @@ const Template: StoryFn<FooterItemProps> = (args) => <FooterItem {...args} />;
 export const Default = Template.bind({});
 Default.args = {
     compact: false,
-    item: {
-        id: 'settings',
-        title: 'Settings',
-        icon: Gear,
-    },
+    id: 'settings',
+    title: 'Settings',
+    icon: Gear,
 };

src/components/AsideHeader/components/FooterItem/__stories__/FooterItem.stories.tsx

@@ -13,6 +13,7 @@ import {CompositeBar} from './CompositeBar';
 import headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';
 
 const DEFAULT_SUBHEADER_ITEMS: AsideHeaderItem[] = [];
+const HEADER_COMPOSITE_ID = 'gravity-ui/navigation-header-composite-bar';
 
 export const Header = () => {
     const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} =
@@ -40,6 +41,7 @@ export const Header = () => {
             )}
 
             <CompositeBar
+                compositeId={HEADER_COMPOSITE_ID}
                 type="subheader"
                 compact={compact}
                 items={subheaderItems || DEFAULT_SUBHEADER_ITEMS}

src/components/AsideHeader/components/Header.tsx

@@ -40,7 +40,7 @@ $block: '.#{variables.$ns}hotkeys-panel';
         overflow-y: auto;
     }
 
-    &__item {
+    &__item[class] {
         height: auto;
         padding: var(--g-spacing-2) 0;
         margin: 0 var(--hotkeys-panel-horizontal-padding);