🔨 Refactor Navigation to use React Hooks, TypeScript (codesandbox#2046)

Applied coding conventions to the Sandbox Workspace Navigation component.

Removed unused SVGs and updated references in UserMenu and Dashboard Sidebar to use icons from the common lib instead.

Tested locally. No observable changes in behavior.

Author: Saeris

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/index.js

@@ -5,7 +5,7 @@ import AddFolderIcon from 'react-icons/lib/md/create-new-folder';
 import { inject, observer } from 'mobx-react';
 
 import { Query } from 'react-apollo';
-import InfoIcon from 'app/pages/Sandbox/Editor/Navigation/InfoIcon';
+import InfoIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/sandbox.svg';
 import DelayedAnimation from 'app/components/DelayedAnimation';
 
 import Item from '../Item';

packages/app/src/app/pages/Sandbox/Editor/Navigation/ConfigurationIcon.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import PlusIcon from 'react-icons/lib/go/plus';
+import ServerIcon from 'react-icons/lib/go/server';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+// @ts-ignore
+import InfoIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/sandbox.svg';
+// @ts-ignore
+import GitHubIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/github.svg';
+// @ts-ignore
+import LiveIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/live.svg';
+// @ts-ignore
+import FilesIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/file.svg';
+// @ts-ignore
+import RocketIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/rocket.svg';
+// @ts-ignore
+import ConfigurationIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/cog.svg';
+import getWorkspaceItems from 'app/store/modules/workspace/items';
+import { useSignals, useStore } from 'app/store';
+import { Container, IconContainer } from './elements';
+
+const IDS_TO_ICONS = {
+  project: InfoIcon,
+  'project-summary': InfoIcon,
+  files: FilesIcon,
+  github: GitHubIcon,
+  deploy: RocketIcon,
+  config: ConfigurationIcon,
+  live: LiveIcon,
+  more: PlusIcon,
+  server: ServerIcon,
+};
+
+export const Navigation = observer(
+  ({
+    topOffset,
+    bottomOffset,
+  }: {
+    topOffset: number;
+    bottomOffset: number;
+  }) => {
+    const {
+      workspace: { setWorkspaceHidden, setWorkspaceItem },
+    } = useSignals();
+    const store = useStore();
+
+    return (
+      <Container topOffset={topOffset} bottomOffset={bottomOffset}>
+        {getWorkspaceItems(store)
+          .filter(w => !w.show || w.show(store))
+          .map(item => {
+            const { id, name } = item;
+            const Icon = IDS_TO_ICONS[id];
+            const selected =
+              !store.workspace.workspaceHidden &&
+              id === store.workspace.openedWorkspaceItem;
+            return (
+              <Tooltip key={id} placement="right" content={name}>
+                <IconContainer
+                  selected={selected}
+                  onClick={() => {
+                    if (selected) {
+                      setWorkspaceHidden({ hidden: true });
+                    } else {
+                      setWorkspaceHidden({ hidden: false });
+                      setWorkspaceItem({ item: id });
+                    }
+                  }}
+                >
+                  <Icon />
+                </IconContainer>
+              </Tooltip>
+            );
+          })}
+      </Container>
+    );
+  }
+);