From 962323ecce95c9733f64a8f6a364cd96218d8876 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Gu=CC=88hne?= <robert@polyxostudios.de>
Date: Mon, 19 Apr 2021 11:31:33 +0200
Subject: [PATCH] feat(Sidebar): improved mobile handler

---
 .storybook/blocks/DocsPage.tsx       |  4 --
 .storybook/blocks/Preview.tsx        |  2 -
 src/components/Sidebar/Sidebar.js    | 57 ++++++++++++++++++++++++++--
 src/components/Sidebar/_sidebar.scss | 11 ++++--
 src/components/Sidebar/index.js      |  8 +++-
 src/index.js                         |  3 +-
 6 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/.storybook/blocks/DocsPage.tsx b/.storybook/blocks/DocsPage.tsx
index b308f67f0..1160a7c8b 100644
--- a/.storybook/blocks/DocsPage.tsx
+++ b/.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';
diff --git a/.storybook/blocks/Preview.tsx b/.storybook/blocks/Preview.tsx
index 6ce0c7e69..0564aa846 100644
--- a/.storybook/blocks/Preview.tsx
+++ b/.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
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index 29da4920e..8c2fc7927 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/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}>
diff --git a/src/components/Sidebar/_sidebar.scss b/src/components/Sidebar/_sidebar.scss
index 78247c7a5..067b97d10 100644
--- a/src/components/Sidebar/_sidebar.scss
+++ b/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,19 +67,22 @@
       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%;
     }
   }
 
@@ -87,6 +90,8 @@
     font-weight: 500;
     color: var(--interactive-01);
     cursor: pointer;
+    display: inline-block;
+    text-decoration: none i !important;
     svg {
       margin-right: 0.3em;
       path {
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index cf920ba88..5b2d5dd83 100644
--- a/src/components/Sidebar/index.js
+++ b/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';
diff --git a/src/index.js b/src/index.js
index f96184215..9cab88a35 100755
--- a/src/index.js
+++ b/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';