Add cmd k to navigate pages (#254)

* Begin styled command bar

* Add 2 commands and improve styling

* Add storybook

* Move z-index to variables and use hotkey hook

front/src/modules/search/components/CommandMenu.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  StyledDialog,
+  StyledEmpty,
+  StyledGroup,
+  StyledInput,
+  StyledItem,
+  StyledList,
+  // StyledSeparator,
+} from './CommandMenuStyles';
+
+export const CommandMenu = ({ initiallyOpen = false }) => {
+  const [open, setOpen] = React.useState(initiallyOpen);
+
+  useHotkeys(
+    'ctrl+k,meta+k',
+    () => {
+      setOpen((prevOpen) => !prevOpen);
+    },
+    {
+      preventDefault: true,
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [setOpen],
+  );
+
+  const navigate = useNavigate();
+
+  return (
+    <StyledDialog
+      open={open}
+      onOpenChange={setOpen}
+      label="Global Command Menu"
+    >
+      <StyledInput />
+      <StyledList>
+        <StyledEmpty>No results found.</StyledEmpty>
+
+        <StyledGroup heading="Go to">
+          <StyledItem
+            onSelect={() => {
+              setOpen(false);
+              navigate('/people');
+            }}
+          >
+            People
+          </StyledItem>
+          <StyledItem
+            onSelect={() => {
+              setOpen(false);
+              navigate('/companies');
+            }}
+          >
+            Companies
+          </StyledItem>
+        </StyledGroup>
+      </StyledList>
+    </StyledDialog>
+  );
+};