Add configuration for sticky primary layout header.

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)}

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;
+  }
+}

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

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: [