redesigned submenu

scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js

@@ -1,6 +1,6 @@
 //@flow
 import * as React from "react";
-import {Link, Route} from "react-router-dom";
+import { Link, Route } from "react-router-dom";
 
 type Props = {
   to: string,
@@ -30,18 +30,14 @@ class SubNavigation extends React.Component<Props> {
     }
 
     let children = null;
-    if(this.isActive(route)) {
-      children = (
-        <ul>{this.props.children}</ul>
-      );
+    if (this.isActive(route)) {
+      children = <ul className="sub-menu">{this.props.children}</ul>;
     }
 
     return (
       <li>
         <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
-          <i className={defaultIcon} />
-          {" "}
-          {label}
+          <i className={defaultIcon} /> {label}
         </Link>
         {children}
       </li>
@@ -53,11 +49,15 @@ class SubNavigation extends React.Component<Props> {
 
     // removes last part of url
     let parents = to.split("/");
-    parents.splice(-1,1);
+    parents.splice(-1, 1);
     let parent = parents.join("/");
 
     return (
-      <Route path={parent} exact={activeOnlyWhenExact} children={this.renderLink} />
+      <Route
+        path={parent}
+        exact={activeOnlyWhenExact}
+        children={this.renderLink}
+      />
     );
   }
 }

scm-ui/styles/scm.scss

@@ -259,21 +259,10 @@ $fa-font-path: "webfonts";
     &.is-active {
       color: $blue;
       background-color: #fff;
+    }
+  }
 
-      &:before {
-        position: relative;
-        content: " ";
-        background: $blue;
-        height: 53px;
-        width: 2px;
-        display: block;
-        left: -17px;
-        float: left;
-        top: -16px;
-      }
-    }
-  }
-  li {
+  > li {
     ul {
       margin: 0;
       border-top: 1px solid #eee;
@@ -286,6 +275,18 @@ $fa-font-path: "webfonts";
       }
     }
 
+    > a.is-active:before {
+      position: relative;
+      content: " ";
+      background: $blue;
+      height: 53px;
+      width: 2px;
+      display: block;
+      left: -17px;
+      float: left;
+      top: -16px;
+    }
+
     border-radius: 0;
     border-top: 1px solid #eee;
     border-left: 1px solid #eee;
@@ -301,3 +302,27 @@ $fa-font-path: "webfonts";
     margin-bottom: 0;
   }
 }
+.sub-menu li {
+  line-height: 1;
+
+  a {
+    padding: 0.75rem 1rem;
+  }
+
+  a:before {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    line-height: 1;
+    content: "\f105";
+    padding-right: 5px;
+  }
+
+  i {
+    display: none;
+  }
+}