fix: simplify custom navItem story

src/navigation/__stories__/CustomComponent/CustomComponent.scss

@@ -1,51 +1,11 @@
 @import '../../../../styles/variables';
 
 .dropdown-navigation-item {
-    &__control {
-        text-wrap: nowrap;
-        display: flex;
-        align-items: center;
+    text-wrap: nowrap;
+    display: flex;
+    align-items: center;
 
-        &:hover {
-            color: var(--g-color-text-brand);
-        }
-
-        &_active {
-            color: var(--g-color-text-brand-heavy);
-        }
-    }
-
-    &__text {
-        margin-right: var(--g-spacing-1);
-    }
-
-    &__arrow {
-        margin-left: auto;
-    }
-
-    &__dropdown {
-        width: 100%;
-    }
-
-    &__dropdown-content-wrapper {
-        background-color: transparent;
-        border-color: transparent;
-        border-radius: 0px;
-        border-width: 0px;
-        box-shadow: none;
-    }
-
-    &__dropdown-content-container {
-        padding: 0 var(--g-spacing-5);
-    }
-
-    &__dropdown-content {
-        background-color: var(--g-color-base-brand);
-        padding: var(--g-spacing-5) var(--g-spacing-3);
-        border-radius: 24px;
-    }
-
-    &__foldable-content-container {
-        padding: 0px;
+    &:hover {
+        color: var(--g-color-text-brand);
     }
 }

src/navigation/__stories__/CustomComponent/CustomComponent.tsx

@@ -1,63 +1,26 @@
-import React, {useRef} from 'react';
+import React from 'react';
 
-import {Popup} from '@gravity-ui/uikit';
-
-import {Foldable, ToggleArrow} from '../../../components';
-import {Col, Grid, Row} from '../../../grid';
-import {NavigationDropdownItem} from '../../../models';
 import {cn} from '../../../utils';
-import {NavigationItemProps, NavigationLayout} from '../../models';
-
-import {ItemListContent} from './components/ItemListContent/ItemListContent';
+import {NavigationItemProps} from '../../models';
 
 import './CustomComponent.scss';
 
 const b = cn('dropdown-navigation-item');
 
 type DCDropdownNavigationItemProps = Pick<
     NavigationItemProps,
-    'onClick' | 'isActive' | 'hidePopup' | 'menuLayout'
-> &
-    NavigationDropdownItem;
+    'onClick' | 'isActive' | 'menuLayout'
+>;
 
 export const CustomComponent: React.FC<DCDropdownNavigationItemProps> = (props) => {
-    const {onClick, hidePopup, isActive, items, text, menuLayout} = props;
-    const ref = useRef<HTMLDivElement>(null);
-
+    const {onClick, isActive, menuLayout} = props;
     return (
-        <React.Fragment>
-            <div ref={ref} className={b('control', {active: isActive})} onClick={onClick}>
-                <span className={b('text')}>{text}</span>{' '}
-                <ToggleArrow
-                    className={b('arrow')}
-                    type={'vertical'}
-                    iconType="navigation"
-                    open={isActive}
-                />
-            </div>
-            {menuLayout === NavigationLayout.Desktop ? (
-                <Popup
-                    anchorRef={ref}
-                    className={b('dropdown')}
-                    contentClassName={b('dropdown-content-wrapper')}
-                    open={isActive || false}
-                    onClose={hidePopup}
-                >
-                    <Grid containerClass={b('dropdown-content-container')}>
-                        <Row className={b('dropdown-content')}>
-                            <Col>
-                                <ItemListContent items={items} />
-                            </Col>
-                        </Row>
-                    </Grid>
-                </Popup>
-            ) : (
-                <Foldable isOpened={isActive || false}>
-                    <Grid containerClass={b('foldable-content-container')}>
-                        <ItemListContent items={items} mobile />
-                    </Grid>
-                </Foldable>
-            )}
-        </React.Fragment>
+        <div className={b({active: isActive})} onClick={onClick}>
+            <span className={b('text')}>Custom Item</span>
+            {' ('}
+            {`${menuLayout}`}
+            {isActive && ' - active'}
+            {')'}
+        </div>
     );
 };

src/navigation/__stories__/Navigation.stories.tsx

@@ -39,19 +39,17 @@ NavigationWithBorder.args = {
 NavigationWithCustomItems.args = {
     custom: {
         navigation: {
-            'custom-dropdown': CustomComponent,
+            'custom-item': CustomComponent,
         },
     },
     navigation: {
         ...data.navigation,
         header: {
             ...data.navigation.header,
-            leftItems: [
-                ...data.navigation.header.leftItems,
+            rightItems: [
+                ...data.navigation.header.rightItems,
                 {
-                    ...data.navigation.header.leftItems[0],
-                    type: 'custom-dropdown',
-                    text: `${data.navigation.header.leftItems[0].text} (Custom)`,
+                    type: 'custom-item',
                 },
             ],
         },