feat: Add search for mobile view

package.json

@@ -43,6 +43,7 @@
     "@diplodoc/latex-extension": "^1.0.2",
     "@diplodoc/mermaid-extension": "^1.2.1",
     "@diplodoc/transform": "^4.31.3",
+    "@gravity-ui/icons": "^2.11.0",
     "url": "^0.11.0"
   },
   "devDependencies": {

src/components/ConstructorPage/useNavigation.tsx

@@ -40,6 +40,7 @@ export const useNavigation = (
             withBorder: true,
             leftItems: leftItems,
             rightItems: rightItems,
+            customMobileHeaderItems: [{type: 'search'} as unknown as NavigationItemModel],
         }),
         [leftItems, rightItems],
     );

src/components/Search/Suggest.scss

@@ -1,12 +1,66 @@
 .Suggest {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    float: right;
+
     margin-right: 20px;
     min-width: 200px;
-    transition: min-width 0.3s;
+    transition:
+        min-width 0.3s,
+        max-width 0.3s;
 
     .dc-root_focused-search & {
         min-width: 500px;
     }
 
+    .mobile & {
+        margin-right: 0;
+        min-width: 36px;
+        max-width: 36px;
+    }
+
+    .mobile.dc-root_focused-search & {
+        min-width: 100%;
+        max-width: 100%;
+    }
+
+    &__close {
+        display: none;
+        flex: none;
+        margin-left: 16px;
+
+        .mobile.dc-root_focused-search & {
+            display: block;
+        }
+    }
+
+    &__end {
+        display: none;
+
+        .mobile & {
+            display: block;
+        }
+    }
+
+    &__input {
+        & input::placeholder {
+            transition: color 0.1s;
+        }
+
+        .mobile:not(.dc-root_focused-search) & {
+            --g-text-input-placeholder-color: rgba(0, 0, 0, 0);
+
+            & input {
+                padding: 0;
+            }
+
+            & > * {
+                border-color: rgba(0, 0, 0, 0);
+            }
+        }
+    }
+
     &__Item {
         &__Marker {
             background: var(--g-color-base-neutral-medium);

src/components/Search/Suggest.tsx

@@ -2,12 +2,21 @@ import type {ISearchProvider, SearchSuggestApi} from '@diplodoc/components';
 
 import React, {useCallback, useRef} from 'react';
 import {SearchSuggest} from '@diplodoc/components';
+import {Icon} from '@gravity-ui/uikit';
+import {Magnifier} from '@gravity-ui/icons';
+import block from 'bem-cn-lite';
 
 import {updateRootClassName} from '../../utils';
 
 import {useProvider} from './useProvider';
 import './Suggest.scss';
 
+const b = block('Suggest');
+
+function SearchButton() {
+    return <Icon data={Magnifier} className={b('end')} size={24} />;
+}
+
 export function Suggest() {
     const provider: ISearchProvider | null = useProvider();
     const suggest = useRef<SearchSuggestApi>(null);
@@ -35,7 +44,10 @@ export function Suggest() {
             provider={provider}
             onFocus={onFocus}
             onBlur={onBlur}
-            classNameContainer={'Suggest'}
+            endContent={<SearchButton />}
+            className={b('input')}
+            classNameContainer={b()}
+            closeButton={true}
         />
     );
 }

src/styles/overrides.scss

@@ -42,10 +42,8 @@
     z-index: 120;
 
     & > .container-fluid {
-        .desktop & {
-            padding-right: $desktopHPadding;
-            padding-left: $desktopHPadding;
-        }
+        padding-right: $desktopHPadding;
+        padding-left: $desktopHPadding;
 
         .mobile & {
             padding-right: $mobileRPadding;
@@ -157,3 +155,44 @@
         }
     }
 }
+
+.mobile {
+    .pc-navigation {
+        .pc-overflow-scroller {
+            justify-content: flex-end;
+            overflow: visible;
+        }
+    }
+}
+
+.mobile.dc-root_focused-search {
+    .pc-navigation {
+        .pc-desktop-navigation {
+            &__left,
+            &__navigation-container {
+                display: none;
+            }
+
+            &__right {
+                flex: 1 1 100%;
+                max-width: 100%;
+            }
+
+            &__mobile-navigation-container {
+                padding-right: 0;
+            }
+        }
+
+        .pc-overflow-scroller__wrapper {
+            width: 100%;
+        }
+
+        .pc-navigation-item:has(> .Suggest) {
+            width: 100%;
+        }
+
+        .pc-mobile-menu-button {
+            display: none;
+        }
+    }
+}