Removed top level links from sidebar and made them span-elements whic…

…h expands submenu instead of redirecting
PayEx · Aug 17, 2018 · 19e2611 · 19e2611
1 parent a03a238
commit 19e2611
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 36 deletions.
diff --git a/src/App/Documentation/SelectPanel.js b/src/App/Documentation/SelectPanel.js
@@ -9,51 +9,54 @@ const SearchBox = () => (
     </div>
 );
 
-class SelectPanel extends Component {
+const NavLink = ({ childRoute, pathname }) => {
+    const { title, path } = childRoute;
+    return (
+        <li>
+            <Link className={pathname === path ? "active" : ""} to={path}>{title}</Link>
+        </li>
+    );
+};
+
+class NavGroup extends Component {
     constructor (props) {
         super(props);
+        this.state = { isActive: props.location.pathname.includes(props.route.path) };
     }
 
-    titleActive (title) {
-        return this.props.location.pathname.includes(title);
-    }
-
-    subtitleActive (title) {
-        return this.props.location.pathname === title;
+    toggleActive () {
+        this.setState({ isActive: !this.state.isActive });
     }
 
     render () {
+        const { path, title, routes } = this.props.route;
+        const { pathname } = this.props.location;
         return (
-            <div className="doc-sidebar col-xxl-2 col-md-3 col-sm-12">
-                {/* <SearchBox /> */}
-                <nav className="documentation-nav">
-                    {routes.map((route, i) => {
-                        const { path, title, routes } = route;
-                        return (
-                            <div key={i} className={`nav-group${this.titleActive(path) ? " active" : ""}`}>
-                                <div className="nav-heading">
-                                    <i className="material-icons">keyboard_arrow_right</i>
-                                    <Link to={path}>{title}</Link>
-                                </div>
-                                <ul>
-                                    {routes.map((childRoute, i) => {
-                                        const { title, path } = childRoute;
-                                        return (
-                                            <li key={i}>
-                                                <Link className={this.subtitleActive(path) ? "active" : ""} to={path}>{title}</Link>
-                                            </li>
-                                        );
-                                    })}
-                                </ul>
-                            </div>
-                        );
-                    })}
-                </nav>
+            <div className={`nav-group${this.state.isActive ? " active" : ""}`}>
+                <div className="nav-heading">
+                    <i className="material-icons">keyboard_arrow_right</i>
+                    <span onClick={() => this.toggleActive()}>{title}</span>
+                </div>
+                <ul>
+                    {routes.map((childRoute, i) => <NavLink key={i} childRoute={childRoute} pathname={pathname} />)}
+                </ul>
             </div>
         );
     }
 }
 
+const SelectPanel = () => (
+    <div className="doc-sidebar col-xxl-2 col-md-3 col-sm-12">
+        {/* <SearchBox /> */}
+        <nav className="documentation-nav">
+            {routes.map((route, i) => {
+                const NavGroupWithRouter = withRouter(NavGroup);
+                return <NavGroupWithRouter key={i} route={route} />;
+            })}
+        </nav>
+    </div>
+);
+
 export default withRouter(SelectPanel);
 
 /* for testing */

diff --git a/src/App/index.js b/src/App/index.js
@@ -7,7 +7,6 @@ import AppHeader from "./AppHeader";
 import ErrorPage404 from "./ErrorPage404";
 
 const isProd = process.env.NODE_ENV === "production";
-// const history = createBrowserHistory({ basename: "/design.payex.com" });
 const history = createBrowserHistory();
 
 const App = () => (

diff --git a/src/less/themes/documentation.less b/src/less/themes/documentation.less
@@ -65,8 +65,25 @@
             display: flex;
             align-items: center;
 
-            a {
+            > span {
                 padding: 0;
+                cursor: pointer;
+                color: @brand-primary;
+
+                &:hover,
+                &:focus {
+                    color: darken(@brand-primary, 10%);
+                    text-decoration: underline;
+                }
+
+                &:active,
+                &:hover {
+                    outline: 0;
+                }
+
+                &:focus {
+                    .tab-focus();
+                }
             }
 
             i {
@@ -86,9 +103,8 @@
 
         &.active {
             .nav-heading {
-                a {
+                > span {
                     font-weight: @font-weight-bold;
-                    text-decoration: none;
                 }
 
                 i {