From f1960281f8ce1b5f7a7c4aca2498657f589a91ba Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 7 Sep 2020 17:13:31 +0200
Subject: [PATCH] Add styles to expand button

---
 src/components/SideBar/ExpandButton.tsx | 56 +++++++++++++++++++++++++
 src/components/SideBar/MenuItem.tsx     |  2 +-
 src/components/SideBar/SideBar.tsx      | 12 +++++-
 3 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/components/SideBar/ExpandButton.tsx b/src/components/SideBar/ExpandButton.tsx
index e69de29bb..9a9550537 100644
--- a/src/components/SideBar/ExpandButton.tsx
+++ b/src/components/SideBar/ExpandButton.tsx
@@ -0,0 +1,56 @@
+import { ButtonProps } from "@material-ui/core/Button";
+import ButtonBase from "@material-ui/core/ButtonBase";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import ArrowIcon from "@material-ui/icons/ArrowBack";
+import classNames from "classnames";
+import React from "react";
+
+const useStyles = makeStyles(
+  theme => ({
+    arrow: {
+      transition: theme.transitions.duration.shortest + "ms"
+    },
+    root: {
+      "&:hover, &:focus": {
+        background: "#daedeb"
+      },
+      background: theme.palette.background.paper,
+      borderRadius: 16,
+      color: theme.palette.primary.main,
+      height: 48,
+      transition: theme.transitions.duration.shortest + "ms",
+      width: 48
+    },
+    shrunk: {
+      transform: "scaleX(-1)"
+    }
+  }),
+  {
+    name: "ExpandButton"
+  }
+);
+
+export interface ExpandButtonProps extends ButtonProps {
+  isShrunk: boolean;
+}
+
+const ExpandButton: React.FC<ExpandButtonProps> = ({
+  className,
+  isShrunk,
+  ...rest
+}) => {
+  const classes = useStyles({});
+
+  return (
+    <ButtonBase className={classNames(classes.root, className)} {...rest}>
+      <ArrowIcon
+        className={classNames(classes.arrow, {
+          [classes.shrunk]: isShrunk
+        })}
+      />
+    </ButtonBase>
+  );
+};
+
+ExpandButton.displayName = "ExpandButton";
+export default ExpandButton;
diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx
index 73a1f9ccb..7a583a7e9 100644
--- a/src/components/SideBar/MenuItem.tsx
+++ b/src/components/SideBar/MenuItem.tsx
@@ -59,7 +59,7 @@ const useStyles = makeStyles(
       height: 56,
       marginBottom: theme.spacing(),
       overflow: "hidden",
-      padding: theme.spacing(2, 3),
+      padding: theme.spacing(2, 3, 2, 3.5),
       transition: theme.transitions.duration.shortest + "ms",
       width: 72
     },
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index b298b4a35..6b558d6f4 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -10,13 +10,17 @@ import SVG from "react-inlinesvg";
 import { useIntl } from "react-intl";
 
 import { IMenuItem } from "../AppLayout/menuStructure";
+import ExpandButton from "./ExpandButton";
 import MenuItem from "./MenuItem";
 import { isMenuActive } from "./utils";
 
 const useStyles = makeStyles(
   theme => ({
+    expandButton: {
+      marginLeft: theme.spacing(2)
+    },
     logo: {
-      margin: `36px 0 ${theme.spacing(3)}px 19px`
+      margin: `36px 0 ${theme.spacing(3)}px ${theme.spacing(3)}px`
     },
     root: {
       transition: "width 0.5s ease"
@@ -97,7 +101,11 @@ const SideBar: React.FC<SideBarProps> = ({
           onClick={onMenuItemClick}
         />
       )}
-      <button onClick={() => setShrink(!isShrunk)}>toggl</button>
+      <ExpandButton
+        className={classes.expandButton}
+        isShrunk={isShrunk}
+        onClick={() => setShrink(!isShrunk)}
+      />
     </div>
   );
 };