feat: 💄 use custom-styled scrollbar in scrollable areas

filipowm · Jun 6, 2020 · 651b318 · 651b318
1 parent c1a8ca7
commit 651b318
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
@@ -5,6 +5,7 @@ import ContentTree from './contentTree';
 import Links from './links';
 import PoweredBy from './poweredBy';
 import { getNavigationData } from '../navigation';
+import { scrollbar } from '../../styles/base'
 
 const Sidebar = styled.div`
  margin-left: ${(props) => props.theme.layout.leftMargin};
@@ -112,7 +113,7 @@ const ContentNavigation = ({ className, location }) => {
  const edges = getNavigationData();
  return (
  <NavigationWrapper className={className}>
- <SidebarMain>
+ <SidebarMain css={scrollbar}>
  <ContentTree edges={edges} location={location} />
  {config.sidebar.links && config.sidebar.links.length > 0 ? (
  <>

diff --git a/src/components/tableOfContents/index.js b/src/components/tableOfContents/index.js
@@ -5,6 +5,7 @@ import { AlignRight } from 'react-feather';
 import config from 'config';
 import Scrollspy from 'react-scrollspy';
 import { sleep } from '../../utils/utils';
+import { scrollbar } from '../../styles/base'
 
 const Sidebar = styled.aside`
  background-color: ${(props) => props.theme.tableOfContents.background};
@@ -195,7 +196,7 @@ const TableOfContents = ({ className, location }) => (
  }
  };
  return (
- <Sidebar className={className}>
+ <Sidebar className={className} css={scrollbar}>
  <TocTitle>Contents</TocTitle>
  <Scrollspy
  ref={scrollspyRef}

diff --git a/src/html.js b/src/html.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import config from 'config';
+import { scrollbar } from './styles/base';
 
 export default class HTML extends React.Component {
  render() {
@@ -23,7 +24,7 @@ export default class HTML extends React.Component {
  <noscript key="noscript"></noscript>
  {this.props.headComponents}
  </head>
- <body {...this.props.bodyAttributes}>
+ <body css={scrollbar} {...this.props.bodyAttributes}>
  {this.props.preBodyComponents}
  <div key={`body`} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
  {this.props.postBodyComponents}

diff --git a/src/styles/base.js b/src/styles/base.js
@@ -147,3 +147,22 @@ export const table = (theme) => css`
  margin-bottom: 0;
  }
 `;
+
+export const scrollbar = css`
+&::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ border-radius: 8px;
+ background-color: #F5F5F5;
+}
+
+&::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5;
+}
+
+&::-webkit-scrollbar-thumb {
+ border-radius: 8px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+ background-color: #555;
+}
+`;