feat: navigation dropdown refactoring (#392)

* feat: navigation dropdown refactoring

src/hooks/useHeightCalculator.ts

@@ -26,7 +26,7 @@ const useHeightCalculator: (
     useEffect(() => {
         const handleResize = _.debounce(calculateContainerHeight, recalculateOnResizeDelay);
 
-        calculateContainerHeight();
+        handleResize();
 
         window.addEventListener('resize', handleResize, {passive: true});
         return () => {

src/models/navigation.ts

@@ -52,6 +52,8 @@ export interface NavigationButtonItem extends ButtonProps {
 export interface NavigationDropdownItem extends NavigationItemBase {
     type: NavigationItemType.Dropdown;
     items: NavigationLinkItem[];
+    hidePopup: () => void;
+    isActive: boolean;
 }
 
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
@@ -69,9 +71,7 @@ export type NavigationItemData =
     | NavigationLinkItem
     | NavigationButtonItem
     | NavigationSocialItem
-    | DropdownItemData;
-
-export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+    | NavigationDropdownItem;
 
 export interface NavigationLogoData {
     icon: ImageProps;

src/navigation/components/Header/Header.scss → src/navigation/components/DesktopNavigation/DesktopNavigation.scss

@@ -1,27 +1,9 @@
 @import '../../../../styles/variables';
 @import '../../../../styles/mixins';
 
-$block: '.#{$ns}header';
+$block: '.#{$ns}desktop-navigation';
 
 #{$block} {
-    $root: &;
-
-    position: sticky;
-    z-index: 98;
-    top: 0;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    height: var(--header-height);
-
-    background-color: var(--yc-color-base-background);
-
-    &_with-border {
-        box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
-    }
-
     &__wrapper {
         display: flex;
         justify-content: space-between;
@@ -76,11 +58,26 @@ $block: '.#{$ns}header';
         margin-right: $indentM;
     }
 
-    &__buttons {
+    &__button {
+        margin-top: 0;
+    }
+
+    &__logo {
+        margin: 0 $indentM 0 0;
+
+        cursor: pointer;
+    }
+
+    &__buttons,
+    &__links {
         display: flex;
         align-items: center;
-        @include desktop-only();
+
         @include reset-list-style();
+    }
+
+    &__buttons {
+        @include desktop-only();
 
         & > * {
             &:not(:last-child) {
@@ -89,22 +86,18 @@ $block: '.#{$ns}header';
         }
     }
 
-    &__buttons-item {
+    &__links {
         position: relative;
 
-        &:not(:last-child) {
-            margin-right: $indentS;
-        }
-    }
-
-    &__button {
-        margin-top: 0;
+        @include text-size(body-2);
     }
 
-    &__logo {
-        margin: 0 $indentM 0 0;
+    &__item {
+        position: relative;
 
-        cursor: pointer;
+        &:not(:last-child) {
+            margin-right: $indentS;
+        }
     }
 
     @media (max-width: map-get($gridBreakpoints, 'md') - 1) {

src/navigation/components/DesktopNavigation/DesktopNavigation.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import _ from 'lodash';
+
+import OverflowScroller from '../../../components/OverflowScroller/OverflowScroller';
+import {block} from '../../../utils';
+import {DesktopNavigationProps, ItemColumnName, NavigationLayout} from '../../models';
+import Logo from '../Logo/Logo';
+import {MobileMenuButton} from '../MobileMenuButton/MobileMenuButton';
+import {NavigationList} from '../NavigationList/NavigationList';
+
+import './DesktopNavigation.scss';
+
+const b = block('desktop-navigation');
+
+const DesktopNavigation: React.FC<DesktopNavigationProps> = ({
+    logo,
+    leftItemsWithIconSize,
+    rightItemsWithIconSize,
+    isSidebarOpened,
+    onSidebarOpenedChange,
+    onActiveItemChange,
+    activeItemId,
+}) => (
+    <div className={b('wrapper')}>
+        {logo && (
+            <div className={b('left')}>
+                <Logo {...logo} className={b('logo')} />
+            </div>
+        )}
+        <div className={b('navigation-container')}>
+            <OverflowScroller className={b('navigation')} onScrollStart={onActiveItemChange}>
+                <NavigationList
+                    items={leftItemsWithIconSize}
+                    onActiveItemChange={onActiveItemChange}
+                    className={b('links')}
+                    itemClassName={b('item')}
+                    column={ItemColumnName.Left}
+                    activeItemId={activeItemId}
+                    menuLayout={NavigationLayout.Desktop}
+                />
+            </OverflowScroller>
+        </div>
+        <div className={b('right')}>
+            <MobileMenuButton
+                isSidebarOpened={isSidebarOpened}
+                onSidebarOpenedChange={onSidebarOpenedChange}
+            />
+            {rightItemsWithIconSize && (
+                <NavigationList
+                    onActiveItemChange={onActiveItemChange}
+                    column={ItemColumnName.Right}
+                    items={rightItemsWithIconSize}
+                    activeItemId={activeItemId}
+                    className={b('buttons')}
+                    itemClassName={b('item')}
+                    menuLayout={NavigationLayout.Desktop}
+                />
+            )}
+        </div>
+    </div>
+);
+
+export default DesktopNavigation;

src/navigation/components/MobileMenuButton/MobileMenuButton.scss

@@ -0,0 +1,9 @@
+@import '../../../../styles/mixins';
+
+$block: '.#{$ns}mobile-menu-button';
+
+#{$block} {
+    @include add-specificity(&) {
+        @include mobile-tablet-only();
+    }
+}