feat: components menu redesign

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}

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>

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()}>

src/components/Layout/Layout.scss

@@ -27,5 +27,9 @@ $block: '.#{variables.$ns}layout';
         position: relative;
         flex: 1;
         z-index: 1;
+
+        &_no-scroll {
+            overflow: hidden;
+        }
     }
 }

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();
@@ -73,8 +77,8 @@ export const Layout: React.FC<LayoutProps> = ({
                 </div>
             )}
             <div className={b('wrapper')} id={CONTENT_WRAPPER_ID}>
-                <div className={b('content')}>{children}</div>
-                {!showOnlyContent && <Footer />}
+                <div className={b('content', {'no-scroll': noScroll})}>{children}</div>
+                {!showOnlyContent && !hideFooter && <Footer />}
             </div>
         </div>
     );

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;

src/components/LibraryVersion/LibraryVersion.tsx

@@ -18,9 +18,11 @@ const LibraryVersion: FC<Props> = ({id}) => {
     }
 
     return (
-        <Card className={b()} theme="warning" view="outlined">
-            <Text color="warning">{libraryVersion}</Text>
-        </Card>
+        <>
+            <Card className={b()} theme="warning" view="outlined">
+                <Text color="warning">{libraryVersion}</Text>
+            </Card>
+        </>
     );
 };
 

src/components/NavigationLayout/Navigation/Navigation.scss

@@ -1,14 +1,33 @@
-@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;
         line-height: 24px;
         font-weight: 600;
         text-align: center;
     }
+
+    @include baseMixins.window-breakpoint('lg') {
+        &__search-input {
+            position: static;
+            height: auto;
+            padding: 0;
+            background: none;
+        }
+    }
 }

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) => {

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;
+            }
         }
     }
 }