Add Sidebar component

src/components/Sidebar.js

@@ -0,0 +1,86 @@
+import React, { Component, Fragment, createRef } from 'react'
+import cx from 'classnames'
+import { browserHistory } from 'react-router'
+import { Subject } from 'rxjs'
+import { takeUntil, tap } from 'rxjs/operators'
+
+import Ad from 'components/Ad'
+import { menuItems } from 'constants/menu'
+
+import './Sidebar.scss'
+
+type Props = {
+
+}
+
+class Sidebar extends Component<Props> {
+  destroy$ = new Subject()
+
+  componentWillUnmount() {
+    this.destroy$.next(true)
+  }
+
+  render() {
+    const { query, pathname } = browserHistory.getCurrentLocation()
+
+    const selectedItem = {
+      link: pathname,
+      pathnameOnly: String(pathname).split('?')[0],
+      label: query && query.l
+    }
+
+    return (
+      <div className="Sidebar">
+        <div 
+          className={cx('Sidebar__label', {
+            'Sidebar__label--selected': query && !query.l,
+          })}
+          onClick={() => browserHistory.push('/')}
+        >
+          Welcome
+        </div>
+        {menuItems && Object.entries(menuItems).map(([bookLabel, items]) => {
+
+          const isBookLabelSelected = selectedItem.label && (selectedItem.label === bookLabel)
+
+          return (
+            <Fragment>
+              <div 
+                className={cx('Sidebar__label', {
+                  'Sidebar__label--selected': isBookLabelSelected,
+                })}
+                onClick={() => {
+                  if (items && items.length !== 0) {
+                    browserHistory.push(items[0].link)
+                  }
+                }}
+              >
+                {bookLabel}
+              </div>
+              {isBookLabelSelected && items.map(({ title, link }) => {
+                const itemPathnameOnly = String(link).split('?')[0]
+                const isItemSelected = isBookLabelSelected
+                  && selectedItem.pathnameOnly 
+                  && (selectedItem.pathnameOnly === itemPathnameOnly)
+
+                return (
+                  <li 
+                    className={cx('Sidebar__link', {
+                      'Sidebar__link--selected': isItemSelected,
+                    })}
+                    onClick={() => browserHistory.push(link)}
+                  >
+                    {title}
+                  </li>
+                )
+              })}
+            </Fragment>
+          )
+        })}
+        <Ad />
+      </div>
+    )
+  }
+}
+
+export default Sidebar

src/components/Sidebar.scss

@@ -0,0 +1,79 @@
+.Sidebar {
+  background-color: #f5f5f5;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  overflow: scroll;
+}
+
+.Sidebar__label {
+  @include font-style('font-1-16');
+  @include shrink-active;
+
+  font-weight: bold;
+  margin-bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  padding-left: 16px;
+  background-color: transparent;
+  color: #666666;
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    background-image: url(/static/images/go-deeper.svg);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 9px;
+    width: 24px;
+    height: 24px;
+    background-size: 100%;
+    transition: transform 200ms;
+  }
+
+  &:hover {
+    color: #999999;
+    border-radius: 6px;
+    background-color: #ededed;
+  }
+
+  &--selected {
+    color: #39cc96 !important;
+    border-radius: 6px;
+    background-color: #e8e8e8;
+
+    &::after {
+      transform: translateY(-50%) rotate(90deg);
+    }
+  }
+}
+
+.Sidebar__link {
+  @include font-style('font-1-14');
+  color: #999999;
+  font-weight: bold;
+  display: block;
+  padding: 3px 0;
+  padding-left: 28px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: color 150ms, transform 150ms;
+
+  &:nth-of-type(1) {
+    margin-top: 12px;
+  }
+
+  &:hover {
+    color: #666666;
+  }
+
+  &:active {
+    transform: scale(.93);
+  }
+
+  &--selected {
+    color: #39cc96 !important;
+  }
+}