Add styles to expand button

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;

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
     },

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>
   );
 };