[WIP] feature: fix header (in progress)

src/components/PageLayout/Header/header.module.less

@@ -74,6 +74,7 @@
         margin: 0;
         display: flex;
     }
+    //height: 70px;
 }
 .nav{
     .flex-center();
@@ -112,7 +113,7 @@
             color: #fff;
         }
     }
-    
+
 }
 /** mobile header code */
 .openMenu{
@@ -160,4 +161,20 @@
     @media screen and ( max-width:768px ) {
         display: none;
     }
-}
+}
+
+.topPadding {
+    height: 1.87rem;
+    @media screen and (max-width: 768px){
+        height: 0;
+    }
+    background: @site-background-color;
+}
+
+.bottomPadding {
+    height: 2.5rem;
+    @media screen and (max-width: 768px){
+        height: 0;
+    }
+    background: white;
+}

src/components/PageLayout/Header/index.jsx

@@ -1,6 +1,8 @@
 import React, { useRef, useState } from 'react';
 import { Link } from 'gatsby';
-import { Layout } from 'antd';
+import {
+  Layout, Affix, Col, Row,
+} from 'antd';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
@@ -43,14 +45,15 @@ export default () => {
   };
 
   return (
-    <>
+    <Affix offsetTop={0}>
       <div className={style.circleMenu} role="button" tabIndex="0" onKeyDown={toggleMenu} onClick={toggleMenu}>
         <div className={`${style.hamburger} ${menu ? style.menuIcon : null}`}>
           <div className={style.line} />
           <div className={style.line} />
           <div className={style.hamburgerText}>MENU</div>
         </div>
       </div>
+      <div className={style.topPadding} />
       <Layout className={`${style.navWrap} ${menu ? null : style.hidden} ${menu ? style.openMenu : null}`}>
         <div className={style.backgroundDiv}>
           <ul className={style.nav}>
@@ -102,6 +105,14 @@ export default () => {
           </ul>
         </div>
       </Layout>
-    </>
+      <div className="container" style={{ position: 'fixed' }}>
+        <Row>
+          <Col sm={24} md={10} lg={7} />
+          <Col sm={24} md={14} lg={17}>
+            <div className={style.bottomPadding} />
+          </Col>
+        </Row>
+      </div>
+    </Affix>
   );
 };

src/components/PageLayout/Sidebar/index.jsx

@@ -88,7 +88,7 @@ const Sidebar = (props) => {
   let domContent = <DomContent />;
   if (width > 997) {
     domContent = (
-      <Affix offsetTop={0}>
+      <Affix offsetTop={120}>
         <DomContent />
       </Affix>
     );

src/components/PageLayout/Sidebar/sidebar.module.less

@@ -2,7 +2,8 @@
 .content{
     border-radius: @border-radius-content;
     margin: 0px;
-    min-height: 280px
+    min-height: 280px;
+    //border-top-left-radius: 0;
 }
 
 .sidebarContent{
@@ -115,6 +116,7 @@
 .boxContent{
     padding: @padding-margin-val;
     padding-left: 0;
+    padding-top: 0;
     @media screen and (max-width: 767px){
         padding: @padding-margin-val;
         padding-top: 0;

src/components/Panel/index.jsx

@@ -64,7 +64,7 @@ const Panel = (props) => {
   }
 
   return (
-    <>
+    <div style={{marginTop: "2.5rem"}}>
       <section className={style.codeBox}>
         <section className={style.codeBoxTitle}>
           Filters
@@ -104,7 +104,7 @@ const Panel = (props) => {
           })
         }
       </Row>
-    </>
+    </div>
   );
 };
 

src/pages/posts/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
-import { Layout } from 'antd';
+import { Affix, Layout } from 'antd';
 
 import Header from '../../components/PageLayout/Header';
 import SidebarWrapper from '../../components/PageLayout/Sidebar';
@@ -20,9 +20,9 @@ const Posts = ({ data }) => (
         path="posts"
       />
       <SidebarWrapper>
-        <div className="marginTopTitle">
+        <Affix offsetTop={130} prefixCls="fix-title">
           <h1 className="titleSeparate">Posts</h1>
-        </div>
+        </Affix>
         <Panel type="posts" data={data} />
       </SidebarWrapper>
     </Layout>

src/styles/global.less

@@ -1,7 +1,8 @@
 @import (reference) './mixins.less';
+@import (reference) './theme.less';
 body{
   font-size: 16px;
-  background: #f0f2f5;
+  background: @site-background-color;
   overflow-y: scroll;
 }
 h1, h2, h3, h4, h5, h6 {
@@ -103,6 +104,7 @@ ul{
 
 .outerPadding {
   padding: 1.87rem;
+  padding-top: 0;
   @media screen and (max-width: 768px){
     padding: 0.6rem;
   }
@@ -146,4 +148,8 @@ ul{
   font-size: 12px;
 }
 
-
+.fix-title {
+  background-color: white;
+  //padding-top: 2.5em;
+  //margin-bottom: 2.5rem;
+}

src/styles/theme.less

@@ -12,3 +12,4 @@
 @site-border-color-split: @border-color-split;
 @site-header-box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
 @site-markdown-code-bg: #f2f4f5;
+@site-background-color: #f0f2f5;

src/templates/post/post.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import {
-  Layout, Empty, Row, Col, Input, Alert,
+  Layout, Empty, Row, Col, Input, Alert, Affix,
 } from 'antd';
 import { graphql } from 'gatsby';
 import Img from 'gatsby-image';
@@ -87,7 +87,7 @@ const Post = ({ data }) => {
         />
         <Header />
         <SidebarWrapper>
-          <div className="marginTopTitle">
+          <Affix offsetTop={130} prefixCls="fix-title">
             <h1 className="titleSeparate">{title}</h1>
             <div>
               <div style={{ color: 'rgba(0, 0, 0, 0.45)', marginBottom: '1rem' }}>
@@ -99,6 +99,8 @@ const Post = ({ data }) => {
                 <Img className={style.bannerImg} fluid={fluid} title={excerpt} alt={title} />
               </div>
             ) : null }
+          </Affix>
+          <div>
             { state.locked
               ? (
                 <Empty