feat: mobile navigation

Author: niktverd

src/navigation/components/MobileNavigation/MobileNavigation.scss

@@ -15,6 +15,14 @@ $block: '.#{$ns}mobile-navigation';
     border-bottom-left-radius: $borderRadius;
     background-color: var(--yc-color-base-background);
     box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+    overflow-y: scroll;
+
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
 
     @include text-size(body-2);
     @include mobile-tablet-only();
@@ -27,9 +35,6 @@ $block: '.#{$ns}mobile-navigation';
         margin-top: $indentSM;
     }
 
-    // &__nav {
-    // }
-
     &__rows {
         position: relative;
 

src/navigation/components/MobileNavigation/MobileNavigation.tsx

@@ -1,9 +1,9 @@
-import React, {MouseEventHandler, useCallback, useRef} from 'react';
+import React from 'react';
 
-import {Popup, Portal} from '@gravity-ui/uikit';
+import {Portal} from '@gravity-ui/uikit';
 
 import Foldable from '../../../components/Foldable/Foldable';
-import {NavigationDropdownItem, NavigationItemModel, NavigationItemType} from '../../../models';
+import {NavigationItemModel} from '../../../models';
 import {block} from '../../../utils';
 import {ItemColumnName} from '../../constants';
 import {getItemClickHandler} from '../../utils';
@@ -13,42 +13,7 @@ import './MobileNavigation.scss';
 
 const b = block('mobile-navigation');
 
-// interface MobileNavigationDropdownProps {
-//     data: NavigationDropdownItem;
-//     isOpened?: boolean;
-//     onItemClick?: MouseEventHandler;
-//     onToggle?: MouseEventHandler;
-// }
-
-// const MobileNavigationDropdown: React.FC<MobileNavigationDropdownProps> = ({
-//     data,
-//     onItemClick,
-//     onToggle,
-//     isOpened = false,
-// }) => {
-//     const ref = useRef(null);
-
-//     return (
-//         <div ref={ref} className={b('dropdown')}>
-//             <NavigationItem data={data} onClick={onToggle} isOpened={isOpened} />
-//             {isOpened && (
-//                 <Popup anchorRef={ref} open={isOpened} className={b('popup')}>
-//                     {data.items.map((item) => (
-//                         <NavigationItem
-//                             key={item.text}
-//                             data={item}
-//                             className={b('dropdown-item')}
-//                             onClick={onItemClick}
-//                         />
-//                     ))}
-//                 </Popup>
-//             )}
-//         </div>
-//     );
-// };
-
-interface MobileNavigationItemProps
-    extends Pick<MobileNavigationProps, 'onActiveItemChange' | 'onClose'> {
+interface MobileNavigationItemProps extends Pick<MobileNavigationProps, 'onActiveItemChange'> {
     item: NavigationItemModel;
     column: ItemColumnName;
     index: number;
@@ -64,48 +29,13 @@ const MobileNavigationItem = ({
     activeItemId,
     onActiveItemChange,
     column,
-    onClose,
     hidePopup,
 }: MobileNavigationItemProps) => {
-    // const id = `${column}-${index}`;
-    // const isActive = id === activeItemId && isOpened;
-    // const toggleActive: MouseEventHandler = useCallback(
-    //     (e) => {
-    //         e.stopPropagation();
-
-    //         if (onActiveItemChange) {
-    //             onActiveItemChange(isActive ? undefined : `${column}-${index}`);
-    //         }
-    //     },
-    //     [onActiveItemChange, isActive, column, index],
-    // );
-
-    // const onItemClick: MouseEventHandler = useCallback(
-    //     (e) => {
-    //         toggleActive(e);
-    //         onClose();
-    //     },
-    //     [toggleActive, onClose],
-    // );
-
-    // return (
-    //     <li key={index} className={b('rows-item')}>
-    //         {item.type === NavigationItemType.Dropdown ? (
-    //             <MobileNavigationDropdown
-    //                 data={item}
-    //                 onToggle={toggleActive}
-    //                 isOpened={isActive}
-    //                 onItemClick={onItemClick}
-    //             />
-    //         ) : (
-    //             <NavigationItem data={item} onClick={onItemClick} />
-    //         )}
-    //     </li>
-    // );
-    const id = `${ItemColumnName.Left}-${index}`;
+    const id = `${column}-${index}`;
     const isActive = id === activeItemId;
+
     const onClick = getItemClickHandler({
-        column: ItemColumnName.Left,
+        column,
         index,
         activeItemId,
         onActiveItemChange,
@@ -118,8 +48,10 @@ const MobileNavigationItem = ({
             data={item}
             onClick={onClick}
             isActive={isActive}
+            isOpened={isOpened}
             hidePopup={hidePopup}
             isTopLevel={true}
+            isMobile={true}
         />
     );
 };
@@ -130,7 +62,6 @@ export interface MobileNavigationProps {
     topItems?: NavigationItemModel[];
     bottomItems?: NavigationItemModel[];
     activeItemId?: string;
-    onClose: () => void;
     onActiveItemChange: (id?: string) => void;
     hidePopup: () => void;
 }
@@ -140,7 +71,7 @@ const MobileNavigation: React.FC<MobileNavigationProps> = (props) => {
         return null;
     }
 
-    const {isOpened, topItems, bottomItems, activeItemId, onActiveItemChange, onClose, hidePopup} = props;
+    const {isOpened, topItems, bottomItems, activeItemId, onActiveItemChange, hidePopup} = props;
 
     return (
         <Portal>
@@ -155,7 +86,6 @@ const MobileNavigation: React.FC<MobileNavigationProps> = (props) => {
                                 index={index}
                                 isOpened={isOpened}
                                 activeItemId={activeItemId}
-                                onClose={onClose}
                                 onActiveItemChange={onActiveItemChange}
                                 hidePopup={hidePopup}
                             />
@@ -170,7 +100,6 @@ const MobileNavigation: React.FC<MobileNavigationProps> = (props) => {
                                 index={index}
                                 isOpened={isOpened}
                                 activeItemId={activeItemId}
-                                onClose={onClose}
                                 onActiveItemChange={onActiveItemChange}
                                 hidePopup={hidePopup}
                             />

src/navigation/components/Navigation/Navigation.tsx

@@ -45,10 +45,6 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
         setIsSidebarOpened(isOpen);
     }, []);
 
-    const hideSidebar = useCallback(() => {
-        setIsSidebarOpened(false);
-    }, []);
-
     return (
         <Grid className={b()}>
             <Row>
@@ -71,7 +67,6 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
                                 isOpened={isSidebarOpened}
                                 activeItemId={activeItemId}
                                 onActiveItemChange={onActiveItemChange}
-                                onClose={hideSidebar}
                                 hidePopup={hidePopup}
                             />
                         </OutsideClick>

src/navigation/components/NavigationItem/NavigationItem.tsx

@@ -24,6 +24,7 @@ export interface NavigationItemProps {
     hidePopup?: () => void;
     isActive?: boolean;
     isTopLevel?: boolean;
+    isMobile?: boolean;
 }
 
 //todo: add types support form component in map
@@ -41,6 +42,7 @@ const NavigationItem: React.FC<NavigationItemProps> = ({
     className,
     isActive,
     isTopLevel,
+    isMobile,
     ...props
 }: NavigationItemProps) => {
     const {type = NavigationItemType.Link} = data;
@@ -58,7 +60,7 @@ const NavigationItem: React.FC<NavigationItemProps> = ({
         <BlockIdContext.Provider value={ANALYTICS_ID}>
             <li className={b({'top-level': isTopLevel}, className)}>
                 <Component {...componentProps} className={b('content')} />
-                {isActive && (
+                {!isMobile && isActive && (
                     <div className={b('slider-container')}>
                         <div className={b('slider')} />
                     </div>

src/navigation/components/NavigationPopup/NavigationPopup.scss

@@ -9,7 +9,6 @@ $block: '.#{$ns}navigation-popup';
     margin-left: $offset;
     margin-top: -#{$indentXS};
 
-    @include desktop-only();
     @include navigation-popup();
 
     &__list {