🔨 Switch Dashboard/Sidebar to use useOvermind

Author: MichaelDeBoey

packages/app/package.json

@@ -198,7 +198,7 @@
     "react-motion": "^0.5.0",
     "react-outside-click-handler": "^1.2.3",
     "react-refresh": "^0.7.2",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "^5.1.2",
     "react-scrollbars-custom": "^4.0.20",
     "react-show": "^3.0.4",
     "react-split-pane": "^0.1.87",
@@ -265,7 +265,7 @@
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",
     "@types/react-instantsearch": "^5.2.3",
-    "@types/react-router-dom": "^4.3.1",
+    "@types/react-router-dom": "^5.1.3",
     "@types/react-stripe-elements": "^1.3.2",
     "@types/resolve": "^0.0.8",
     "@types/semver": "6.2.0",

packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/elements.ts

@@ -0,0 +1,34 @@
+import { NavLink } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+export const Container = styled(NavLink)<{ active: boolean }>`
+  ${({ active, theme }) => css`
+    transition: 0.3s ease all;
+    display: flex;
+    width: 100%;
+    height: 2.5rem;
+    user-select: none;
+
+    align-items: center;
+
+    padding: 0 0.5rem;
+    box-sizing: border-box;
+
+    color: ${theme.placeholder};
+    text-decoration: none;
+    background-color: transparent;
+
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+      color: white;
+    }
+
+    ${active &&
+      css`
+        background-color: ${theme.secondary};
+        color: white;
+      `};
+  `};
+`;

packages/app/src/app/pages/Dashboard/Sidebar/Item/Container/index.tsx

@@ -0,0 +1,25 @@
+import React, { ComponentProps, FunctionComponent } from 'react';
+
+import { ContextMenu } from 'app/components/ContextMenu';
+
+import { Container as ContainerBase } from './elements';
+
+type ContainerBaseProps = ComponentProps<typeof ContainerBase>;
+type Props = {
+  contextItems?: ComponentProps<typeof ContextMenu>['items'];
+} & Partial<Pick<ContainerBaseProps, 'onClick' | 'style'>> &
+  Pick<ContainerBaseProps, 'active' | 'as' | 'exact' | 'to'>;
+export const Container: FunctionComponent<Props> = ({
+  contextItems,
+  ...props
+}) => {
+  if (!contextItems) {
+    return <ContainerBase {...props} />;
+  }
+
+  return (
+    <ContextMenu items={contextItems}>
+      <ContainerBase {...props} />
+    </ContextMenu>
+  );
+};

packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.js

@@ -0,0 +1,34 @@
+import ChevronRight from 'react-icons/lib/md/chevron-right';
+import { Animate as AnimateBase } from 'react-show';
+import styled, { css } from 'styled-components';
+
+export const Animate = styled(AnimateBase)`
+  height: auto;
+  overflow: hidden;
+`;
+
+export const AnimatedChevron = styled(ChevronRight)<{ open: boolean }>`
+  ${({ open }) => css`
+    transition: 0.25s ease transform;
+    transform: rotate(${open ? 90 : 0}deg);
+    margin-right: 0.25rem;
+    width: 1rem;
+  `};
+`;
+
+export const ChevronPlaceholder = styled.div`
+  width: 16px;
+  height: 16px;
+  margin-right: 0.25rem;
+`;
+
+export const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 2rem;
+  font-size: 1.25rem;
+`;
+
+export const ItemName = styled.div`
+  font-size: 0.875rem;
+`;

packages/app/src/app/pages/Dashboard/Sidebar/Item/elements.ts

@@ -0,0 +1,94 @@
+import React, {
+  ComponentProps,
+  ComponentType,
+  FunctionComponent,
+  useEffect,
+  useState,
+} from 'react';
+import { useRouteMatch } from 'react-router-dom';
+
+import { Container } from './Container';
+import {
+  Animate,
+  AnimatedChevron,
+  ChevronPlaceholder,
+  IconContainer,
+  ItemName,
+} from './elements';
+
+type ContainerProps = ComponentProps<typeof Container>;
+type Props = {
+  active?: boolean;
+  Icon: ComponentType;
+  name: string;
+  openByDefault?: boolean;
+  path: ContainerProps['to'];
+} & Omit<
+  ComponentProps<typeof Container>,
+  'active' | 'children' | 'exact' | 'to'
+>;
+export const Item: FunctionComponent<Props> = ({
+  active = false,
+  children,
+  Icon,
+  name,
+  openByDefault,
+  path,
+  ...props
+}) => {
+  const match = useRouteMatch(path);
+  const [open, setOpen] = useState(openByDefault);
+  const isActive = match?.isExact || active;
+  const isOpen = open || isActive;
+
+  useEffect(() => {
+    if (openByDefault) {
+      setOpen(true);
+    }
+  }, [openByDefault]);
+
+  useEffect(() => {
+    if ((match || isActive) && open === undefined && children) {
+      setOpen(true);
+    }
+  }, [children, isActive, match, open]);
+
+  const toggleOpen = event => {
+    event.preventDefault();
+
+    setOpen(show => !show);
+  };
+
+  return (
+    <>
+      <Container active={isActive} exact to={path} {...props}>
+        {children ? (
+          <AnimatedChevron onClick={toggleOpen} open={isOpen} />
+        ) : (
+          <ChevronPlaceholder />
+        )}
+
+        <IconContainer>
+          <Icon />
+        </IconContainer>
+
+        <ItemName>{name}</ItemName>
+      </Container>
+
+      {children && (
+        <Animate
+          duration={250}
+          show={isOpen}
+          start={{
+            height: 0, // The starting style for the component.
+            // If the 'leave' prop isn't defined, 'start' is reused!
+          }}
+          stayMounted={false}
+          transitionOnMount
+        >
+          {children}
+        </Animate>
+      )}
+    </>
+  );
+};