feat(Sidebar): improved mobile handler

.storybook/blocks/DocsPage.tsx

@@ -1,8 +1,4 @@
 import React, { FC } from 'react';
-/*import { Title } from './Title';
-import { Subtitle } from './Subtitle';
-import { Description } from './Description';
-*/
 import { Subtitle } from './Subtitle';
 import { Primary } from './Primary';
 import { Description } from './Description';

.storybook/blocks/Preview.tsx

@@ -95,13 +95,11 @@ const getPreviewProps = (
 };
 
 export const Preview: FC<PreviewProps> = (props) => {
-  console.log('props', props);
   const docsContext = useContext(DocsContext);
   const sourceContext = useContext(SourceContext);
   const previewProps = getPreviewProps(props, docsContext, sourceContext);
   const { children } = props;
 
-  console.log('waaahh', docsContext, previewProps);
   return (
     <MDXProvider components={resetComponents}>
       <PurePreview

src/components/Sidebar/Sidebar.js

@@ -26,10 +26,7 @@ export default function Sidebar({
     <div className={classes} {...other}>
       <div className={`${prefix}--sidebar-item-content`}>{sidebar}</div>
       <div id="scroll-container" className={`${prefix}--content-section`}>
-        <div className={`${prefix}--sidebar-content-mobile-header`}>
-          {sidebarMobileHeader}
-        </div>
-        <div className={`${prefix}--sidebar-content__children`}>{children}</div>
+        {children}
       </div>
     </div>
   );
@@ -79,6 +76,58 @@ SidebarHeader.propTypes = {
   noPadding: PropTypes.bool,
 };
 
+export function SidebarContentHeader({
+  className,
+  children,
+  noPadding,
+  ...other
+}) {
+  const classes = classNames(
+    `${prefix}--sidebar-content-mobile-header`,
+    className,
+    {}
+  );
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+}
+
+SidebarContentHeader.propTypes = {
+  /**
+   The children of header of content area
+ */
+  children: PropTypes.node,
+};
+
+export function SidebarContentBody({
+  className,
+  children,
+  noPadding,
+  ...other
+}) {
+  const classes = classNames(
+    `${prefix}--sidebar-content__children`,
+    className,
+    {}
+  );
+
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+}
+
+SidebarContentBody.propTypes = {
+  /**
+   The children of header of content area
+ */
+  children: PropTypes.node,
+};
+
 export function SidebarScroll({ children, ...other }) {
   return (
     <div className={`${prefix}--sidebar-content__scroll`} {...other}>

src/components/Sidebar/_sidebar.scss

@@ -26,6 +26,7 @@
   .#{$prefix}--sidebar-content__children {
     background-color: var(--ui-01);
     flex: 1;
+    overflow: auto;
   }
 
   .#{$prefix}--sidebar-content__scroll {
@@ -55,7 +56,6 @@
     align-items: stretch;
     //height: 100vh;
     flex: 1;
-    overflow: auto;
     @include breakpointMax(bp--md--major) {
       .#{$prefix}--sidebar-content__container--active & {
         transform: translateX(0%);
@@ -67,26 +67,31 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
       z-index: 100;
     }
   }
   .#{$prefix}--sidebar-content-mobile-header {
     display: none;
-    @include breakpointMax(bp--sm--major) {
+    @include breakpointMax(bp--md--major) {
       display: block;
       padding: 1em;
       display: flex;
       justify-content: space-between;
+      align-items: center;
       background: var(--ui-01);
       border-bottom: 1px solid var(--ui-02);
+      z-index: 10000;
+      width: 100%;
     }
   }
 
   .#{$prefix}--sidebar-content__back-button {
     font-weight: 500;
     color: var(--interactive-01);
     cursor: pointer;
+    display: inline-block;
+    text-decoration: none i !important;
     svg {
       margin-right: 0.3em;
       path {

src/components/Sidebar/index.js

@@ -1,2 +1,8 @@
 export default from './Sidebar';
-export { SidebarHeader, SidebarScroll, SidebarBackButton } from './Sidebar';
+export {
+  SidebarHeader,
+  SidebarContentHeader,
+  SidebarContentBody,
+  SidebarScroll,
+  SidebarBackButton,
+} from './Sidebar';

src/index.js

@@ -95,9 +95,10 @@ export SelectItemGroup from './components/SelectItemGroup';
 export Sidebar, {
   SidebarHeader,
   SidebarScroll,
+  SidebarContentHeader,
+  SidebarContentBody,
   SidebarBackButton,
 } from './components/Sidebar';
-
 export Switch from './components/Switch';
 export Slider from './components/Slider';
 export Story from './components/Story';