Add navigator button

assets/images/navigator.svg

@@ -0,0 +1 @@
+<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M0 11.2324L6.99609 0L6.1875 6.78516H11.6895L4.79883 18L5.51953 11.2324H0Z" fill="currentColor" /></svg>

src/components/AppLayout/AppLayout.tsx

@@ -29,6 +29,7 @@ import useRouter from "use-react-router";
 import Container from "../Container";
 import ErrorPage from "../ErrorPage";
 import Navigator from "../Navigator";
+import NavigatorButton from "../NavigatorButton/NavigatorButton";
 import AppActionContext from "./AppActionContext";
 import AppHeaderContext from "./AppHeaderContext";
 import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts";
@@ -438,9 +439,12 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                           checked={isDark}
                           onClick={toggleTheme}
                         />
-                        <button onClick={() => setNavigatorVisibility(true)}>
+                        <NavigatorButton
-                          naviigator
+                          isMac={navigator.platform
-                        </button>
+                            .toLowerCase()
+                            .includes("mac")}
+                          onClick={() => setNavigatorVisibility(true)}
+                        />
                         <div className={classes.userMenuContainer} ref={anchor}>
                           <Chip
                             avatar={

src/components/NavigatorButton/NavigatorButton.stories.tsx

@@ -0,0 +1,12 @@
+import CardDecorator from "@saleor/storybook/CardDecorator";
+import Decorator from "@saleor/storybook/Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import NavigatorButton from "./NavigatorButton";
+
+storiesOf("Generics / NavigatorButton", module)
+  .addDecorator(Decorator)
+  .addDecorator(CardDecorator)
+  .add("mac", () => <NavigatorButton isMac={true} />)
+  .add("other", () => <NavigatorButton isMac={false} />);

src/components/NavigatorButton/NavigatorButton.tsx

@@ -0,0 +1,152 @@
+import navigatorIcon from "@assets/images/navigator.svg";
+import Grow from "@material-ui/core/Grow";
+import IconButton, { IconButtonProps } from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import classNames from "classnames";
+import React from "react";
+import ReactSVG from "react-inlinesvg";
+import { FormattedMessage } from "react-intl";
+
+const useStyles = makeStyles(
+  theme => {
+    const triangle = (color: string, width: number) => ({
+      borderBottom: `${width}px solid ${color}`,
+      borderLeft: `${width}px solid transparent`,
+      borderRight: `${width}px solid transparent`,
+      height: 0,
+      width: 0
+    });
+
+    return {
+      keyTile: {
+        "&:first-child": {
+          marginLeft: theme.spacing()
+        },
+        alignItems: "center",
+        background: theme.palette.background.default,
+        borderRadius: 8,
+        display: "inline-flex",
+        height: 32,
+        justifyContent: "center",
+        marginLeft: theme.spacing(0.5),
+        padding: theme.spacing(),
+        width: 32
+      },
+      keyTileLabel: {
+        verticalAlign: "middle"
+      },
+      paper: {
+        "&:after": {
+          ...triangle(theme.palette.background.paper, 7),
+          content: "''",
+          left: theme.spacing(2) + 2,
+          position: "absolute",
+          top: -theme.spacing() + 1
+        },
+        "&:before": {
+          ...triangle(theme.palette.divider, 8),
+          content: "''",
+          left: theme.spacing(2) + 1,
+          position: "absolute",
+          top: -theme.spacing()
+        },
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: 6,
+        marginTop: theme.spacing(2),
+        padding: theme.spacing(2),
+        position: "relative"
+      },
+
+      root: {
+        "& path": {
+          color: theme.palette.primary.main
+        },
+        "&:not(:hover)": {
+          backgroundColor: theme.palette.background.paper
+        },
+        border: `1px solid ${theme.palette.divider}`,
+        height: 40,
+        marginRight: theme.spacing(2),
+        width: 40
+      }
+    };
+  },
+  {
+    name: "NavigatorButton"
+  }
+);
+
+export interface NavigatorButtonProps extends IconButtonProps {
+  isMac: boolean;
+}
+
+const NavigatorButton: React.FC<NavigatorButtonProps> = ({
+  className,
+  isMac,
+  ...props
+}) => {
+  const classes = useStyles({});
+  const helperTimer = React.useRef(null);
+  const [helperVisibility, setHelperVisibility] = React.useState(false);
+  const anchor = React.useRef<HTMLButtonElement>();
+
+  const setHelper = () => {
+    helperTimer.current = setTimeout(() => setHelperVisibility(true), 2 * 1000);
+  };
+
+  const clearHelper = () => {
+    if (helperTimer.current) {
+      clearTimeout(helperTimer.current);
+      helperTimer.current = null;
+    }
+    setHelperVisibility(false);
+  };
+
+  return (
+    <>
+      <IconButton
+        className={classNames(className, classes.root)}
+        onMouseEnter={setHelper}
+        onMouseLeave={clearHelper}
+        {...props}
+        ref={anchor}
+      >
+        <ReactSVG src={navigatorIcon} />
+      </IconButton>
+      <Popper
+        open={helperVisibility}
+        anchorEl={anchor.current}
+        transition
+        disablePortal
+        placement="bottom-start"
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "right top" : "right bottom"
+            }}
+          >
+            <Paper className={classes.paper} elevation={0}>
+              <FormattedMessage defaultMessage="Navigator" />
+              <div className={classes.keyTile}>
+                <span className={classes.keyTileLabel}>
+                  {isMac ? "⌘" : "Ctrl"}
+                </span>
+              </div>
+              <div className={classes.keyTile}>
+                <span className={classes.keyTileLabel}>K</span>
+              </div>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+NavigatorButton.displayName = "NavigatorButton";
+export default NavigatorButton;