From b6d9fc39646d6a4b3dbf969503cd7eb0d92795a3 Mon Sep 17 00:00:00 2001
From: Andrey Savihin <andrey.savihin@onlyoffice.com>
Date: Tue, 16 Jul 2019 13:00:29 +0300
Subject: [PATCH] web: components: added custom scrollbar to layout aside

---
 .../src/components/layout/sub-components/aside.js     | 11 ++++++++++-
 web/ASC.Web.Storybook/stories/layout/index.stories.js |  6 +++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/aside.js b/web/ASC.Web.Components/src/components/layout/sub-components/aside.js
index bd47f58359..62badce7f5 100644
--- a/web/ASC.Web.Components/src/components/layout/sub-components/aside.js
+++ b/web/ASC.Web.Components/src/components/layout/sub-components/aside.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import { Scrollbars } from 'react-custom-scrollbars';
 
 const StyledAside = styled.aside`
   background-color: #fff;
@@ -15,6 +16,14 @@ const StyledAside = styled.aside`
   z-index: 400;
 `;
 
-const Aside = props => <StyledAside {...props}/>
+const renderAsideThumbVertical = ({ style, ...props }) => 
+  <div {...props} style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.1)', width: '2px', marginLeft: '2px', borderRadius: 'inherit'}}/>
+
+const Aside = props => <StyledAside visible={props.visible}>
+  <Scrollbars
+    renderThumbVertical={renderAsideThumbVertical}
+    {...props}
+  />
+</StyledAside>
 
 export default Aside;
\ No newline at end of file
diff --git a/web/ASC.Web.Storybook/stories/layout/index.stories.js b/web/ASC.Web.Storybook/stories/layout/index.stories.js
index c2b9c099dc..3ee0d0f6a2 100644
--- a/web/ASC.Web.Storybook/stories/layout/index.stories.js
+++ b/web/ASC.Web.Storybook/stories/layout/index.stories.js
@@ -86,11 +86,11 @@ const currentModuleId = '44444444-4444-4444-4444-444444444444';
 
 const onLogoClick = (e) => {action('Logo Clicked')(e)};
 
-const asideContent = <p style={{padding: 40}}>Aside Content</p>;
+const asideContent = <p style={{padding: '200px 40px'}}>Aside Content</p>;
 const articleHeaderContent = "Article Header";
-const articleBodyContent = <p style={{padding: 40}}>Article Content</p>;
+const articleBodyContent = <p style={{padding: '200px 40px'}}>Article Content</p>;
 const sectionHeaderContent = "Section Header";
-const sectionBodyContent = <p style={{padding: 40}}>Section Content</p>;
+const sectionBodyContent = <p style={{padding: '200px 40px'}}>Section Content</p>;
 
 storiesOf('Components|Layout', module)
   .add('Layout', () => (