Add navigator button

src/components/AppLayout/AppLayout.tsx

@@ -28,6 +28,7 @@ import useRouter from "use-react-router";
 
 import Container from "../Container";
 import ErrorPage from "../ErrorPage";
+import Navigator from "../Navigator";
 import AppActionContext from "./AppActionContext";
 import AppHeaderContext from "./AppHeaderContext";
 import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts";
@@ -310,6 +311,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const intl = useIntl();
   const [appState, dispatchAppState] = useAppState();
   const { location } = useRouter();
+  const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false);
 
   const menuStructure = createMenuStructure(intl);
   const configurationMenu = createConfigurationMenu(intl);
@@ -356,6 +358,11 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   };
 
   return (
+    <>
+      <Navigator
+        visible={isNavigatorVisible}
+        setVisibility={setNavigatorVisibility}
+      />
       <AppHeaderContext.Provider value={appHeaderAnchor}>
         <AppActionContext.Provider value={appActionAnchor}>
           <div className={classes.root}>
@@ -371,7 +378,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                     [classes.logoDark]: isDark
                   })}
                 >
-                <SVG src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo} />
+                  <SVG
+                    src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo}
+                  />
                 </div>
                 <Hidden smDown>
                   <div
@@ -429,6 +438,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                           checked={isDark}
                           onClick={toggleTheme}
                         />
+                        <button onClick={() => setNavigatorVisibility(true)}>
+                          naviigator
+                        </button>
                         <div className={classes.userMenuContainer} ref={anchor}>
                           <Chip
                             avatar={
@@ -520,6 +532,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           </div>
         </AppActionContext.Provider>
       </AppHeaderContext.Provider>
+    </>
   );
 };
 

src/components/Navigator/Navigator.tsx

@@ -60,8 +60,12 @@ const useStyles = makeStyles(
   }
 );
 
-const Navigator: React.FC = () => {
-  const [visible, setVisible] = React.useState(false);
+export interface NavigatorProps {
+  visible: boolean;
+  setVisibility: (state: boolean) => void;
+}
+
+const Navigator: React.FC<NavigatorProps> = ({ visible, setVisibility }) => {
   const input = React.useRef(null);
   const [query, mode, change, actions] = useQuickSearch(visible, input);
   const intl = useIntl();
@@ -76,7 +80,7 @@ const Navigator: React.FC = () => {
   React.useEffect(() => {
     hotkeys(navigatorHotkey, event => {
       event.preventDefault();
-      setVisible(!visible);
+      setVisibility(!visible);
     });
 
     if (cmp(APP_VERSION, "2.1.0") !== 1 && !notifiedAboutNavigator) {
@@ -110,7 +114,7 @@ const Navigator: React.FC = () => {
     <Modal
       className={classes.modal}
       open={visible}
-      onClose={() => setVisible(false)}
+      onClose={() => setVisibility(false)}
     >
       <Fade appear in={visible} timeout={theme.transitions.duration.short}>
         <div className={classes.root}>
@@ -122,7 +126,7 @@ const Navigator: React.FC = () => {
               onSelect={(item: QuickSearchAction) => {
                 const shouldRemainVisible = item.onClick();
                 if (!shouldRemainVisible) {
-                  setVisible(false);
+                  setVisibility(false);
                 }
               }}
               onInputValueChange={value =>

src/index.tsx

@@ -1,4 +1,3 @@
-import Navigator from "@saleor/components/Navigator";
 import useAppState from "@saleor/hooks/useAppState";
 import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory";
 import { ApolloClient } from "apollo-client";
@@ -139,7 +138,6 @@ const Routes: React.FC = () => {
       <WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
       {isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
         <AppLayout>
-          <Navigator />
           <ErrorBoundary
             onError={() =>
               dispatchAppState({