feat: narrow header content

When in codepage and gitako is ready

src/content.less

@@ -15,7 +15,9 @@
   @media (min-width: @width-with-gitako) {
     margin-left: 0;
   }
+}
 
+.@{name}-ready {
   .Header > div {
     width: 1012px;
     margin: 0 auto;

src/driver/core/SideBar.ts

@@ -128,6 +128,7 @@ const init: MethodCreator<Props, ConnectorState> = dispatch => async () => {
     dispatch.call(setMetaData, metaData)
     const shouldShow = URLHelper.isInCodePage(metaData)
     dispatch.call(setShouldShow, shouldShow)
+    DOMHelper.markGitakoReadyState()
   } catch (err) {
     dispatch.call(handleError, err)
   }

src/utils/DOMHelper.ts

@@ -7,6 +7,14 @@ import * as NProgress from 'nprogress'
 
 NProgress.configure({ showSpinner: false })
 
+/**
+ * when gitako is ready, make page's header narrower
+ */
+function markGitakoReadyState() {
+  const readyClassName = 'gitako-ready'
+  document.body.classList.add(readyClassName)
+}
+
 /**
  * if should show gitako, then move body right to make space for showing gitako
  * otherwise, hide the space
@@ -355,6 +363,7 @@ export default {
   getCurrentPageType,
   getRepoPageType,
   insertLogoMountPoint,
+  markGitakoReadyState,
   setBodyIndent,
   scrollToNodeElement,
   scrollToRepoContent,