icons: restores sub navigation for slates on navigation

common/navigation-data.js

@@ -46,7 +46,6 @@ const constructSlatesTreeForNavigation = (slates) => {
       name: s.slatename,
       pageTitle: `Viewing ${s.slatename}`,
       decorator: "SLATE",
-      ignore: true,
     };
   });
 };
@@ -71,9 +70,8 @@ export const generate = ({ library = [], slates = [] }) => [
     name: "Slates",
     pageTitle: "Slates",
     decorator: "SLATES",
-    children: null,
+    children: constructSlatesTreeForNavigation(slates),
   },
-  ...constructSlatesTreeForNavigation(slates),
   constructFilesTreeForNavigation(library),
   {
     id: 4,

common/svg.js

@@ -1,3 +1,26 @@
+export const Layers = (props) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      height={props.height}
+      style={props.style}
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1"
+      >
+        <path d="m22.917 6.2-10.209-5.278.00000004.00000002c-.444136-.229361-.971863-.229361-1.416-.0000001l-10.209 5.278-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.275.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721z" />
+        <path d="m5.1 9.375-4.017 2.078-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.281.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721l-4.017-2.078" />
+        <path d="m5.1 14.625-4.017 2.075-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.275.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721l-4.017-2.081" />
+      </g>
+    </svg>
+  );
+};
+
 export const SettingsDeveloper = (props) => {
   return (
     <svg

components/core/ApplicationNavigation.js

@@ -23,7 +23,7 @@ const IconMap = {
   LOGS: <SVG.Logs height="20px" />,
   MINERS: <SVG.Miners height="20px" />,
   STORAGE_MARKET: <SVG.StorageMarket height="20px" />,
-  SLATES: <SVG.Slates height="20px" />,
+  SLATES: <SVG.Layers height="20px" />,
   SLATE: <SVG.Slates height="20px" />,
   LOCAL_DATA: <SVG.HardDrive height="20px" />,
   PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
@@ -152,17 +152,34 @@ const STYLES_ICON_ELEMENT = css`
   }
 `;
 
-const Item = ({ data, id, activeIds, level, children, showActive, decorator, onToggleShow, onNavigateTo }) => {
+const Item = ({
+  data,
+  id,
+  activeIds,
+  level,
+  children,
+  showActive,
+  decorator,
+  onToggleShow,
+  onNavigateTo,
+}) => {
   return (
-    <span css={STYLES_NAVIGATION_ITEM} style={{ padding: `0 0 0 ${level * 16}px` }}>
+    <span
+      css={STYLES_NAVIGATION_ITEM}
+      style={{ padding: `0 0 0 ${level * 16}px` }}
+    >
       <span css={STYLES_EXPANDER} onClick={onToggleShow ? onToggleShow : null}>
         <span
           css={STYLES_ICON_ELEMENT}
           style={{
             color: activeIds[id] ? Constants.system.brand : null,
-          }}>
+          }}
+        >
           {onToggleShow ? (
-            <SVG.ExpandArrow height="8px" style={showActive ? { transform: `rotate(90deg)` } : null} />
+            <SVG.ExpandArrow
+              height="8px"
+              style={showActive ? { transform: `rotate(90deg)` } : null}
+            />
           ) : null}
         </span>
       </span>
@@ -171,7 +188,8 @@ const Item = ({ data, id, activeIds, level, children, showActive, decorator, onT
           css={STYLES_ICON_ELEMENT}
           style={{
             color: activeIds[id] ? Constants.system.brand : null,
-          }}>
+          }}
+        >
           {IconMap[decorator]}
         </span>
       </span>
@@ -180,7 +198,8 @@ const Item = ({ data, id, activeIds, level, children, showActive, decorator, onT
         onClick={() => onNavigateTo({ id }, data)}
         style={{
           color: activeIds[id] ? Constants.system.brand : null,
-        }}>
+        }}
+      >
         {children}
       </span>
     </span>
@@ -197,7 +216,17 @@ class NodeReference extends React.Component {
   };
 
   render() {
-    const { id, activeId, activeIds, level, children, treeChildren, decorator, onNavigateTo, data } = this.props;
+    const {
+      id,
+      activeId,
+      activeIds,
+      level,
+      children,
+      treeChildren,
+      decorator,
+      onNavigateTo,
+      data,
+    } = this.props;
     const { showTreeChildren } = this.state;
 
     let showActive = showTreeChildren || activeIds[id];
@@ -215,7 +244,10 @@ class NodeReference extends React.Component {
           treeChildren={treeChildren}
           onNavigateTo={onNavigateTo}
           decorator={decorator}
-          onToggleShow={treeChildren && treeChildren.length ? this._handleToggleShow : null}>
+          onToggleShow={
+            treeChildren && treeChildren.length ? this._handleToggleShow : null
+          }
+        >
           {children}
         </Item>
 
@@ -239,7 +271,8 @@ class NodeReference extends React.Component {
                   onNavigateTo={onNavigateTo}
                   level={level + 1}
                   treeChildren={child.children}
-                  decorator={child.decorator}>
+                  decorator={child.decorator}
+                >
                   {child.name}
                 </NodeReference>
               );
@@ -275,7 +308,12 @@ export default class ApplicationNavigation extends React.Component {
             }
           />
 
-          <a css={STYLES_PROFILE} style={{ marginLeft: 16 }} href={`/${this.props.viewer.username}`} target="_blank">
+          <a
+            css={STYLES_PROFILE}
+            style={{ marginLeft: 16 }}
+            href={`/${this.props.viewer.username}`}
+            target="_blank"
+          >
             <span
               css={STYLES_PROFILE_IMAGE}
               style={{
@@ -304,7 +342,8 @@ export default class ApplicationNavigation extends React.Component {
               onNavigateTo={this.props.onNavigateTo}
               level={0}
               treeChildren={each.children}
-              decorator={each.decorator}>
+              decorator={each.decorator}
+            >
               {each.name}
             </NodeReference>
           );