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

…ation (#57)

 * new page-constructor renderNavigation
 * use CustomNavigation
 * add custom MobileDropdown
 * override some new page-constructor styles

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,20 +1,22 @@
 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,
-    ConsentPopup,
     DocContentPageData,
     DocLeadingPageData,
     DocPageData,
     DocumentType,
     Lang,
+    MobileDropdown,
     Router,
     Theme,
     configure,
@@ -40,6 +42,8 @@ import '@diplodoc/transform/dist/js/yfm';
 
 import './App.scss';
 
+const HEADER_HEIGHT = 64
+
 export type DocAnalytics = {
     gtm?: {
         id?: string;
@@ -216,6 +220,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}>
@@ -231,6 +240,9 @@ export function App(props: DocInnerProps): ReactElement {
                                         mobileView={mobileView}
                                     />
                                 ),
+                                MobileDropdown: (item: NavigationDropdownItem) => (
+                                    <MobileDropdown item={item} />
+                                ),
                             },
                             blocks: {
                                 page: () => (

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;
@@ -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,6 +113,10 @@
         width: 100%;
         transition: width 0.3s;
     }
+
+    &__mobile-navigation-container {
+        margin-right: 0;
+    }
 }
 
 .pc-navigation {
@@ -143,3 +158,27 @@
     left: unset;
     z-index: 101;
 }
+
+@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+    .dc-toc {
+        height: fit-content !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    body:not(:has(.pc-navigation)) .dc-sidebar {
+        top: var(--dc-subnavigation-height, 52px);
+        z-index: 117;
+        height: calc(100% - var(--dc-subnavigation-height, 52px));
+
+        &-navigation__button {
+            margin-right: 0;
+        }
+    }
+
+    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,