From 67987b3e851be3d86196e1d21c7c9c8c6370faa5 Mon Sep 17 00:00:00 2001
From: Pavel Kovirshin <45898580+PahaN47@users.noreply.github.com>
Date: Thu, 22 Aug 2024 16:09:59 +0300
Subject: [PATCH] feat: components menu redesign (#255)

* feat: components menu redesign

* fix: removed gap between sticky headers

* fix: requested changes
---
 .../components/[libId]/[componentId].tsx      |   6 +-
 .../design/[sectionId]/[articleId].tsx        |   6 +-
 src/components/Footer/Footer.tsx              |   9 +-
 src/components/Layout/Layout.scss             |   4 +
 src/components/Layout/Layout.tsx              |  10 +-
 .../LibraryVersion/LibraryVersion.scss        |   1 +
 .../Navigation/Navigation.scss                |  21 ++-
 .../Navigation/Navigation.tsx                 |  21 ++-
 .../NavigationLayout/NavigationLayout.scss    | 136 +++++++++++----
 .../NavigationLayout/NavigationLayout.tsx     | 105 ++++++------
 .../SectionBlock/SectionBlock.scss            |  43 ++++-
 .../SectionBlock/SectionBlock.tsx             | 158 ++++++++++--------
 src/mixins.scss                               |  22 +++
 13 files changed, 358 insertions(+), 184 deletions(-)

diff --git a/src/[locale]/components/[libId]/[componentId].tsx b/src/[locale]/components/[libId]/[componentId].tsx
index 4158487cc510..39f383adc074 100644
--- a/src/[locale]/components/[libId]/[componentId].tsx
+++ b/src/[locale]/components/[libId]/[componentId].tsx
@@ -1,3 +1,4 @@
+import {BREAKPOINTS, useWindowBreakpoint} from '@gravity-ui/page-constructor';
 import {GetStaticPaths, GetStaticPathsResult, GetStaticProps} from 'next';
 import React from 'react';
 import {Section} from 'src/components/NavigationLayout/types';
@@ -81,6 +82,9 @@ export const ComponentPage = ({
     const lib = libs.find((item) => item.id === libId);
     const component = lib?.components.find((item) => item.id === componentId);
 
+    const windowBreakpoint = useWindowBreakpoint();
+    const isMobile = windowBreakpoint < BREAKPOINTS.lg;
+
     if (!lib || !component) {
         return null;
     }
@@ -107,7 +111,7 @@ export const ComponentPage = ({
     }, []);
 
     return (
-        <Layout title={`${lib.title} – ${component.title}`}>
+        <Layout title={`${lib.title} – ${component.title}`} hideFooter noScroll={!isMobile}>
             <ComponentsLayout libId={libId} componentId={componentId} sections={sections}>
                 <Component
                     libId={libId}
diff --git a/src/[locale]/design/[sectionId]/[articleId].tsx b/src/[locale]/design/[sectionId]/[articleId].tsx
index 4aeb57700aa9..2fcef93543fe 100644
--- a/src/[locale]/design/[sectionId]/[articleId].tsx
+++ b/src/[locale]/design/[sectionId]/[articleId].tsx
@@ -1,3 +1,4 @@
+import {BREAKPOINTS, useWindowBreakpoint} from '@gravity-ui/page-constructor';
 import {GetStaticPaths, GetStaticPathsResult, GetStaticProps} from 'next';
 import React from 'react';
 import {Section} from 'src/components/NavigationLayout/types';
@@ -52,6 +53,9 @@ export const ArticlePage = ({sectionId, articleId}: {sectionId: string; articleI
     const section = designSections.find((item) => item.id === sectionId);
     const article = section?.articles.find((item) => item.id === articleId);
 
+    const windowBreakpoint = useWindowBreakpoint();
+    const isMobile = windowBreakpoint < BREAKPOINTS.lg;
+
     if (!section || !article) {
         return null;
     }
@@ -72,7 +76,7 @@ export const ArticlePage = ({sectionId, articleId}: {sectionId: string; articleI
     }, []);
 
     return (
-        <Layout title={`${section.title} – ${article.title}`}>
+        <Layout title={`${section.title} – ${article.title}`} hideFooter noScroll={!isMobile}>
             <DesignLayout sections={sections} sectionId={sectionId} articleId={articleId}>
                 <DesignArticle article={article} sectionId={sectionId} sections={sections} />
             </DesignLayout>
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 7d0feebabec4..acab8b3de9a9 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,4 +1,4 @@
-import {Col, Grid, Row} from '@gravity-ui/page-constructor';
+import {Col, Grid, GridProps, Row} from '@gravity-ui/page-constructor';
 import {Icon} from 'landing-uikit';
 import React from 'react';
 
@@ -11,8 +11,11 @@ import './Footer.scss';
 
 const b = block('footer');
 
-export const Footer: React.FC = () => (
-    <Grid>
+export const Footer: React.FC<Pick<GridProps, 'className' | 'containerClass'>> = ({
+    className,
+    containerClass,
+}) => (
+    <Grid className={className} containerClass={containerClass}>
         <Row>
             <Col sizes={{sm: 12}}>
                 <footer className={b()}>
diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss
index d57993f808f5..0e2a496919e3 100644
--- a/src/components/Layout/Layout.scss
+++ b/src/components/Layout/Layout.scss
@@ -27,5 +27,9 @@ $block: '.#{variables.$ns}layout';
         position: relative;
         flex: 1;
         z-index: 1;
+
+        &_no-scroll {
+            overflow: hidden;
+        }
     }
 }
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 520f2c27a56a..46e07ef0f01b 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -27,6 +27,8 @@ export type LayoutProps = {
     isPageConstrucor?: boolean;
     isRtl?: boolean;
     showOnlyContent?: boolean;
+    hideFooter?: boolean;
+    noScroll?: boolean;
     meta?: MetaProps;
 };
 
@@ -36,6 +38,8 @@ export const Layout: React.FC<LayoutProps> = ({
     isPageConstrucor = false,
     isRtl = false,
     showOnlyContent = false,
+    hideFooter = false,
+    noScroll = false,
     meta = {},
 }) => {
     const {i18n} = useTranslation();
@@ -72,9 +76,9 @@ export const Layout: React.FC<LayoutProps> = ({
                     <Menu />
                 </div>
             )}
-            <div className={b('wrapper')} id={CONTENT_WRAPPER_ID}>
-                <div className={b('content')}>{children}</div>
-                {!showOnlyContent && <Footer />}
+            <div className={b('wrapper')} id={noScroll ? undefined : CONTENT_WRAPPER_ID}>
+                <div className={b('content', {'no-scroll': noScroll})}>{children}</div>
+                {!showOnlyContent && !hideFooter && <Footer />}
             </div>
         </div>
     );
diff --git a/src/components/LibraryVersion/LibraryVersion.scss b/src/components/LibraryVersion/LibraryVersion.scss
index cf30ae378638..2cd3fbaf8142 100644
--- a/src/components/LibraryVersion/LibraryVersion.scss
+++ b/src/components/LibraryVersion/LibraryVersion.scss
@@ -4,6 +4,7 @@
 $block: '.#{variables.$ns}library-version';
 
 #{$block} {
+    display: flex;
     padding: 2px 8px;
     font-size: 13px;
     font-weight: 400;
diff --git a/src/components/NavigationLayout/Navigation/Navigation.scss b/src/components/NavigationLayout/Navigation/Navigation.scss
index 3fdc14c7fec4..bd17f337b8c4 100644
--- a/src/components/NavigationLayout/Navigation/Navigation.scss
+++ b/src/components/NavigationLayout/Navigation/Navigation.scss
@@ -1,9 +1,19 @@
-@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../../mixins.scss' as baseMixins;
 @use '../../../variables.scss';
 
 $block: '.#{variables.$ns}navigation-layout-navigation';
 
 #{$block} {
+    &__search-input {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        height: 64px;
+        padding-top: 20px;
+        background: var(--g-color-base-modal);
+        box-sizing: border-box;
+    }
+
     &__empty {
         margin-top: 16px;
         font-size: 18px;
@@ -11,4 +21,13 @@ $block: '.#{variables.$ns}navigation-layout-navigation';
         font-weight: 600;
         text-align: center;
     }
+
+    @include baseMixins.window-breakpoint('lg') {
+        &__search-input {
+            position: static;
+            height: auto;
+            padding: 0;
+            background: none;
+        }
+    }
 }
diff --git a/src/components/NavigationLayout/Navigation/Navigation.tsx b/src/components/NavigationLayout/Navigation/Navigation.tsx
index 90763409eabe..92b4265e1de5 100644
--- a/src/components/NavigationLayout/Navigation/Navigation.tsx
+++ b/src/components/NavigationLayout/Navigation/Navigation.tsx
@@ -1,3 +1,4 @@
+import {BREAKPOINTS, useWindowBreakpoint} from '@gravity-ui/page-constructor';
 import {TextInput} from 'landing-uikit';
 import React from 'react';
 
@@ -37,6 +38,9 @@ export const Navigation = React.memo<NavigationProps>(
             }, {});
         });
 
+        const windowBreakpoint = useWindowBreakpoint();
+        const isMobile = windowBreakpoint < BREAKPOINTS.lg;
+
         const [filteredSections, setFilteredSections] = React.useState(sections);
         React.useEffect(() => {
             setFilteredSections(sections);
@@ -84,14 +88,15 @@ export const Navigation = React.memo<NavigationProps>(
 
         return (
             <div className={b()}>
-                <TextInput
-                    value={filterString}
-                    onUpdate={filterStringUpdateHandle}
-                    size="xl"
-                    placeholder={searchPlaceholder}
-                    hasClear
-                />
-
+                <div className={b('search-input')}>
+                    <TextInput
+                        value={filterString}
+                        onUpdate={filterStringUpdateHandle}
+                        size={isMobile ? 'xl' : 'l'}
+                        placeholder={searchPlaceholder}
+                        hasClear
+                    />
+                </div>
                 <div className={b('items')}>
                     {filteredSections.length > 0 ? (
                         filteredSections.map((section) => {
diff --git a/src/components/NavigationLayout/NavigationLayout.scss b/src/components/NavigationLayout/NavigationLayout.scss
index 5059068f2ac8..2c593b3a85a0 100644
--- a/src/components/NavigationLayout/NavigationLayout.scss
+++ b/src/components/NavigationLayout/NavigationLayout.scss
@@ -1,23 +1,15 @@
-@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../mixins.scss' as baseMixins;
 @use '../../variables.scss';
 
 $block: '.#{variables.$ns}navigation-layout';
 
 #{$block} {
-    margin: 24px 0 0;
-
-    @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
-        margin: 0;
-
-        & &__layout-grid {
-            .container-fluid {
-                padding: 0;
-                .col {
-                    padding: 0;
-                }
-            }
-        }
-    }
+    display: flex;
+    margin-left: auto;
+    padding-left: 48px;
+    max-width: calc(1232px + (100vw - 1232px) / 2);
+    height: 100%;
+    box-sizing: content-box;
 
     &__mobile-navigation-control {
         display: none;
@@ -29,14 +21,6 @@ $block: '.#{variables.$ns}navigation-layout';
         font-size: 15px;
         line-height: 20px;
         cursor: pointer;
-
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
-            display: flex;
-        }
-
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
-            margin: 12px 20px;
-        }
     }
 
     &__mobile-navigation-control-label {
@@ -61,10 +45,6 @@ $block: '.#{variables.$ns}navigation-layout';
     &__mobile-navigation-header {
         display: none;
         padding: 20px 0;
-
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
-            display: flex;
-        }
     }
 
     &__mobile-navigation-header-title {
@@ -83,10 +63,69 @@ $block: '.#{variables.$ns}navigation-layout';
         cursor: pointer;
     }
 
+    &__navigation-wrap {
+        flex-basis: 24%;
+        max-width: 296px;
+        max-height: 100%;
+        padding: 0 21px 48px 16px;
+        background: var(--g-color-base-modal);
+        overflow: auto;
+    }
+
     &__navigation {
         display: block;
+    }
 
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
+    &__content-wrap {
+        flex-grow: 1;
+        overflow: auto;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        max-width: 904px;
+        min-height: calc(100% - 40px);
+        margin-right: auto;
+        padding-top: 40px;
+        padding-right: 48px;
+        padding-left: 32px;
+        box-sizing: content-box;
+    }
+
+    & &__footer {
+        padding: 0;
+
+        & .col {
+            padding: 0;
+        }
+    }
+
+    @include baseMixins.window-breakpoint('lg') {
+        flex-direction: column;
+        max-width: none;
+        height: auto;
+        min-height: 100%;
+        padding: 24px 40px 0;
+        box-sizing: border-box;
+
+        &__mobile-navigation-control {
+            display: flex;
+        }
+
+        &__mobile-navigation-header {
+            display: flex;
+        }
+
+        &__navigation-wrap {
+            flex-basis: auto;
+            max-width: initial;
+            padding: 0 8px;
+            background: none;
+        }
+
+        &__navigation {
             display: none;
 
             &_mobile-open {
@@ -102,13 +141,46 @@ $block: '.#{variables.$ns}navigation-layout';
                 background: #160d1b;
             }
         }
+
+        &__content-wrap {
+            display: flex;
+            flex-direction: column;
+            padding: 0 8px;
+            overflow: visible;
+        }
+
+        &__content {
+            flex-grow: 1;
+            max-width: none;
+            height: 100%;
+            min-height: initial;
+            margin: 0;
+            padding: 0;
+        }
     }
 
-    &__content {
-        padding-left: 16px;
+    @include baseMixins.window-breakpoint('sm') {
+        padding: 0;
+
+        &__navigation-wrap {
+            padding: 0;
+        }
+
+        &__content-wrap {
+            padding: 0;
+        }
+
+        &__mobile-navigation-control {
+            margin: 12px 20px;
+        }
+
+        & &__footer {
+            box-sizing: border-box;
+            padding: 0 16px;
 
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
-            padding-left: 0;
+            & .col {
+                padding: 0 8px;
+            }
         }
     }
 }
diff --git a/src/components/NavigationLayout/NavigationLayout.tsx b/src/components/NavigationLayout/NavigationLayout.tsx
index 4bb1eac96530..9e1979c1d67f 100644
--- a/src/components/NavigationLayout/NavigationLayout.tsx
+++ b/src/components/NavigationLayout/NavigationLayout.tsx
@@ -1,4 +1,3 @@
-import {Col, Grid, Row} from '@gravity-ui/page-constructor';
 import {Icon} from 'landing-uikit';
 import {useTranslation} from 'next-i18next';
 import React from 'react';
@@ -7,6 +6,7 @@ import arrowIcon from '../../assets/icons/arrow.svg';
 import menuCloseIcon from '../../assets/icons/menu-close.svg';
 import {CONTENT_WRAPPER_ID} from '../../constants';
 import {block} from '../../utils';
+import {Footer} from '../Footer/Footer';
 import LibraryVersion from '../LibraryVersion/LibraryVersion';
 
 import {Navigation} from './Navigation/Navigation';
@@ -59,66 +59,63 @@ export const NavigationLayout: React.FC<NavigationLayoutProps> = ({
 
     return (
         <div className={b()}>
-            <Grid className={b('layout-grid')}>
-                <Row>
-                    <Col sizes={{all: 12, lg: 3}}>
+            <div className={b('navigation-wrap')}>
+                <div
+                    tabIndex={0}
+                    role="button"
+                    className={b('mobile-navigation-control')}
+                    onClick={() => {
+                        setIsOpenMobileNavigation(true);
+                    }}
+                >
+                    <div className={b('mobile-navigation-control-label')}>
+                        <span className={b('mobile-navigation-control-section')}>
+                            {section.title}
+                        </span>
+                        <LibraryVersion id={section.id} />
+                        {subSection ? (
+                            <span className={b('mobile-navigation-control-sub-section')}>
+                                {' '}
+                                • {subSection.title}
+                            </span>
+                        ) : null}
+                    </div>
+                    <div className={b('mobile-navigation-control-arrow')}>
+                        <Icon data={arrowIcon} width={10} height={6} />
+                    </div>
+                </div>
+                <div className={b('navigation', {'mobile-open': isOpenMobileNavigation})}>
+                    <div className={b('mobile-navigation-header')}>
+                        <div className={b('mobile-navigation-header-title')}>{mobileTitle}</div>
                         <div
                             tabIndex={0}
                             role="button"
-                            className={b('mobile-navigation-control')}
+                            className={b('mobile-navigation-header-close')}
                             onClick={() => {
-                                setIsOpenMobileNavigation(true);
+                                setIsOpenMobileNavigation(false);
                             }}
                         >
-                            <div className={b('mobile-navigation-control-label')}>
-                                <span className={b('mobile-navigation-control-section')}>
-                                    {section.title}
-                                </span>
-                                <LibraryVersion id={section.id} />
-                                {subSection ? (
-                                    <span className={b('mobile-navigation-control-sub-section')}>
-                                        {' '}
-                                        • {subSection.title}
-                                    </span>
-                                ) : null}
-                            </div>
-                            <div className={b('mobile-navigation-control-arrow')}>
-                                <Icon data={arrowIcon} width={10} height={6} />
-                            </div>
+                            <Icon data={menuCloseIcon} width={16} />
                         </div>
-                        <div className={b('navigation', {'mobile-open': isOpenMobileNavigation})}>
-                            <div className={b('mobile-navigation-header')}>
-                                <div className={b('mobile-navigation-header-title')}>
-                                    {mobileTitle}
-                                </div>
-                                <div
-                                    tabIndex={0}
-                                    role="button"
-                                    className={b('mobile-navigation-header-close')}
-                                    onClick={() => {
-                                        setIsOpenMobileNavigation(false);
-                                    }}
-                                >
-                                    <Icon data={menuCloseIcon} width={16} />
-                                </div>
-                            </div>
-                            <Navigation
-                                sections={sections}
-                                sectionId={sectionId}
-                                subSectionId={subSectionId}
-                                searchPlaceholder={searchPlaceholder}
-                                emptySearchPlaceholder={
-                                    emptySearchPlaceholder ?? t('emptySearchPlaceholder')
-                                }
-                                onClickOnLink={clickOnLinkHandler}
-                            />
-                        </div>
-                    </Col>
-                    <Col sizes={{all: 12, lg: 9}}>
-                        <div className={b('content')}>{children}</div>
-                    </Col>
-                </Row>
-            </Grid>
+                    </div>
+                    <Navigation
+                        sections={sections}
+                        sectionId={sectionId}
+                        subSectionId={subSectionId}
+                        searchPlaceholder={searchPlaceholder}
+                        emptySearchPlaceholder={
+                            emptySearchPlaceholder ?? t('emptySearchPlaceholder')
+                        }
+                        onClickOnLink={clickOnLinkHandler}
+                    />
+                </div>
+            </div>
+            <div className={b('content-wrap')} id={CONTENT_WRAPPER_ID}>
+                <div className={b('content')}>
+                    {children}
+                    <Footer containerClass={b('footer')} />
+                </div>
+            </div>
         </div>
     );
 };
diff --git a/src/components/NavigationLayout/SectionBlock/SectionBlock.scss b/src/components/NavigationLayout/SectionBlock/SectionBlock.scss
index 7a9dfa31bf1f..1a8a37d04f7e 100644
--- a/src/components/NavigationLayout/SectionBlock/SectionBlock.scss
+++ b/src/components/NavigationLayout/SectionBlock/SectionBlock.scss
@@ -1,16 +1,16 @@
-@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../../mixins.scss' as baseMixins;
 @use '../../../variables.scss';
 
 $block: '.#{variables.$ns}navigation-layout-section-block';
 
 #{$block} {
-    background: #251b25;
     border-radius: 12px;
 
     &__header {
+        position: sticky;
+        top: 64px;
         display: flex;
-        padding: 16px 20px;
-        margin-top: 16px;
+        padding: 14px 0 13px;
         font-size: 17px;
         line-height: 24px;
         font-weight: 600;
@@ -18,6 +18,10 @@ $block: '.#{variables.$ns}navigation-layout-section-block';
         text-decoration: none;
         cursor: pointer;
         align-items: center;
+        background: var(--g-color-base-modal);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        box-sizing: content-box;
+
         &_active {
             background: rgba(255, 190, 92, 0.1);
             color: #ffbe5c;
@@ -48,7 +52,6 @@ $block: '.#{variables.$ns}navigation-layout-section-block';
         overflow: hidden;
         max-height: 0;
         opacity: 0;
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
         transition: all 0.3s ease-in-out;
 
         &_open {
@@ -69,10 +72,6 @@ $block: '.#{variables.$ns}navigation-layout-section-block';
         text-decoration: none;
         transition: background-color 0.2s ease-in-out;
 
-        &:first-child {
-            margin-top: 8px;
-        }
-
         &:hover {
             background: var(--g-color-base-generic-hover);
         }
@@ -106,4 +105,30 @@ $block: '.#{variables.$ns}navigation-layout-section-block';
         align-items: center;
         margin-left: 8px;
     }
+
+    @include baseMixins.window-breakpoint('lg') {
+        background: var(--g-color-base-modal);
+
+        &__header {
+            position: static;
+            top: initial;
+            padding: 16px 20px;
+            margin-top: 16px;
+            background: none;
+            border: none;
+            box-sizing: inherit;
+        }
+
+        &__sub-sections {
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        &__sub-section {
+            margin-top: 4px;
+
+            &:first-child {
+                margin-top: 8px;
+            }
+        }
+    }
 }
diff --git a/src/components/NavigationLayout/SectionBlock/SectionBlock.tsx b/src/components/NavigationLayout/SectionBlock/SectionBlock.tsx
index 52034656e22f..3d490502683b 100644
--- a/src/components/NavigationLayout/SectionBlock/SectionBlock.tsx
+++ b/src/components/NavigationLayout/SectionBlock/SectionBlock.tsx
@@ -6,7 +6,7 @@ import arrowIcon from '../../../assets/icons/arrow.svg';
 import soonLabelIcon from '../../../assets/icons/soon-label.svg';
 import {block} from '../../../utils';
 import {Link} from '../../Link';
-import {Section} from '../types';
+import {Section, SubSection} from '../types';
 
 import './SectionBlock.scss';
 
@@ -29,10 +29,12 @@ export const SectionBlock: React.FC<SectionBlockProps> = ({
     curSubSectionId,
     onClickOnLink,
 }) => {
-    let content: React.ReactNode = null;
+    const renderUrlSection = () => {
+        if (!data.url) {
+            return null;
+        }
 
-    if (data.url && (!data.subSections || data.subSections?.length === 0)) {
-        content = (
+        return (
             <Link
                 href={data.url}
                 className={b('header', {
@@ -42,82 +44,94 @@ export const SectionBlock: React.FC<SectionBlockProps> = ({
                 <div className={b('title')}>{data.title}</div>
             </Link>
         );
-    } else {
-        content = (
-            <React.Fragment>
+    };
+
+    const renderHeader = () => {
+        return (
+            <div
+                className={b('header', {open: isOpen})}
+                onClick={() => {
+                    setIsOpen(!isOpen);
+                }}
+            >
+                <div className={b('title')}>{data.title}</div>
+                <div className={b('library-version')}>
+                    <LibraryVersion id={data.id} />
+                </div>
                 <div
-                    className={b('header')}
-                    onClick={() => {
-                        setIsOpen(!isOpen);
-                    }}
+                    className={b('arrow', {
+                        open: isOpen,
+                    })}
                 >
-                    <div className={b('title')}>{data.title}</div>
-                    <div className={b('library-version')}>
-                        <LibraryVersion id={data.id} />
-                    </div>
+                    <Icon data={arrowIcon} width={10} height={6} />
+                </div>
+            </div>
+        );
+    };
+
+    const renderSubSection = (subSection: SubSection) => {
+        if (subSection.isComingSoon === true) {
+            return (
+                <div key={subSection.id}>
                     <div
-                        className={b('arrow', {
-                            open: isOpen,
+                        className={b('sub-section', {
+                            active: curSectionId === data.id && curSubSectionId === subSection.id,
+                            disabled: subSection.isComingSoon === true,
                         })}
                     >
-                        <Icon data={arrowIcon} width={10} height={6} />
+                        <span className={b('sub-section-text')}>{subSection.title}</span>
+                        <span className={b('sub-section-icon')}>
+                            <Icon data={soonLabelIcon} width={34} height={14} />
+                        </span>
                     </div>
                 </div>
-                <div className={b('sub-sections', {open: isOpen})}>
-                    {data.url ? (
-                        <Link
-                            key="__overview"
-                            href={data.url}
-                            className={b('sub-section', {
-                                active: curSectionId === data.id && curSubSectionId === undefined,
-                            })}
-                            onClick={onClickOnLink}
-                        >
-                            Overview
-                        </Link>
-                    ) : null}
+            );
+        }
 
-                    {data.subSections?.map((subSection) => {
-                        if (subSection.isComingSoon === true) {
-                            return (
-                                <div key={subSection.id}>
-                                    <div
-                                        className={b('sub-section', {
-                                            active:
-                                                curSectionId === data.id &&
-                                                curSubSectionId === subSection.id,
-                                            disabled: subSection.isComingSoon === true,
-                                        })}
-                                    >
-                                        <span className={b('sub-section-text')}>
-                                            {subSection.title}
-                                        </span>
-                                        <span className={b('sub-section-icon')}>
-                                            <Icon data={soonLabelIcon} width={34} height={14} />
-                                        </span>
-                                    </div>
-                                </div>
-                            );
-                        }
+        return (
+            <Link
+                key={subSection.id}
+                href={subSection.url}
+                className={b('sub-section', {
+                    active: curSectionId === data.id && curSubSectionId === subSection.id,
+                })}
+                onClick={onClickOnLink}
+            >
+                <span className={b('sub-section-text')}>{subSection.title}</span>
+            </Link>
+        );
+    };
 
-                        return (
-                            <Link
-                                key={subSection.id}
-                                href={subSection.url}
-                                className={b('sub-section', {
-                                    active:
-                                        curSectionId === data.id &&
-                                        curSubSectionId === subSection.id,
-                                })}
-                                onClick={onClickOnLink}
-                            >
-                                <span className={b('sub-section-text')}>{subSection.title}</span>
-                            </Link>
-                        );
-                    })}
-                </div>
-            </React.Fragment>
+    const renderSubSectionsContainer = () => {
+        return (
+            <div className={b('sub-sections', {open: isOpen})}>
+                {data.url ? (
+                    <Link
+                        key="__overview"
+                        href={data.url}
+                        className={b('sub-section', {
+                            active: curSectionId === data.id && curSubSectionId === undefined,
+                        })}
+                        onClick={onClickOnLink}
+                    >
+                        Overview
+                    </Link>
+                ) : null}
+                {data.subSections?.map(renderSubSection)}
+            </div>
         );
-    }
-    return <div className={b()}>{content}</div>;
+    };
+
+    return (
+        <div className={b()}>
+            {data.url && !data.subSections?.length ? (
+                renderUrlSection()
+            ) : (
+                <>
+                    {renderHeader()}
+                    {renderSubSectionsContainer()}
+                </>
+            )}
+        </div>
+    );
 };
diff --git a/src/mixins.scss b/src/mixins.scss
index 19792a630147..5fe6156f576d 100644
--- a/src/mixins.scss
+++ b/src/mixins.scss
@@ -1,3 +1,5 @@
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+
 @function opaque-color($desired-color, $background-color: #fff) {
     $r1: red($background-color);
     $g1: green($background-color);
@@ -32,3 +34,23 @@
         --g-color-private-brand-#{$alpha * 1000}-solid: #{$solid-color};
     }
 }
+
+@mixin window-breakpoint($breakpoint, $mode: 'l') {
+    @if $mode == 'ge' {
+        @media (min-width: map-get(pcVariables.$gridBreakpoints, $breakpoint)) {
+            @content;
+        }
+    } @else if $mode == 'g' {
+        @media (min-width: map-get(pcVariables.$gridBreakpoints, $breakpoint) + 1) {
+            @content;
+        }
+    } @else if $mode == 'le' {
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, $breakpoint)) {
+            @content;
+        }
+    } @else {
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, $breakpoint) - 1) {
+            @content;
+        }
+    }
+}