点击按钮隐藏顶部主导航功能

jaywcjlove · Jan 29, 2018 · 4885aba · 4885aba
1 parent 1ddaa7e
commit 4885aba
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 8 deletions.
diff --git a/src/component/Header.js b/src/component/Header.js
@@ -13,6 +13,7 @@ export default class Header extends Component {
     super(props);
     this.state = {
       type: props.contentType || 'trending',
+      visible: JSON.parse(localStorage.getItem('osc-header')) || false,
       menus: [
         {
           title: '开发文档',
@@ -33,15 +34,22 @@ export default class Header extends Component {
     this.setState({ type });
     onChange(type);
   }
+  onDropDown() {
+    this.setState({
+      visible: !this.state.visible,
+    }, () => {
+      localStorage.setItem('osc-header', this.state.visible);
+    });
+  }
   render() {
     return (
-      <div className={ styles.warpper } >
+      <div className={styles.warpper} style={{ marginTop: this.state.visible ? 0 : -50 }}>
         <div className={ styles.logo } >
           <a href="http://www.oschina.net/" rel="noopener noreferrer" target="_blank" >
             <img title="开源中国" alt="开源中国" src={ logo } />
           </a>
         </div>
-        <div className={ styles.menu } >
+        <div className={styles.menu}>
           <div className={styles.nav}>
             {this.state.menus.map((item, idx) => {
               return (
@@ -52,8 +60,9 @@ export default class Header extends Component {
           <a href="https://gitee.com/" > <img title="码云" alt="码云" src={ gitee } /></a>
           <a href="https://github.com/" > <img title="Github" alt="Github" src={ github } /></a>
           <a href="http://wangchujiang.com/awesome-mac/index.zh.html" > <img title="Mac精品软件推荐" alt="Mac精品软件推荐" src={ apple } /></a>
-          {/* <span className={styles.setting}> <img title="Mac精品软件推荐" alt="Mac精品软件推荐" src={setting} /> </span> */}
+          {/* <span className={styles.setting}> <img title="" alt="" src={setting} /> </span> */}
         </div>
+        <div onClick={this.onDropDown.bind(this)} className={styles.dropDown} />
       </div>
     );
   }

diff --git a/src/component/Header.less b/src/component/Header.less
@@ -7,6 +7,7 @@
   display: flex;
   align-items: center;
   justify-content:space-between;
+  transition: all .3s;
   img {
     height: 30px;
   }
@@ -57,4 +58,39 @@
     height: 100%;
     display: block;
   }
+}
+
+.dropDown {
+  float: right;
+  position: absolute;
+  margin: 34px 0 0 0;
+  right: 20px;
+  width: 8px;
+  cursor: pointer;
+  &:hover {
+    &::after, &::before {
+      background-color: #009801;
+    }
+  }
+  &:active {
+    &::after, &::before {
+      background-color: #015a00;
+    }
+  }
+  &::after, &::before {
+    content: '';
+    display: block;
+    background-color: #afafaf;
+    transition: all .3s;
+  }
+  &::before {
+    height: 10px;
+    width: 2px;
+    margin: 0 0 0 3px;
+  }
+  &::after {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
 }
diff --git a/src/pages/Document.js b/src/pages/Document.js
@@ -76,7 +76,15 @@ export default class Document extends Component {
           <div className={styles.tag}>
             {this.state.subMenu.map((item, idx) => {
               return (
-                <span key={idx} onClick={this.onChangeTag.bind(this, item.tag)}>{item.title}</span>
+                <span
+                  className={classNames({
+                    active: this.state.tag === item.tag,
+                  })}
+                  key={idx}
+                  onClick={this.onChangeTag.bind(this, item.tag)}
+                >
+                  {item.title}
+                </span>
               );
             })}
           </div>

diff --git a/src/pages/Document.less b/src/pages/Document.less
@@ -3,7 +3,7 @@
 }
 
 .header {
-  padding: 15px 5px 15px;
+  padding: 15px 15px 25px;
   font-size: 24px;
   color: #c1c1c1;
   font-size: 18px;
@@ -20,8 +20,17 @@
     margin: 0 0 0 10px;
     span {
       display: inline-block;
-      margin: 0 3px;
+      padding: 0 3px 0 3px;
+      border-radius: 2px;
+      height: 18px;
+      line-height: 18px;
+      margin: 0 2px;
       cursor: pointer;
+      transition: background-color .3s;
+      &:hover, &:global(.active) {
+        background-color: #868686;
+        color: #fff;
+      }
     }
   }
 }
@@ -30,6 +39,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  padding: 0 15px;
   li {
     display: flex;
     flex-direction: column;
@@ -127,6 +137,7 @@
     }
   }
 }
+
 .zhHans {
   circle, path {
     color: #606467;

diff --git a/src/pages/Github.less b/src/pages/Github.less
@@ -2,7 +2,7 @@
   padding: 10px;
   .title {
     margin: 0;
-    padding: 15px 5px 15px;
+    padding: 15px 15px 25px;
     font-size: 24px;
     color: #c1c1c1;
     font-size: 18px;
@@ -18,6 +18,7 @@
 }
 
 .list {
+  padding: 0 15px;
   a {
     text-decoration: none;
   }

diff --git a/src/pages/History.less b/src/pages/History.less
@@ -5,6 +5,7 @@
 .list {
   line-height: 32px;
   padding: 5px 0;
+  margin: 0 15px;
   background-color: #fff;
   a {
     color: #333;
@@ -40,7 +41,7 @@
 
 .title {
   margin: 0;
-  padding: 15px 5px 15px;
+  padding: 15px 15px 25px;
   font-size: 24px;
   color: #c1c1c1;
   font-size: 18px;