From 95eeebb09e2bc682e1580cc75c216e2cb7b3ac27 Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Tue, 23 Oct 2018 16:29:35 +0800
Subject: [PATCH] Add  configuration for sticky primary layout header.

---
 src/components/Layout/Header.js   |  9 ++++++++-
 src/components/Layout/Header.less | 19 +++++++++++++++++++
 src/layouts/PrimaryLayout.js      |  9 +++++++--
 src/utils/config.js               |  3 +--
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 9ade62e..578ad28 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -19,6 +19,7 @@ class Header extends PureComponent {
   render() {
     const {
       i18n,
+      fixed,
       avatar,
       username,
       collapsed,
@@ -130,7 +131,13 @@ class Header extends PureComponent {
     )
 
     return (
-      <Layout.Header className={styles.header} id="layoutHeader">
+      <Layout.Header
+        className={classnames(styles.header, {
+          [styles.fixed]: fixed,
+          [styles.collapsed]: collapsed,
+        })}
+        id="layoutHeader"
+      >
         <div
           className={styles.button}
           onClick={onCollapseChange.bind(this, !collapsed)}
diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less
index d30d125..a308f32 100644
--- a/src/components/Layout/Header.less
+++ b/src/components/Layout/Header.less
@@ -11,6 +11,19 @@
   align-items: center;
   background-color: #fff;
 
+  &.fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: ~'calc(100% - 256px)';
+    z-index: 9;
+    transition: width 0.2s;
+
+    &.collapsed {
+      width: ~'calc(100% - 80px)';
+    }
+  }
+
   :global {
     .ant-menu-submenu-title {
       height: 72px;
@@ -133,3 +146,9 @@
     }
   }
 }
+
+@media (max-width: 767px) {
+  .header {
+    width: 100% !important;
+  }
+}
diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js
index 0afe49b..1fff7e8 100644
--- a/src/layouts/PrimaryLayout.js
+++ b/src/layouts/PrimaryLayout.js
@@ -50,8 +50,8 @@ class PrimaryLayout extends PureComponent {
       user,
       theme,
       routeList,
-      permissions,
       collapsed,
+      permissions,
       notifications,
     } = app
     const { isMobile } = this.state
@@ -89,6 +89,7 @@ class PrimaryLayout extends PureComponent {
       onCollapseChange,
       avatar: user.avatar,
       username: user.username,
+      fixed: config.fixedHeader,
       onAllNotificationsRead() {
         dispatch({ type: 'app/allNotificationsRead' })
       },
@@ -132,7 +133,11 @@ class PrimaryLayout extends PureComponent {
           ) : (
             <Sider {...siderProps} />
           )}
-          <div className={styles.container} id="primaryLayout">
+          <div
+            className={styles.container}
+            style={{ paddingTop: config.fixedHeader ? 72 : 0 }}
+            id="primaryLayout"
+          >
             <ScrollBar
               option={{
                 // Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
diff --git a/src/utils/config.js b/src/utils/config.js
index 4a13bba..2da1835 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -1,11 +1,10 @@
 module.exports = {
   siteName: 'AntD Admin',
   prefix: 'antdAdmin',
-  footerText: 'Ant Design Admin  © 2018 zuiidea',
   copyright: 'Ant Design Admin  © 2018 zuiidea',
   logoPath: '/logo.svg',
   apiPrefix: '/api/v1',
-  openPages: ['/login'],
+  fixedHeader: true, // sticky primary layout header
 
   /* Layout configuration, specify which layout to use for route. */
   layouts: [