chrone: sperate client and server to different repos.

src/components/Sidebar/Sidebar.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import SidebarContainer from 'components/Sidebar/SidebarContainer';
+import SidebarHead from 'components/Sidebar/SidebarHead';
+import SidebarMenu from 'components/Sidebar/SidebarMenu';
+
+import 'style/containers/Dashboard/Sidebar.scss';
+
+export default function Sidebar({ dashboardContentRef }) {
+  return (
+    <SidebarContainer>
+      <SidebarHead />
+
+      <div className="sidebar__menu">
+        <SidebarMenu />
+      </div>
+
+      <div class="sidebar__version">0.0.1-beta version.</div>
+    </SidebarContainer>
+  );
+}

src/components/Sidebar/SidebarContainer.js

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react';
+import { Scrollbar } from 'react-scrollbars-custom';
+import classNames from 'classnames';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboard from 'containers/Dashboard/withDashboard';
+
+import { compose } from 'utils';
+import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
+
+function SidebarContainer({
+  // #ownProps
+  children,
+
+  // #withDashboardActions
+  toggleSidebarExpend,
+
+  // #withDashboard
+  sidebarExpended,
+
+  // #withSubscription
+  isSubscriptionActive,
+}) {
+  const sidebarScrollerRef = React.useRef();
+
+  useEffect(() => {
+    document.body.classList.toggle('has-mini-sidebar', !sidebarExpended);
+
+    if (!sidebarExpended && sidebarScrollerRef.current) {
+      sidebarScrollerRef.current.scrollTo({
+        top: 0,
+        left: 0,
+      });
+    }
+  }, [sidebarExpended]);
+
+  const handleSidebarMouseLeave = () => {
+    if (!sidebarExpended && sidebarScrollerRef.current) {
+      sidebarScrollerRef.current.scrollTo({ top: 0, left: 0 });
+    }
+  };
+
+  const scrollerElementRef = (ref) => {
+    sidebarScrollerRef.current = ref;
+  };
+
+  return (
+    <div
+      className={classNames('sidebar', {
+        'sidebar--mini-sidebar': !sidebarExpended,
+        'is-subscription-inactive': !isSubscriptionActive,
+      })}
+      id="sidebar"
+      onMouseLeave={handleSidebarMouseLeave}
+    >
+      <div className={'sidebar__scroll-wrapper'}>
+        <Scrollbar
+          noDefaultStyles={true}
+          scrollerProps={{ elementRef: scrollerElementRef }}
+        >
+          <div className="sidebar__inner">{children}</div>
+        </Scrollbar>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withDashboard(({ sidebarExpended }) => ({
+    sidebarExpended,
+  })),
+  withSubscriptions(
+    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
+    'main',
+  ),
+)(SidebarContainer);

src/components/Sidebar/SidebarHead.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Button, Popover, Menu, Position } from '@blueprintjs/core';
+import Icon from 'components/Icon';
+import { compose, firstLettersArgs } from 'utils';
+import withCurrentOrganization from '../../containers/Organization/withCurrentOrganization';
+import { useAuthenticatedUser } from '../Dashboard/AuthenticatedUser';
+
+// Popover modifiers.
+const POPOVER_MODIFIERS = {
+  offset: { offset: '28, 8' },
+};
+
+/**
+ * Sideabr head.
+ */
+function SidebarHead({
+  // #withCurrentOrganization
+  organization,
+}) {
+  // Retrieve authenticated user information.
+  const { user } = useAuthenticatedUser();
+
+  return (
+    <div className="sidebar__head">
+      <div className="sidebar__head-organization">
+        <Popover
+          modifiers={POPOVER_MODIFIERS}
+          boundary={'window'}
+          content={
+            <Menu className={'menu--dashboard-organization'}>
+              <div class="org-item">
+                <div class="org-item__logo">
+                  {firstLettersArgs(...(organization.name || '').split(' '))}{' '}
+                </div>
+                <div class="org-item__name">{organization.name}</div>
+              </div>
+            </Menu>
+          }
+          position={Position.BOTTOM}
+          minimal={true}
+        >
+          <Button
+            className="title"
+            rightIcon={<Icon icon={'caret-down-16'} size={16} />}
+          >
+            {organization.name}
+          </Button>
+        </Popover>
+        <span class="subtitle">{user.full_name}</span>
+      </div>
+
+      <div className="sidebar__head-logo">
+        <Icon
+          icon={'mini-bigcapital'}
+          width={28}
+          height={28}
+          className="bigcapital--alt"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withCurrentOrganization(({ organization }) => ({ organization })),
+)(SidebarHead);

src/components/Sidebar/SidebarMenu.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Menu, MenuDivider } from '@blueprintjs/core';
+import { useHistory, useLocation } from 'react-router-dom';
+import sidebarMenuList from 'config/sidebarMenu';
+import { Choose } from 'components';
+import Icon from 'components/Icon';
+import MenuItem from 'components/MenuItem';
+import { MenuItemLabel } from 'components';
+import classNames from 'classnames';
+import SidebarOverlay from 'components/SidebarOverlay';
+import { compose } from 'redux';
+import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
+
+const DEFAULT_ITEM = {
+  text: '',
+  href: '',
+};
+
+function matchPath(pathname, path, matchExact) {
+  return matchExact ? pathname === path : pathname.indexOf(path) !== -1;
+}
+
+function SidebarMenuItemSpace({ space }) {
+  return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
+}
+
+function SidebarMenu({ isSubscriptionActive }) {
+  const history = useHistory();
+  const location = useLocation();
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [currentItem, setCurrentItem] = React.useState(null);
+
+  const menuItemsMapper = (list) => {
+    return list.map((item, index) => {
+      const hasChildren = Array.isArray(item.children);
+
+      const isActive =
+        (item.children
+          ? item.children.some((c) =>
+              matchPath(location.pathname, c.href, item.matchExact),
+            )
+          : item.href &&
+            matchPath(location.pathname, item.href, item.matchExact)) ||
+        currentItem === item;
+
+      const handleItemClick = () => {
+        if (item.href) {
+          history.push(item.href);
+        }
+        if (item.children && item.children.length > 0) {
+          setIsOpen(true);
+          setCurrentItem(item);
+        } else {
+          setIsOpen(false);
+        }
+      };
+
+      return (
+        <Choose>
+          <Choose.When condition={item.spacer}>
+            <SidebarMenuItemSpace space={item.spacer} />
+          </Choose.When>
+
+          <Choose.When condition={item.divider}>
+            <MenuDivider key={index} title={item.title} />
+          </Choose.When>
+
+          <Choose.When condition={item.label}>
+            <MenuItemLabel key={index} text={item.text} />
+          </Choose.When>
+
+          <Choose.Otherwise>
+            <MenuItem
+              key={index}
+              active={isActive}
+              icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
+              text={item.text}
+              disabled={item.disabled}
+              dropdownType={item.dropdownType || 'collapse'}
+              caretIconSize={16}
+              onClick={handleItemClick}
+              callapseActive={!!isActive}
+              itemClassName={classNames({
+                'is-active': isActive,
+                'has-icon': !hasChildren && item.icon,
+              })}
+              hasSubmenu={hasChildren}
+            />
+          </Choose.Otherwise>
+        </Choose>
+      );
+    });
+  };
+
+  const filterItems = sidebarMenuList.filter(
+    (item) => isSubscriptionActive || item.enableBilling,
+  );
+  const items = menuItemsMapper(filterItems);
+
+  const handleSidebarOverlayClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <Menu className="sidebar-menu">{items}</Menu>{' '}
+      <SidebarOverlay
+        isOpen={isOpen}
+        label={currentItem?.text || ''}
+        items={currentItem?.children || []}
+        onClose={handleSidebarOverlayClose}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withSubscriptions(
+    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
+    'main',
+  ),
+)(SidebarMenu);