feat: new SubNavigation component and new MiniToc for mobile (#249)

* feat: SubNavigation slides up when scrolling the page * feat: create mobile mini-toc and subnavigation * fix: improve code-style in SubNavigation * fix: change subheader-height to correct * fix: share button in docs without header * fix: style fixes * feat: share a page * fix: separate business-logic from SubNavigation --------- Co-authored-by: Ruslan Bagautdinov <[email protected]>
diplodoc-platform · Jul 17, 2024 · 6a1e69d · 6a1e69d
1 parent 16ce81c
commit 6a1e69d
Show file tree

Hide file tree

Showing 10 changed files with 405 additions and 27 deletions.
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss
@@ -81,8 +81,19 @@
     @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
         flex-direction: column-reverse;
 
+        &__center + &__right:has(> .dc-subnavigation_invisible) {
+            margin-top: calc(0px - var(--dc-subheader-height, 52px));
+        }
+
         &__right {
-            display: none;
+            position: sticky;
+            top: calc(var(--dc-header-height) - 1px);
+            left: 0;
+            z-index: 119;
+
+            height: fit-content;
+            width: 100%;
+            padding: 0;
         }
 
         &__left {
@@ -93,6 +104,7 @@
             position: static;
             width: auto;
             height: auto;
+            padding: 0 20px;
 
             .dc-toc {
                 /* stylelint-disable-next-line declaration-no-important */

diff --git a/src/components/DocLeadingPage/DocLeadingPage.scss b/src/components/DocLeadingPage/DocLeadingPage.scss
@@ -20,6 +20,10 @@
         margin: 40px 0 $normalOffset;
 
         @include text-size(display-2);
+
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+            margin-top: 20px;
+        }
     }
 
     &__description {
@@ -43,6 +47,10 @@
             flex-direction: row;
             margin-top: 70px;
             margin-bottom: -$blockMarginBottomLarge;
+
+            @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+                margin-top: 20px;
+            }
         }
     }
 

diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss
@@ -27,6 +27,41 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
 
         @include text-size(body-1);
 
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+            position: absolute;
+            top: var(--dc-subheader-height);
+            z-index: 117;
+
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
+            box-sizing: border-box;
+            max-height: 0px;
+            width: 100%;
+            padding: 0 16px 0 16px;
+
+            background: var(--g-color-base-background, #FFF);
+            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
+
+            transition: max-height 300ms 0s;;
+
+            overflow-y: hidden;
+
+            &_open-mini-toc {
+                max-height: 80vh;
+            }
+
+            &_hidden-mini-toc {
+                padding: 0;
+            }
+
+            &-mini-toc {
+                width: 100%;
+                padding: 16px 0 16px 0;
+            }
+        }
+
         @media screen and (min-width: 1280px) {
             & {
                 width: 200px;
@@ -57,11 +92,11 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     &__controls {
-        display: flex;
+        display: none;
         top: 0;
         align-items: center;
         height: 40px;
-        z-index: 102;
+        z-index: 121;
         position: absolute;
         right: 7px;
 
@@ -80,6 +115,8 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
         }
 
         @media (min-width: map-get($screenBreakpoints, 'md')) {
+            display: flex;
+
             &_vertical {
                 top: calc(6px + var(--dc-header-height, #{$headerHeight}));
                 justify-content: center;
@@ -145,9 +182,13 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     &__title {
-        margin-bottom: 12px;
+        margin-top: 20px;
 
         @include text-size(display-2);
+
+        @media (min-width: map-get($screenBreakpoints, 'md')) {
+            margin-bottom: 12px;
+        }
     }
 
     &__content {
@@ -222,15 +263,16 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
 
     @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
         &__main {
+            margin-top: var(--dc-subheader-height);
             padding: 0 20px;
         }
 
         &__breadcrumbs {
             padding: 0 20px;
         }
-
+        /* CHECK display: block; temporarily hidden */
         &__content-mini-toc {
-            display: block;
+            display: none;
         }
 
         &__toc-nav-panel {
@@ -327,7 +369,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     & > p {
-        margin: 0 0 10px 0;
+        margin: 0 0 10px;
 
         &:first-child {
             &::before {
@@ -348,10 +390,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     $colors: (
-            dc-accent-info: $infoColor,
-            dc-accent-tip: $tipColor,
-            dc-accent-alert: $importantColor,
-            dc-accent-warning: $warningColor
+        dc-accent-info: $infoColor,
+        dc-accent-tip: $tipColor,
+        dc-accent-alert: $importantColor,
+        dc-accent-warning: $warningColor,
     );
 
     @each $type, $color in $colors {
@@ -365,10 +407,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     $backgroundColors: (
-            dc-accent-info: $infoBackgroundColor,
-            dc-accent-tip: $tipBackgroundColor,
-            dc-accent-alert: $importantBackgroundColor,
-            dc-accent-warning: $warningBackgroundColor
+        dc-accent-info: $infoBackgroundColor,
+        dc-accent-tip: $tipBackgroundColor,
+        dc-accent-alert: $importantBackgroundColor,
+        dc-accent-warning: $warningBackgroundColor,
     );
 
     @each $type, $color in $backgroundColors {

diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx
@@ -28,6 +28,7 @@ import {Feedback, FeedbackView} from '../Feedback';
 import {HTML} from '../HTML';
 import {MiniToc} from '../MiniToc';
 import {SearchBar, withHighlightedSearchWords} from '../SearchBar';
+import {SubNavigation} from '../SubNavigation';
 import {TocNavPanel} from '../TocNavPanel';
 import UpdatedAtDate from '../UpdatedAtDate/UpdatedAtDate';
 
@@ -84,6 +85,7 @@ export interface DocPageProps extends DocPageData, DocSettings {
 
 type DocPageInnerProps = InnerProps<DocPageProps, DocSettings>;
 type DocPageState = {
+    mobileMiniTocOpen: boolean;
     loading: boolean;
     keyDOM: number;
     showNotification: boolean;
@@ -100,6 +102,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
         super(props);
 
         this.state = {
+            mobileMiniTocOpen: false,
             loading: props.singlePage,
             keyDOM: getRandomKey(),
             showNotification: true,
@@ -155,6 +158,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
             'full-screen': fullScreen,
             'hidden-mini-toc': hideMiniToc,
             'single-page': singlePage,
+            'open-mini-toc': this.state.mobileMiniTocOpen,
         };
 
         return (
@@ -164,7 +168,6 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
                 headerHeight={headerHeight}
                 className={b(modes)}
                 fullScreen={fullScreen}
-                hideRight={hideMiniToc}
                 tocTitleIcon={tocTitleIcon}
                 wideFormat={wideFormat}
                 hideTocHeader={hideTocHeader}
@@ -194,9 +197,18 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
                     {this.renderSinglePageControls()}
                 </DocLayout.Center>
                 <DocLayout.Right>
+                    <SubNavigation
+                        title={this.props.title}
+                        hideMiniToc={hideMiniToc}
+                        miniTocOpened={this.state.mobileMiniTocOpen}
+                        toggleMiniTocOpen={() =>
+                            this.setState({mobileMiniTocOpen: !this.state.mobileMiniTocOpen})
+                        }
+                        closeMiniToc={() => this.setState({mobileMiniTocOpen: false})}
+                    />
                     {/* This key allows recalculating the offset for the mini-toc for Safari */}
                     <div
-                        className={b('aside')}
+                        className={b('aside', modes)}
                         key={getStateKey(this.showMiniToc, wideFormat, singlePage)}
                     >
                         {hideMiniToc ? null : this.renderAsideMiniToc()}

diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss
@@ -10,6 +10,10 @@
         color: var(--g-color-text-primary);
         margin-bottom: 12px;
         margin-top: 0;
+
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+            margin-bottom: 8px;
+        }
     }
 
     &__sections {
@@ -18,8 +22,14 @@
         height: calc(
             100vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height)
         );
-        overflow-y: auto;
-        overflow-x: hidden;
+        overflow: hidden auto;
+
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+            height: fit-content;
+            max-height: calc(
+                80vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height)
+            );
+        }
     }
 
     &__section {