feat: added scroll for navigation items

Author: olaslo

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

@@ -9,7 +9,7 @@ import {PageLayout} from '../components/PageLayout/PageLayout';
 import {PageLayoutAside} from '../components/PageLayout/PageLayoutAside';
 
 import {AsideHeaderShowcase} from './AsideHeaderShowcase';
-import {DEFAULT_LOGO, menuItemsClamped, menuItemsShowcase} from './moc';
+import {DEFAULT_LOGO, menuItemsClamped, menuItemsMany, menuItemsShowcase} from './moc';
 
 import logoIcon from '../../../../.storybook/assets/logo.svg';
 
@@ -237,3 +237,48 @@ export const CollapseButtonWrapper = CollapseButtonWrapperTemplate.bind({});
 CollapseButtonWrapper.args = {
     initialCompact: false,
 };
+
+const ManyItemsTemplate: StoryFn = (args) => {
+    const [compact, setCompact] = React.useState<boolean>(args.initialCompact);
+
+    return (
+        <PageLayout compact={compact}>
+            <PageLayoutAside
+                headerDecoration
+                menuItems={menuItemsMany}
+                logo={DEFAULT_LOGO}
+                onChangeCompact={setCompact}
+                {...args}
+            />
+
+            <PageLayout.Content>
+                <div style={{padding: 16}}>
+                    <Button onClick={() => setCompact((prev) => !prev)}>Toggle compact</Button>
+                    <div style={{marginTop: 16}}>
+                        <Text variant="subheader-2">
+                            Scroll demonstration with many navigation items
+                        </Text>
+                        <Text color="secondary" style={{marginTop: 8}}>
+                            Total items: {menuItemsMany?.length || 0}. On low screens, items scroll
+                            with invisible scrollbar instead of collapsing into &quot;...&quot;
+                        </Text>
+                    </div>
+                </div>
+            </PageLayout.Content>
+        </PageLayout>
+    );
+};
+
+export const ManyItems = ManyItemsTemplate.bind({});
+ManyItems.args = {
+    initialCompact: false,
+};
+ManyItems.parameters = {
+    docs: {
+        description: {
+            story:
+                'Demonstration of scroll functionality with many navigation items. ' +
+                'On low screens, all items remain accessible through scrolling with invisible scrollbar.',
+        },
+    },
+};

src/components/AsideHeader/__stories__/moc.tsx

@@ -158,3 +158,68 @@ export const menuItemsClamped = MENU_ITEMS_CLAMPED.concat({
         rightAdornment: renderTag('new'),
     })),
 );
+
+export const generateManyMenuItems = (count = 20): AsideHeaderProps['menuItems'] => {
+    const items: AsideHeaderProps['menuItems'] = [];
+
+    const sections = [
+        'Dashboard',
+        'Analytics',
+        'Reports',
+        'Settings',
+        'Users',
+        'Projects',
+        'Tasks',
+        'Calendar',
+        'Messages',
+        'Files',
+        'Help',
+        'Support',
+    ];
+
+    sections.forEach((section, index) => {
+        items.push({
+            id: `section-${index}`,
+            title: section,
+            icon: Gear,
+            current: index === 0,
+            onItemClick(_item) {},
+        });
+
+        if (index % 3 === 0) {
+            const subItems = [`${section} Overview`, `${section} Details`, `${section} Settings`];
+
+            subItems.forEach((subItem, subIndex) => {
+                items.push({
+                    id: `section-${index}-sub-${subIndex}`,
+                    title: subItem,
+                    icon: Gear,
+                    onItemClick(_item) {},
+                });
+            });
+        }
+
+        if ((index + 1) % 4 === 0 && index < sections.length - 1) {
+            items.push({
+                id: `divider-${index}`,
+                title: '-',
+                type: 'divider',
+            });
+        }
+    });
+
+    const additionalCount = Math.max(0, count - items.length);
+    for (let i = 0; i < additionalCount; i++) {
+        items.push({
+            id: `additional-${i}`,
+            title: `Additional Item ${i + 1}`,
+            icon: Gear,
+            rightAdornment: i % 5 === 0 ? renderTag('New') : undefined,
+            onItemClick(_item) {},
+        });
+    }
+
+    return items;
+};
+
+export const menuItemsMany = generateManyMenuItems(25);

src/components/AsideHeader/components/CompositeBar/CompositeBar.scss

@@ -5,11 +5,24 @@ $block: '.#{variables.$ns}composite-bar';
 #{$block} {
     $class: &;
 
-    flex: 1 0 auto;
+    flex: 1 1 auto;
     width: 100%;
     min-height: 40px;
+    display: flex;
+    flex-direction: column;
 
     & &__root-menu-item[class] {
         background-color: transparent;
     }
+
+    &_scrollable {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
 }

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

@@ -1,7 +1,6 @@
 import React, {FC, ReactNode, useCallback, useContext, useRef} from 'react';
 
 import {List} from '@gravity-ui/uikit';
-import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
 
 import {ASIDE_HEADER_COMPACT_WIDTH} from '../../../constants';
 import {block} from '../../../utils/cn';
@@ -10,14 +9,7 @@ import {AsideHeaderItem} from '../../types';
 import {Item, ItemProps} from './Item/Item';
 import {MultipleTooltip, MultipleTooltipContext, MultipleTooltipProvider} from './MultipleTooltip';
 import {COLLAPSE_ITEM_ID} from './constants';
-import {
-    getAutosizeListItems,
-    getItemHeight,
-    getItemsHeight,
-    getItemsMinHeight,
-    getMoreButtonItem,
-    getSelectedItemIndex,
-} from './utils';
+import {getItemHeight, getItemsHeight, getSelectedItemIndex} from './utils';
 
 import './CompositeBar.scss';
 
@@ -39,7 +31,6 @@ export type CompositeBarProps = {
 };
 
 type CompositeBarViewProps = CompositeBarProps & {
-    collapseItems?: AsideHeaderItem[];
     compositeId?: string;
 };
 
@@ -48,7 +39,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
     items,
     onItemClick,
     onMoreClick,
-    collapseItems,
     multipleTooltip = false,
     compact,
     compositeId,
@@ -220,7 +210,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                             onMouseEnter={onMouseEnterByIndex(itemIndex)}
                             onMouseLeave={onMouseLeave}
                             onItemClick={onItemClickByIndex(itemIndex, item.onItemClick)}
-                            collapseItems={collapseItems}
                         />
                     )}
                 />
@@ -240,7 +229,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
 export const CompositeBar: FC<CompositeBarProps> = ({
     type,
     items,
-    menuMoreTitle,
     onItemClick,
     onMoreClick,
     multipleTooltip = false,
@@ -253,38 +241,17 @@ export const CompositeBar: FC<CompositeBarProps> = ({
     let node: ReactNode;
 
     if (type === 'menu') {
-        const minHeight = getItemsMinHeight(items);
-        const collapseItem = getMoreButtonItem(menuMoreTitle);
         node = (
-            <div className={b({autosizer: true})} style={{minHeight}}>
-                {items.length !== 0 && (
-                    <AutoSizer>
-                        {(size: Size) => {
-                            const width = Number.isNaN(size.width) ? 0 : size.width;
-                            const height = Number.isNaN(size.height) ? 0 : size.height;
-
-                            const {listItems, collapseItems} = getAutosizeListItems(
-                                items,
-                                height,
-                                collapseItem,
-                            );
-                            return (
-                                <div style={{width, height}}>
-                                    <CompositeBarView
-                                        compositeId={compositeId}
-                                        type="menu"
-                                        compact={compact}
-                                        items={listItems}
-                                        onItemClick={onItemClick}
-                                        onMoreClick={onMoreClick}
-                                        collapseItems={collapseItems}
-                                        multipleTooltip={multipleTooltip}
-                                    />
-                                </div>
-                            );
-                        }}
-                    </AutoSizer>
-                )}
+            <div className={b({scrollable: true})}>
+                <CompositeBarView
+                    compositeId={compositeId}
+                    type="menu"
+                    compact={compact}
+                    items={items}
+                    onItemClick={onItemClick}
+                    onMoreClick={onMoreClick}
+                    multipleTooltip={multipleTooltip}
+                />
             </div>
         );
     } else {