Add a filter menu.

src/components/Root.js

@@ -1,6 +1,7 @@
 import React,{Component} from 'react'
 import menuSource from "../data/"
 import Menu from "./menu"
+import Filter from "./filter"
 
 
 export default class Root extends Component{
@@ -21,13 +22,12 @@ export default class Root extends Component{
               }else{
                 source = [];
               }
-              console.log("--->",e,"---2>",key)
               this.setState({contentSource:source})
            }} /> 
         </div>
         <div className="content">
           <header className="header">
-          header menu
+            <Filter />
           </header>
 
           <div className="article-content">

src/components/filter.js

@@ -0,0 +1,56 @@
+import React,{Component} from 'react'
+import {Icons} from './icon'
+
+export default class Filter extends Component {
+  static defaultProps = {
+    dataSource:[],
+    onClick:new Function
+  }
+  constructor(props){
+    super(props)
+    this.state = {
+      dataSource:{
+        "free":{},
+        "hot":{},
+        "recommended":{},
+        "must-have":{},
+        "app-store":{},
+        "open-source":{},
+      },
+      onClick:this.props.onClick,
+      selector:"",
+    }
+  }
+  renderListItem(source,onClick){
+    let elms = [];
+    for(let i in source){
+      elms.push(
+        <li style={i==this.state.selector?styles.active:styles.cancel} key={i} onClick={()=>{
+        }}>
+          <Icons type={i}/>
+        </li>
+      )
+    }
+    return elms
+  }
+  render(){
+    return (
+      <ul className="menu-filter">
+        {this.renderListItem(this.state.dataSource,this.props.onClick)}
+      </ul>
+    )
+  }
+  componentDidMount(){
+    this.setState({dataSource:this.state.dataSource})
+  }
+}
+
+
+var styles = {
+  active:{
+    backgroundColor:"rgba(255, 255, 255, 0.11)"
+  },
+  cancel:{
+    backgroundColor:"transparent"
+  }
+}

src/index.less

@@ -40,6 +40,7 @@ li,ul{
     flex-direction:column;
     .header{
       height: 43px;
+      overflow: hidden;
       -webkit-app-region: drag;
       user-select: none;
       background-image: linear-gradient(-180deg, #E8E6E8 0%, #D6D4D6 98%);
@@ -73,6 +74,21 @@ li,ul{
     }
     i{
       padding: 0 5px 0 0;
+      vertical-align: middle;
+      display: inline-block;
+      position: relative;
+      top: -1px;
+    }
+  }
+}
+
+.menu-filter{
+  padding: 0 0 0 7px;
+  li{
+    display: inline-block;
+    margin: 12px 5px;
+    &:hover{
+      background-color:rgba(255, 255, 255, 0.11)
     }
   }
 }