From 12b520a55df682dbee1a0b87788798a740a1705f Mon Sep 17 00:00:00 2001
From: Risha Mars <mars@buoyant.io>
Date: Mon, 14 May 2018 18:11:12 -0700
Subject: [PATCH] Use menu links correctly (don't repeat icon and text links)
 (#953)

This enables the removal of the inline-block display for links and
fixes menu items not showing up when sidebar is expanded on firefox

Problem
Previously we were linking the icon and expand text of the menu bar separately.
This caused the clickable areas of the menus to be inconsistent, which we were
fixing via css. This wasn't consistently displayed across browsers.

Fix
Linkify the whole Menu Item rather than linking the icon and text separately.
This enables the removal of the inline-block display for links and
fixes menu items not showing up when sidebar is expanded on firefox.
Additionally it makes the clicking of menu links way more consistent.
---
 web/app/css/sidebar.css           |  2 --
 web/app/js/components/Sidebar.jsx | 43 +++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/web/app/css/sidebar.css b/web/app/css/sidebar.css
index 7bd42fbf2..f4acc85b3 100644
--- a/web/app/css/sidebar.css
+++ b/web/app/css/sidebar.css
@@ -18,8 +18,6 @@
 
     & a {
       color: white;
-      display: inline-block;
-      width: 100%;
     }
 
     & .update {
diff --git a/web/app/js/components/Sidebar.jsx b/web/app/js/components/Sidebar.jsx
index e0094cae4..51e96e6c0 100644
--- a/web/app/js/components/Sidebar.jsx
+++ b/web/app/js/components/Sidebar.jsx
@@ -92,39 +92,54 @@ export default class Sidebar extends React.Component {
             selectedKeys={[normalizedPath]}>
 
             <Menu.Item className="sidebar-menu-item" key="/servicemesh">
-              <Icon><ConduitLink to="/servicemesh"><Icon type="home" /></ConduitLink></Icon>
-              <span><ConduitLink to="/servicemesh">Service mesh</ConduitLink></span>
+              <ConduitLink to="/servicemesh">
+                <Icon type="home" />
+                <span>Service mesh</span>
+              </ConduitLink>
             </Menu.Item>
 
             <Menu.Item className="sidebar-menu-item" key="/namespaces">
-              <Icon><ConduitLink to="/namespaces"><Icon>N</Icon></ConduitLink></Icon>
-              <span><ConduitLink to="/namespaces">Namespaces</ConduitLink></span>
+              <ConduitLink to="/namespaces">
+                <Icon>N</Icon>
+                <span>Namespaces</span>
+              </ConduitLink>
             </Menu.Item>
 
             <Menu.Item className="sidebar-menu-item" key="/deployments">
-              <Icon><ConduitLink to="/deployments"><Icon>D</Icon></ConduitLink></Icon>
-              <span><ConduitLink to="/deployments">Deployments</ConduitLink></span>
+              <ConduitLink to="/deployments">
+                <Icon>D</Icon>
+                <span>Deployments</span>
+              </ConduitLink>
             </Menu.Item>
 
             <Menu.Item className="sidebar-menu-item" key="/replicationcontrollers">
-              <Icon><ConduitLink to="/replicationcontrollers"><Icon>R</Icon></ConduitLink></Icon>
-              <span><ConduitLink to="/replicationcontrollers">Replication Controllers</ConduitLink></span>
+              <ConduitLink to="/replicationcontrollers">
+                <Icon>R</Icon>
+                <span>Replication Controllers</span>
+              </ConduitLink>
             </Menu.Item>
 
             <Menu.Item className="sidebar-menu-item" key="/pods">
-              <Icon><ConduitLink to="/pods"><Icon>P</Icon></ConduitLink></Icon>
-              <span><ConduitLink to="/pods">Pods</ConduitLink></span>
+              <ConduitLink to="/pods">
+                <Icon>P</Icon>
+                <span>Pods</span>
+              </ConduitLink>
             </Menu.Item>
 
+
             <Menu.Item className="sidebar-menu-item" key="/docs">
-              <Icon><Link to="https://conduit.io/docs/" target="_blank"><Icon type="solution" /></Link></Icon>
-              <span><Link to="https://conduit.io/docs/" target="_blank">Documentation</Link></span>
+              <Link to="https://conduit.io/docs/" target="_blank">
+                <Icon type="solution" />
+                <span>Documentation</span>
+              </Link>
             </Menu.Item>
 
             { this.state.isLatest ? null :
               <Menu.Item className="sidebar-menu-item" key="/update">
-                <Icon><Link to="https://versioncheck.conduit.io/update" target="_blank"><Icon type="exclamation-circle-o" className="update" /></Link></Icon>
-                <span><Link to="https://versioncheck.conduit.io/update" target="_blank">Update Conduit</Link></span>
+                <Link to="https://versioncheck.conduit.io/update" target="_blank">
+                  <Icon type="exclamation-circle-o" className="update" />
+                  <span>Update Conduit</span>
+                </Link>
               </Menu.Item>
             }
           </Menu>