feat: add mobile header items and renderNavigation method (#989)

* refactor: component Control using Button from uikit

* refactor: add exports in navigation

* feat: add mobile header items

* refactor: navigation component Navigation

* refactor: replace ControlProps.size with type on ButtonSize from uikit

* revert: component  MobileMenuButton size

* revert: menuLayout mobileHorizontal

* refactor: rename mobileHeaderItems to customMobileHeaderItems

* Revert "refactor: component Control using Button from uikit"

This reverts commit 82b85ab.

* refactor: add JSDoc description for customMobileHeaderItems props

* revert: change size in MobileMenuButton

* refactor: move the custom hooks to a separate files

* refactor: replace hooks into navgiation folder

* fix: mobile header flex model

* feat: add  story in Navigation.story.book.tsx

* fix: change customMobileHeader items storie on one icon in list

* fix: type error

* feat: add padding to mobile header items

---------

Co-authored-by: Ruslan Bagautdinov <[email protected]>

Author: JeikZim

src/models/navigation.ts

@@ -91,6 +91,13 @@ export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<Navi
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
+
+    /**
+     * Items for the navigation header on mobile devices.
+     * They are located to the right of the Logo and to the left of the MobileMenuButton.
+     * @type {NavigationItemModel[]}
+     */
+    customMobileHeaderItems?: NavigationItemModel[];
     iconSize?: number;
     withBorder?: boolean;
     withBorderOnScroll?: boolean;
@@ -116,4 +123,5 @@ export interface NavigationData {
     logo: ThemedNavigationLogoData;
     header: HeaderData;
     footer?: FooterData;
+    renderNavigation?: () => React.ReactNode;
 }

src/navigation/__stories__/CustomButton/CustomButton.scss

@@ -0,0 +1,9 @@
+.custom-button {
+    white-space: nowrap;
+
+    transition: transform 300ms;
+
+    &_active {
+        transform: scale(0.9);
+    }
+}

src/navigation/__stories__/CustomButton/CustomButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {TriangleUp} from '@gravity-ui/icons';
+import {Button} from '@gravity-ui/uikit';
+
+import {cn} from '../../../utils';
+import {NavigationItemProps} from '../../models';
+
+import './CustomButton.scss';
+
+const b = cn('custom-button');
+
+type DCDropdownNavigationItemProps = Pick<NavigationItemProps, 'onClick' | 'isActive'>;
+
+export const CustomButton: React.FC<DCDropdownNavigationItemProps> = (props) => {
+    const {onClick, isActive} = props;
+
+    return (
+        <Button size="l" view="flat" className={b({active: isActive})} onClick={onClick}>
+            <Button.Icon>
+                <TriangleUp height={20} width={20} />
+            </Button.Icon>
+        </Button>
+    );
+};

src/navigation/__stories__/Navigation.stories.tsx

@@ -5,6 +5,7 @@ import {Meta, StoryFn} from '@storybook/react';
 import {PageConstructor} from '../../containers/PageConstructor';
 import {CustomConfig, NavigationData} from '../../models';
 
+import {CustomButton} from './CustomButton/CustomButton';
 import {CustomComponent} from './CustomComponent/CustomComponent';
 
 import data from './data.json';
@@ -21,6 +22,7 @@ const DefaultTemplate: StoryFn<{
 export const DefaultNavigation = DefaultTemplate.bind({});
 export const NavigationWithBorder = DefaultTemplate.bind({});
 export const NavigationWithCustomItems = DefaultTemplate.bind({});
+export const NavigationWithCustomMobileHeaderItems = DefaultTemplate.bind({});
 
 DefaultNavigation.args = {
     navigation: data.navigation as NavigationData,
@@ -56,3 +58,18 @@ NavigationWithCustomItems.args = {
         },
     } as NavigationData,
 };
+
+NavigationWithCustomMobileHeaderItems.args = {
+    custom: {
+        navigation: {
+            'custom-item': CustomButton,
+        },
+    },
+    navigation: {
+        ...data.navigation,
+        header: {
+            ...data.navigation.header,
+            customMobileHeaderItems: [{type: 'custom-item'}],
+        },
+    } as unknown as NavigationData,
+};

src/navigation/components/DesktopNavigation/DesktopNavigation.scss

@@ -41,20 +41,47 @@ $block: '.#{$ns}desktop-navigation';
         }
     }
 
+    &__mobile-navigation {
+        @include add-specificity(&) {
+            justify-content: flex-end;
+
+            @include mobile-tablet-only();
+        }
+
+        &-container {
+            padding-right: $indentXXXS;
+        }
+
+        &-container:has(.#{$ns}overflow-scroller__arrow) & {
+            justify-content: flex-start;
+        }
+
+        &-container:has(.#{$ns}overflow-scroller__arrow_type_right) {
+            padding-right: $indentXS;
+        }
+    }
+
     &__right {
-        flex: 0;
         justify-content: flex-end;
 
         @include text-size(body-2);
+
+        @media (max-width: map-get($gridBreakpoints,'md') - 1) {
+            flex: 3 0 0;
+            max-width: 50%;
+        }
     }
 
-    &__navigation-container {
+    &__navigation-container,
+    &__mobile-navigation-container {
         display: flex;
         overflow-x: hidden;
         flex: 1 0 0;
         justify-content: space-between;
         align-items: center;
+    }
 
+    &__navigation-container {
         margin-right: $indentM;
     }
 
@@ -68,8 +95,9 @@ $block: '.#{$ns}desktop-navigation';
         cursor: pointer;
     }
 
+    &__links,
     &__buttons,
-    &__links {
+    &__mobile-buttons {
         display: flex;
         align-items: center;
 
@@ -86,6 +114,16 @@ $block: '.#{$ns}desktop-navigation';
         }
     }
 
+    &__mobile-buttons {
+        @include mobile-tablet-only();
+    }
+
+    &__mobile-buttons &__item {
+        &:not(:last-child) {
+            margin-right: 0;
+        }
+    }
+
     &__links {
         position: relative;
 
@@ -105,6 +143,15 @@ $block: '.#{$ns}desktop-navigation';
             justify-content: flex-end;
         }
 
+        &__navigation-container,
+        &__mobile-navigation-container {
+            justify-content: flex-end;
+        }
+
+        &__navigation-container {
+            flex: 0 0 0;
+        }
+
         &__left {
             flex: 1 0 0;
         }

src/navigation/components/DesktopNavigation/DesktopNavigation.tsx

@@ -11,10 +11,11 @@ import './DesktopNavigation.scss';
 
 const b = block('desktop-navigation');
 
-const DesktopNavigation: React.FC<DesktopNavigationProps> = ({
+export const DesktopNavigation: React.FC<DesktopNavigationProps> = ({
     logo,
     leftItemsWithIconSize,
     rightItemsWithIconSize,
+    customMobileHeaderItems,
     isSidebarOpened,
     onSidebarOpenedChange,
     onActiveItemChange,
@@ -40,6 +41,25 @@ const DesktopNavigation: React.FC<DesktopNavigationProps> = ({
             </OverflowScroller>
         </div>
         <div className={b('right')}>
+            {customMobileHeaderItems && (
+                <div className={b('mobile-navigation-container')}>
+                    <OverflowScroller
+                        className={b('mobile-navigation')}
+                        onScrollStart={onActiveItemChange}
+                        arrowSize={18}
+                    >
+                        <NavigationList
+                            items={customMobileHeaderItems}
+                            onActiveItemChange={onActiveItemChange}
+                            className={b('mobile-buttons')}
+                            itemClassName={b('item')}
+                            column={ItemColumnName.Left}
+                            activeItemId={activeItemId}
+                            menuLayout={NavigationLayout.Dropdown}
+                        />
+                    </OverflowScroller>
+                </div>
+            )}
             <MobileMenuButton
                 isSidebarOpened={isSidebarOpened}
                 onSidebarOpenedChange={onSidebarOpenedChange}

src/navigation/components/Logo/Logo.tsx

@@ -19,7 +19,7 @@ export type LogoProps = ThemedNavigationLogoData & {
     alt?: string;
 };
 
-const Logo: React.FC<LogoProps> = ({alt = i18n('image-alt'), ...restProps}) => {
+export const Logo: React.FC<LogoProps> = ({alt = i18n('image-alt'), ...restProps}) => {
     const props: LogoProps = {...restProps, alt};
     const {hostname, Link} = useContext(LocationContext);
     const theme = useTheme();

src/navigation/components/MobileNavigation/MobileNavigation.tsx

@@ -12,7 +12,7 @@ import './MobileNavigation.scss';
 
 const b = block('mobile-navigation');
 
-const MobileNavigation: React.FC<MobileNavigationProps> = ({
+export const MobileNavigation: React.FC<MobileNavigationProps> = ({
     isOpened,
     topItems,
     bottomItems,

src/navigation/components/Navigation/Navigation.tsx

@@ -1,68 +1,39 @@
-import React, {useEffect, useMemo, useState} from 'react';
-
-import debounce from 'lodash/debounce';
+import React, {useState} from 'react';
 
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import {Col, Grid, Row} from '../../../grid';
 import {ClassNameProps, HeaderData, ThemedNavigationLogoData} from '../../../models';
 import {block} from '../../../utils';
-import {getNavigationItemWithIconSize} from '../../utils';
+import {useActiveNavItem, useShowBorder} from '../../hooks';
 import DesktopNavigation from '../DesktopNavigation/DesktopNavigation';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
 
 import './Navigation.scss';
 
 const b = block('navigation');
 
-export interface NavigationProps extends ClassNameProps {
+export interface NavigationComponentProps extends ClassNameProps {
     logo: ThemedNavigationLogoData;
     data: HeaderData;
 }
 
-export const Navigation: React.FC<NavigationProps> = ({data, logo, className}) => {
+export const Navigation: React.FC<NavigationComponentProps> = ({data, logo, className}) => {
     const {
         leftItems,
         rightItems,
+        customMobileHeaderItems,
         iconSize = 20,
         withBorder = false,
         withBorderOnScroll = true,
     } = data;
-    const [isSidebarOpened, setIsSidebarOpened] = useState(false);
-    const [activeItemId, setActiveItemId] = useState<string | undefined>(undefined);
-    const [showBorder, setShowBorder] = useState(withBorder);
-
-    const getNavigationItem = getNavigationItemWithIconSize(iconSize);
-
-    const leftItemsWithIconSize = useMemo(
-        () => leftItems.map(getNavigationItem),
-        [getNavigationItem, leftItems],
-    );
-    const rightItemsWithIconSize = useMemo(
-        () => rightItems?.map(getNavigationItem),
-        [getNavigationItem, rightItems],
-    );
 
-    const onActiveItemChange = (id?: string) => {
-        setActiveItemId(id);
-    };
+    const [isSidebarOpened, setIsSidebarOpened] = useState(false);
+    const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);
+    const {activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange} =
+        useActiveNavItem(iconSize, leftItems, rightItems);
 
     const onSidebarOpenedChange = (isOpen: boolean) => setIsSidebarOpened(isOpen);
 
-    useEffect(() => {
-        if (!withBorderOnScroll) return () => {};
-
-        const showBorderOnScroll = () => {
-            if (!withBorder) {
-                setShowBorder(window.scrollY > 0);
-            }
-        };
-
-        const scrollHandler = debounce(showBorderOnScroll, 20);
-
-        window.addEventListener('scroll', scrollHandler, {passive: true});
-        return () => window.removeEventListener('scroll', scrollHandler);
-    });
-
     return (
         <Grid className={b({'with-border': showBorder}, className)}>
             <Row>
@@ -74,6 +45,7 @@ export const Navigation: React.FC<NavigationProps> = ({data, logo, className}) =
                             onActiveItemChange={onActiveItemChange}
                             leftItemsWithIconSize={leftItemsWithIconSize}
                             rightItemsWithIconSize={rightItemsWithIconSize}
+                            customMobileHeaderItems={customMobileHeaderItems}
                             isSidebarOpened={isSidebarOpened}
                             onSidebarOpenedChange={onSidebarOpenedChange}
                         />

src/navigation/components/NavigationItem/NavigationItem.tsx

@@ -19,7 +19,7 @@ const nonComplexNavigationItemTypes = NavigationItemTypes.filter(
     (type) => type !== NavigationItemType.Dropdown,
 );
 
-const NavigationItem: React.FC<NavigationItemProps> = ({
+export const NavigationItem: React.FC<NavigationItemProps> = ({
     data,
     className,
     menuLayout,

src/navigation/components/NavigationListItem/NavigationListItem.tsx

@@ -4,7 +4,7 @@ import {NavigationListItemProps} from '../../models';
 import {getItemClickHandler} from '../../utils';
 import NavigationItem from '../NavigationItem';
 
-const NavigationListItem: React.FC<NavigationListItemProps> = ({
+export const NavigationListItem: React.FC<NavigationListItemProps> = ({
     column,
     index,
     activeItemId,

src/navigation/components/Standalone/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import RootCn from '../../../components/RootCn';
 
-import Navigation, {NavigationProps} from './../../components/Navigation/Navigation';
+import Navigation, {NavigationComponentProps} from './../../components/Navigation/Navigation';
 
-const Standalone = (props: NavigationProps) => (
+const Standalone = (props: NavigationComponentProps) => (
     <RootCn>
         <Navigation {...props} />
     </RootCn>

src/navigation/containers/Layout/Layout.tsx

@@ -15,13 +15,16 @@ export interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({children, navigation}) => (
     <div className={b()}>
-        {navigation && (
-            <Navigation
-                data={navigation.header}
-                logo={navigation.logo}
-                className={b('navigation')}
-            />
-        )}
+        {navigation &&
+            (navigation.renderNavigation ? (
+                navigation.renderNavigation()
+            ) : (
+                <Navigation
+                    data={navigation.header}
+                    logo={navigation.logo}
+                    className={b('navigation')}
+                />
+            ))}
         <main className={b('content')}>{children}</main>
     </div>
 );

src/navigation/hooks/index.ts

@@ -0,0 +1,2 @@
+export {default as useActiveNavItem} from './useActiveNavItem';
+export {default as useShowBorder} from './useShowBorder';