From 79dc2bc3b3f77113e4508c587e51b8f48553c62b Mon Sep 17 00:00:00 2001
From: Nik Tverd <niktverd@yandex-team.ru>
Date: Tue, 4 Jul 2023 23:12:44 +0600
Subject: [PATCH] fixup! feat: navigation dropdown refactoring

---
 .../MobileNavigation/MobileNavigation.scss    |  1 +
 .../MobileNavigation/MobileNavigation.tsx     | 55 +++----------------
 .../MobileNavigationItem.scss                 | 11 ++++
 .../MobileNavigationItem.tsx                  | 54 ++++++++++++++++++
 4 files changed, 73 insertions(+), 48 deletions(-)
 create mode 100644 src/navigation/components/MobileNavigation/components/MobileNavigationItem/MobileNavigationItem.scss
 create mode 100644 src/navigation/components/MobileNavigation/components/MobileNavigationItem/MobileNavigationItem.tsx

diff --git a/src/navigation/components/MobileNavigation/MobileNavigation.scss b/src/navigation/components/MobileNavigation/MobileNavigation.scss
index 5fc7dec5d..441cd2fdc 100644
--- a/src/navigation/components/MobileNavigation/MobileNavigation.scss
+++ b/src/navigation/components/MobileNavigation/MobileNavigation.scss
@@ -15,6 +15,7 @@ $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);
+    max-height: calc(100vh - 2 * var(--header-height));
     overflow-y: scroll;
 
     scrollbar-width: none;
diff --git a/src/navigation/components/MobileNavigation/MobileNavigation.tsx b/src/navigation/components/MobileNavigation/MobileNavigation.tsx
index 24cec731b..120b86853 100644
--- a/src/navigation/components/MobileNavigation/MobileNavigation.tsx
+++ b/src/navigation/components/MobileNavigation/MobileNavigation.tsx
@@ -6,63 +6,22 @@ import Foldable from '../../../components/Foldable/Foldable';
 import {NavigationItemModel} from '../../../models';
 import {block} from '../../../utils';
 import {ItemColumnName} from '../../constants';
-import {getItemClickHandler} from '../../utils';
-import NavigationItem from '../NavigationItem/NavigationItem';
+
+import {
+    MobileNavigationItem,
+    MobileNavigationItemProps,
+} from './components/MobileNavigationItem/MobileNavigationItem';
 
 import './MobileNavigation.scss';
 
 const b = block('mobile-navigation');
-
-interface MobileNavigationItemProps extends Pick<MobileNavigationProps, 'onActiveItemChange'> {
-    item: NavigationItemModel;
-    column: ItemColumnName;
-    index: number;
-    isOpened?: boolean;
-    activeItemId?: string;
-    hidePopup: () => void;
-}
-
-const MobileNavigationItem = ({
-    item,
-    index,
-    isOpened,
-    activeItemId,
-    onActiveItemChange,
-    column,
-    hidePopup,
-}: MobileNavigationItemProps) => {
-    const id = `${column}-${index}`;
-    const isActive = id === activeItemId;
-
-    const onClick = getItemClickHandler({
-        column,
-        index,
-        activeItemId,
-        onActiveItemChange,
-    });
-
-    return (
-        <NavigationItem
-            key={index}
-            className={b('rows-item')}
-            data={item}
-            onClick={onClick}
-            isActive={isActive}
-            isOpened={isOpened}
-            hidePopup={hidePopup}
-            isTopLevel={true}
-            isMobile={true}
-        />
-    );
-};
-
-export interface MobileNavigationProps {
+export interface MobileNavigationProps
+    extends Pick<MobileNavigationItemProps, 'onActiveItemChange'> {
     className?: string;
     isOpened?: boolean;
     topItems?: NavigationItemModel[];
     bottomItems?: NavigationItemModel[];
     activeItemId?: string;
-    onActiveItemChange: (id?: string) => void;
     hidePopup: () => void;
 }
 
diff --git a/src/navigation/components/MobileNavigation/components/MobileNavigationItem/MobileNavigationItem.scss b/src/navigation/components/MobileNavigation/components/MobileNavigationItem/MobileNavigationItem.scss
new file mode 100644
index 000000000..13e2a0152
--- /dev/null
+++ b/src/navigation/components/MobileNavigation/components/MobileNavigationItem/MobileNavigationItem.scss
@@ -0,0 +1,11 @@
+@import '../../../../../../styles/variables';
+
+$block: '.#{$ns}mobile-navigation-item';
+
+#{$block} {
+    &__rows-item {
+        &:not(:last-child) {
+            margin-bottom: $indentSM;
+        }
+    }
+}
diff --git a/src/navigation/components/MobileNavigation/components/MobileNavigationItem/MobileNavigationItem.tsx b/src/navigation/components/MobileNavigation/components/MobileNavigationItem/MobileNavigationItem.tsx
new file mode 100644
index 000000000..a68319f42
--- /dev/null
+++ b/src/navigation/components/MobileNavigation/components/MobileNavigationItem/MobileNavigationItem.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import {NavigationItemModel} from '../../../../../models';
+import {block} from '../../../../../utils';
+import {ItemColumnName} from '../../../../constants';
+import {getItemClickHandler} from '../../../../utils';
+import NavigationItem from '../../../NavigationItem/NavigationItem';
+
+import './MobileNavigationItem.scss';
+
+const b = block('mobile-navigation-item');
+
+export interface MobileNavigationItemProps {
+    item: NavigationItemModel;
+    column: ItemColumnName;
+    index: number;
+    isOpened?: boolean;
+    activeItemId?: string;
+    hidePopup: () => void;
+    onActiveItemChange: (id?: string) => void;
+}
+
+export const MobileNavigationItem = ({
+    item,
+    index,
+    activeItemId,
+    onActiveItemChange,
+    column,
+    hidePopup,
+}: MobileNavigationItemProps) => {
+    const id = `${column}-${index}`;
+    const isActive = id === activeItemId;
+    const isOpened = isActive;
+
+    const onClick = getItemClickHandler({
+        column,
+        index,
+        activeItemId,
+        onActiveItemChange,
+    });
+
+    return (
+        <NavigationItem
+            key={index}
+            className={b('rows-item')}
+            data={item}
+            onClick={onClick}
+            isActive={isActive}
+            isOpened={isOpened}
+            hidePopup={hidePopup}
+            isMobile={true}
+        />
+    );
+};