feat: new mobile-ui and refactoring gravity-ui/page-constructor navigation

package.json

@@ -46,11 +46,11 @@
   },
   "devDependencies": {
     "@diplodoc/babel-preset": "^1.0.2",
-    "@diplodoc/components": "^4.10.0",
+    "@diplodoc/components": "^4.12.0",
     "@diplodoc/lint": "^1.1.1",
     "@diplodoc/openapi-extension": "^2.1.0",
     "@diplodoc/tsconfig": "^1.0.2",
-    "@gravity-ui/page-constructor": "^5.0.1",
+    "@gravity-ui/page-constructor": "^5.22.0",
     "@gravity-ui/uikit": "^6.1.1",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
@@ -60,7 +60,7 @@
     "mini-css-extract-plugin": "^2.7.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-svg-loader": "^3.0.3",
+    "react-svg-loader": "^3.0.0",
     "rtlcss": "^4.1.1",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",

src/components/App/App.scss

@@ -26,6 +26,7 @@
 
     .dc-root_full-header & {
         --dc-header-height: 64px;
+        --dc-subnavigation-height: 52px;
     }
 }
 

src/components/App/App.tsx

@@ -1,29 +1,33 @@
 import React, {ReactElement, useCallback, useEffect} from 'react';
 import {
     NavigationData,
+    NavigationDropdownItem,
     PageConstructor,
     PageConstructorProvider,
     PageContent,
 } from '@gravity-ui/page-constructor';
 import {ThemeProvider} from '@gravity-ui/uikit';
 import {
     ConsentPopup,
+    ControlSizes,
+    CustomNavigation,
     DocContentPageData,
     DocLeadingPageData,
     DocPageData,
     DocumentType,
     Lang,
+    MobileDropdown,
     Router,
     Theme,
     configure,
     getLangPath,
     getPageByType,
     getPageType,
 } from '@diplodoc/components';
-import '@diplodoc/transform/dist/js/yfm';
 import {MermaidRuntime} from '@diplodoc/mermaid-extension/react';
 import {LatexRuntime} from '@diplodoc/latex-extension/react';
 import {Runtime as OpenapiSandbox} from '@diplodoc/openapi-extension/runtime';
+import '@diplodoc/transform/dist/js/yfm';
 
 import {HeaderControls} from '../HeaderControls';
 import {getDirection, updateRootClassName} from '../../utils';
@@ -35,6 +39,8 @@ import '../../interceptors/leading-page-links';
 
 import './App.scss';
 
+const HEADER_HEIGHT = 64;
+
 export type DocAnalytics = {
     gtm?: {
         id?: string;
@@ -211,6 +217,11 @@ export function App(props: DocInnerProps): ReactElement {
     const {leftItems = [], rightItems = []} = header as NavigationData['header'];
     const headerWithControls = rightItems.some((item: {type: string}) => item.type === 'controls');
 
+    const userSettings = {...settings, langs, onChangeLang};
+
+    const navigationTocData = {toc: data.toc, router, headerHeight: HEADER_HEIGHT};
+    const mobileControlsData = {controlSize: ControlSizes.L, lang, userSettings};
+
     return (
         <div className={appClassName}>
             <ThemeProvider theme={theme} direction={direction}>
@@ -226,6 +237,9 @@ export function App(props: DocInnerProps): ReactElement {
                                         mobileView={mobileView}
                                     />
                                 ),
+                                MobileDropdown: (item: NavigationDropdownItem) => (
+                                    <MobileDropdown item={item} />
+                                ),
                             },
                             blocks: {
                                 page: () => (
@@ -260,10 +274,20 @@ export function App(props: DocInnerProps): ReactElement {
                             fullHeader
                                 ? {
                                       header: {
-                                          withBorder: true,
-                                          leftItems: leftItems,
-                                          rightItems: rightItems,
+                                          leftItems: [],
                                       },
+                                      renderNavigation: () => (
+                                          <CustomNavigation
+                                              logo={logo}
+                                              data={{
+                                                  withBorder: true,
+                                                  leftItems: leftItems,
+                                                  rightItems: rightItems,
+                                              }}
+                                              navigationTocData={navigationTocData}
+                                              mobileControlsData={mobileControlsData}
+                                          />
+                                      ),
                                       logo,
                                   }
                                 : undefined

src/components/Layout/Layout.scss

@@ -1,3 +1,5 @@
+@import "../../styles/variables";
+
 .Layout {
     &__header {
         position: sticky;
@@ -8,13 +10,13 @@
     &__body {
         display: flex;
         flex-flow: column;
-        min-height: calc(100vh - var(--dc-header-height));
+        min-height: calc(100vh - var(--dc-header-height, #{$headerHeight}));
     }
 
     .pc-page-constructor & {
         &__content {
             flex: 1 1 auto;
-            margin: 0 -10px;
+            margin: 0 -8px;
         }
     }
 

src/styles/default.scss

@@ -14,6 +14,7 @@ body {
 .g-root {
     --dc-header-height: 0;
     --dc-subheader-height: 40px;
+    --dc-subnavigation-height: 52px;
 
     --dc-error-image-403: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
     --dc-error-image-404: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');

src/styles/overrides.scss

@@ -6,7 +6,6 @@
     }
 }
 
-
 .App.document-mode {
     .pc-Grid {
         padding-right: 40px;
@@ -16,7 +15,7 @@
             padding: 0;
         }
 
-        @media (max-width: map-get($screenBreakpoints, 'md')) {
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
             padding-right: 20px;
             padding-left: 20px;
 
@@ -52,31 +51,43 @@
     max-width: 1440px;
 }
 
+.dc-doc-page__main:has(.dc-doc-page__content > .pc-page-constructor),
 .dc-doc-page__main:has(.dc-doc-page__content > .pc-page-constructor__docs) {
     padding: 20px 0 24px;
 }
 
-.dc-doc-page__main:has(.dc-doc-page__content > .pc-page-constructor) {
-    padding: 20px 0 24px;
+.dc-root_wide-format {
+    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+        & .dc-subnavigation {
+            $wideFormatHorizontalPadding: 8px;
+
+            padding-inline: 0 $wideFormatHorizontalPadding;
+            width: calc(100% - $wideFormatHorizontalPadding);
+        }
+
+        & .dc-doc-page__main {
+            padding-inline: #{$wideFormatHorizontalPadding};
+        }
+    }
 }
 
 .pc-block-base {
-    padding: 0 !important;
+    padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .pc-navigation {
-    z-index:  101;
+    z-index: 120;
 
     .desktop .dc-root_wide-format & .container-fluid {
-        padding: 0;
+        padding: 30px;
 
         & .col {
             padding: 0;
         }
     }
 
     .mobile .dc-root_wide-format & .container-fluid {
-        padding: 12px;
+        padding: 0 8px 0 12px;
 
         & .col {
             padding: 0;
@@ -102,30 +113,42 @@
         width: 100%;
         transition: width 0.3s;
     }
+
+    &__mobile-navigation-container {
+        margin-right: 0;
+    }
 }
 
-.pc-navigation {
-    z-index:  101;
+.pc-mobile-navigation {
+    z-index: 119;
+}
 
-    .desktop.dc-root_wide-format & .container-fluid {
-        padding: 30px;
+.gc-simple-consent.gc-analytics {
+    right: 0;
+    left: unset;
+    z-index: 101;
+}
 
-        & .col {
-            padding: 0;
-        }
+@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+    .dc-toc {
+        height: fit-content !important; /* stylelint-disable-line declaration-no-important */
     }
 
-    .mobile.dc-root_wide-format & .container-fluid {
-        padding: 12px;
+    body:not(:has(.pc-navigation)) .dc-sidebar {
+        top: var(--dc-subnavigation-height, 52px);
+        z-index: 117;
+        height: calc(100% - var(--dc-subnavigation-height, 52px));
 
-        & .col {
-            padding: 0;
+        &-navigation__button {
+            margin-right: 0;
         }
     }
-}
 
-.gc-simple-consent.gc-analytics {
-    right: 0;
-    left: unset;
-    z-index: 101;
+    body:has(.pc-navigation) .dc-sidebar {
+        --dc-header-height: var(--header-height, 64px);
+    }
+
+    .pc-navigation-item:has(.dc-controls) {
+        display: none;
+    }
 }

src/styles/variables.scss

@@ -1,5 +1,6 @@
 // Sizes
 $headerHeight: 0px;
+$subNavigationHeight: 52px;
 $normalOffset: 20px;
 $miniTocOffset: 56px;
 $blockMarginBottomLarge: 20px;
@@ -8,6 +9,7 @@ $headerMarginTopLarge: 40px;
 $headerMarginTopMedium: 32px;
 $popupPadding: 16px;
 $centerBlockMaxWidth: 736px;
+$wideFormatHorizontalPadding: 8px;
 
 $screenBreakpoints: (
     'xs': 375px,