fix(sidebar): jumpy in header part

Author: mydearxym

containers/Sidebar/Header.js

@@ -7,6 +7,7 @@ import PinButton from './PinButton'
 
 import {
   Wrapper,
+  InnerWrapper,
   HeaderFuncs,
   SiteLogoWrapper,
   ExploreWrapper,
@@ -18,22 +19,24 @@ import {
 
 const Header = ({ pin }) => (
   <Wrapper pin={pin}>
-    <HeaderFuncs>
-      <SiteLogoWrapper pin={pin}>
-        <SiteLogo src={`${ICON_BASE}/sidebar/everyday.svg`} />
-      </SiteLogoWrapper>
-      <ExploreWrapper pin={pin}>
-        <a href="/communities" rel="noopener noreferrer" target="_blank">
-          <Button size="small" type="primary" ghost>
-            <ExploreContent>
-              <ExploreIcon src={`${ICON_CMD}/telescope.svg`} />
-              <ExploreText>Explore All</ExploreText>
-            </ExploreContent>
-          </Button>
-        </a>
-      </ExploreWrapper>
-    </HeaderFuncs>
-    <PinButton pin={pin} />
+    <InnerWrapper>
+      <HeaderFuncs>
+        <SiteLogoWrapper pin={pin}>
+          <SiteLogo src={`${ICON_BASE}/sidebar/everyday.svg`} />
+        </SiteLogoWrapper>
+        <ExploreWrapper pin={pin}>
+          <a href="/communities" rel="noopener noreferrer" target="_blank">
+            <Button size="small" type="primary" ghost>
+              <ExploreContent>
+                <ExploreIcon src={`${ICON_CMD}/telescope.svg`} />
+                <ExploreText>Explore All</ExploreText>
+              </ExploreContent>
+            </Button>
+          </a>
+        </ExploreWrapper>
+      </HeaderFuncs>
+      <PinButton pin={pin} />
+    </InnerWrapper>
   </Wrapper>
 )
 

containers/Sidebar/styles/header.js

@@ -5,13 +5,15 @@ import { theme, cs } from '@utils'
 import { Wrapper as IndexWrapper } from './index'
 
 export const Wrapper = styled.div`
-  ${cs.flex()};
   margin-top: 14px;
   margin-bottom: ${({ pin }) => (pin ? '0' : '20px')};
   ${IndexWrapper}:hover & {
     margin-bottom: 4px;
   }
 `
+export const InnerWrapper = styled.div`
+  ${cs.flex('align-center')};
+`
 export const HeaderFuncs = styled.div`
   ${cs.flexGrow()};
 `

containers/Sidebar/styles/menu_list.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 
 export const Wrapper = styled.div`
-  margin-top: 0px;
   left: 0;
   position: relative;
   height: 100%;