feat: Add skill tree to tab menu

src/components/Menu/index.tsx

@@ -1,7 +1,9 @@
 import React, { FC, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-type Tabs = 'tasks' | 'characters';
+import SkillTree from 'discoteque/lib/components/SkillTree';
+
+type Tabs = 'tasks' | 'characters' | 'skills';
 
 import cn from 'classnames';
 import * as styles from './styles';
@@ -12,6 +14,7 @@ const TabMenu: FC = () => {
   const [openTab, setOpenTab] = useState<Tabs>('tasks');
 
   const openTasks = () => setOpenTab('tasks');
+  const openSkills = () => setOpenTab('skills');
   const openChars = () => setOpenTab('characters');
 
   const closeMenu = () => dispatch(setShowCustom(false));
@@ -21,11 +24,12 @@ const TabMenu: FC = () => {
       <ul className={styles.menuTabList}>
         <li className={styles.menuClose} onClick={closeMenu}>X</li>
         <li className={cn({ [styles.active]: openTab === 'tasks' })} onClick={openTasks}>Tasks</li>
+        <li className={cn({ [styles.active]: openTab === 'skills' })} onClick={openSkills}>Skills</li>
         <li className={cn({ [styles.active]: openTab === 'characters' })} onClick={openChars}>Characters</li>
       </ul>
-      <div>
-        {openTab}
-      </div>
+      {openTab === 'skills' && (
+        <SkillTree />
+      )}
     </div>
   );
 }

yarn.nix

@@ -217,6 +217,14 @@
         sha1 = "336badc1beecb9dacc38bea2cf32adf627a8421a";
       };
     }
+    {
+      name = "_types_classnames___classnames_2.2.10.tgz";
+      path = fetchurl {
+        name = "_types_classnames___classnames_2.2.10.tgz";
+        url  = "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz";
+        sha1 = "cc658ca319b6355399efc1f5b9e818f1a24bf999";
+      };
+    }
     {
       name = "_types_glob___glob_7.1.3.tgz";
       path = fetchurl {
@@ -225,6 +233,14 @@
         sha1 = "e6ba80f36b7daad2c685acd9266382e68985c183";
       };
     }
+    {
+      name = "_types_hoist_non_react_statics___hoist_non_react_statics_3.3.1.tgz";
+      path = fetchurl {
+        name = "_types_hoist_non_react_statics___hoist_non_react_statics_3.3.1.tgz";
+        url  = "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz";
+        sha1 = "1124aafe5118cb591977aeb1ceaaed1070eb039f";
+      };
+    }
     {
       name = "_types_html_minifier_terser___html_minifier_terser_5.1.1.tgz";
       path = fetchurl {
@@ -289,6 +305,14 @@
         sha1 = "fe4c1e11dfc67155733dfa6aa65108b4971cb423";
       };
     }
+    {
+      name = "_types_react_redux___react_redux_7.1.9.tgz";
+      path = fetchurl {
+        name = "_types_react_redux___react_redux_7.1.9.tgz";
+        url  = "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.9.tgz";
+        sha1 = "280c13565c9f13ceb727ec21e767abe0e9b4aec3";
+      };
+    }
     {
       name = "_types_react___react_16.9.49.tgz";
       path = fetchurl {
@@ -1690,11 +1714,11 @@
       };
     }
     {
-      name = "discoteque___discoteque_1.0.8.tgz";
+      name = "discoteque___discoteque_1.1.7.tgz";
       path = fetchurl {
-        name = "discoteque___discoteque_1.0.8.tgz";
-        url  = "https://registry.yarnpkg.com/discoteque/-/discoteque-1.0.8.tgz";
-        sha1 = "128339730195d7461254986a39c561d7c8c5fa2b";
+        name = "discoteque___discoteque_1.1.7.tgz";
+        url  = "https://registry.yarnpkg.com/discoteque/-/discoteque-1.1.7.tgz";
+        sha1 = "8ac504cf7abcc0d6800282414b4ce653a42e2bf7";
       };
     }
     {