From cf74561ef5a3f0615cd004a1796faadcf14510ab Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Wed, 2 Mar 2016 12:10:18 +0800
Subject: [PATCH] chore: update disabled style

---
 site/common/styles/common.less       |  4 ++++
 site/component/MainContent/index.jsx | 11 ++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/site/common/styles/common.less b/site/common/styles/common.less
index bcae7aaab1..dd390f8eb3 100644
--- a/site/common/styles/common.less
+++ b/site/common/styles/common.less
@@ -18,6 +18,10 @@
 
 .sidebar {
   padding-bottom: 50px;
+
+  a[disabled] {
+    color: #ccc;
+  }
 }
 
 .sidebar .chinese {
diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx
index c103e69831..c3b8ea21b8 100644
--- a/site/component/MainContent/index.jsx
+++ b/site/component/MainContent/index.jsx
@@ -9,18 +9,19 @@ export default class MainContent extends React.Component {
     return props.menuItems.map((item) => {
       const key = item.english.toLowerCase();
       const text = item.chinese || item.english;
+      const disabled = item.disabled === 'true';
 
       const child = !item.link ?
-              <Link to={`/${props.category}/${key}`}>
+              <Link to={`/${props.category}/${key}`} disabled={disabled}>
                 { text }
               </Link> :
-              <a href={item.link} target="_blank">
+              <a href={item.link} target="_blank" disabled={disabled}>
                 { text }
               </a>;
 
       return (
-        <Menu.Item key={key} disabled={item.disabled === 'true'}>
-          { item.disabled ? <span>{text}</span> : child }
+        <Menu.Item key={key} disabled={disabled}>
+          { child }
         </Menu.Item>
       );
     });
@@ -34,7 +35,7 @@ export default class MainContent extends React.Component {
     return (
       <Row className="main-wrapper">
         <Col span="4">
-          <Menu mode="inline" selectedKeys={[activeMenuItem]}>
+          <Menu mode="inline" selectedKeys={[activeMenuItem]} className="sidebar">
             { menuItems }
           </Menu>
         </Col>