feat(ui): make app header responsive

packages/decap-cms-core/src/components/App/App.js

@@ -156,6 +156,7 @@ class App extends React.Component {
       openMediaLibrary,
       t,
       showMediaButton,
+      location,
     } = this.props;
 
     if (config === null) {
@@ -177,22 +178,30 @@ class App extends React.Component {
     const defaultPath = getDefaultPath(collections);
     const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
 
+    // Work out if this is an editor route, following the same URL matching as the router.
+    // - /collections/:name/entries/*
+    // - /collections/:name/new
+    const [, base, , view] = location.pathname.split('/');
+    const isEditorRoute = base === 'collections' && (view === 'entries' || view === 'new');
+
     return (
       <>
         <Notifications />
-        <Header
-          user={user}
-          collections={collections}
-          onCreateEntryClick={createNewEntry}
-          onLogoutClick={logoutUser}
-          openMediaLibrary={openMediaLibrary}
-          hasWorkflow={hasWorkflow}
-          displayUrl={config.display_url}
-          logoUrl={config.logo_url} // Deprecated, replaced by `logo.src`
-          logo={config.logo}
-          isTestRepo={config.backend.name === 'test-repo'}
-          showMediaButton={showMediaButton}
-        />
+        {!isEditorRoute && (
+          <Header
+            user={user}
+            collections={collections}
+            onCreateEntryClick={createNewEntry}
+            onLogoutClick={logoutUser}
+            openMediaLibrary={openMediaLibrary}
+            hasWorkflow={hasWorkflow}
+            displayUrl={config.display_url}
+            logoUrl={config.logo_url} // Deprecated, replaced by `logo.src`
+            logo={config.logo}
+            isTestRepo={config.backend.name === 'test-repo'}
+            showMediaButton={showMediaButton}
+          />
+        )}
         <AppMainContainer>
           {isFetching && <TopBarProgress />}
           <Switch>

packages/decap-cms-core/src/components/App/Header.js

@@ -11,7 +11,6 @@ import {
   DropdownItem,
   StyledDropdownButton,
   colors,
-  lengths,
   shadows,
   buttons,
   zIndex,
@@ -32,12 +31,14 @@ function AppHeader(props) {
     <header
       css={css`
         ${shadows.dropMain};
-        position: sticky;
         width: 100%;
-        top: 0;
         background-color: ${colors.foreground};
         z-index: ${zIndex.zIndex300};
-        height: ${lengths.topBarHeight};
+
+        @media (min-height: 500px) {
+          position: sticky;
+          top: 0;
+        }
       `}
       {...props}
     />
@@ -46,26 +47,43 @@ function AppHeader(props) {
 
 const AppHeaderContent = styled.div`
   display: flex;
-  justify-content: space-between;
-  min-width: 800px;
-  max-width: 1440px;
+  flex-direction: column-reverse;
   padding: 0 12px;
   margin: 0 auto;
+
+  @media (min-width: 800px) {
+    max-width: 1440px;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 `;
 
 const AppHeaderButton = styled.button`
   ${buttons.button};
   background: none;
   color: #7b8290;
   font-family: inherit;
-  font-size: 16px;
+  font-size: 13px;
+  line-height: 1;
   font-weight: 500;
   display: inline-flex;
-  padding: 16px 20px;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 10px 10px;
   align-items: center;
+  text-align: center;
+
+  @media (min-width: 400px) {
+    flex-direction: row;
+    gap: 4px;
+  }
+
+  @media (min-width: 500px) {
+    font-size: 16px;
+    padding: 16px 20px;
+  }
 
   ${Icon} {
-    margin-right: 4px;
     color: #b3b9c4;
   }
 
@@ -93,14 +111,16 @@ const AppHeaderButton = styled.button`
 const AppHeaderNavLink = AppHeaderButton.withComponent(NavLink);
 
 const AppHeaderActions = styled.div`
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
 `;
 
 const AppHeaderQuickNewButton = styled(StyledDropdownButton)`
   ${buttons.button};
   ${buttons.medium};
   ${buttons.gray};
+  white-space: nowrap;
   margin-right: 8px;
 
   &:after {
@@ -112,6 +132,11 @@ const AppHeaderNavList = styled.ul`
   display: flex;
   margin: 0;
   list-style: none;
+  justify-content: space-around;
+
+  @media (min-width: 800px) {
+    justify-content: flex-start;
+  }
 `;
 
 const AppHeaderLogo = styled.li`

packages/decap-cms-core/src/components/UI/SettingsDropdown.js

@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { translate } from 'react-polyglot';
-import { Icon, Dropdown, DropdownItem, DropdownButton, colors } from 'decap-cms-ui-default';
+import {
+  Icon,
+  Dropdown,
+  DropdownItem,
+  DropdownButton,
+  colors,
+  shadows,
+} from 'decap-cms-ui-default';
 
 import { stripProtocol } from '../../lib/urlHelper';
 
@@ -33,18 +40,32 @@ const AvatarPlaceholderIcon = styled(Icon)`
   background-color: ${colors.textFieldBorder};
 `;
 
-const AppHeaderSiteLink = styled.a`
+const AppHeaderLink = css`
   font-size: 14px;
   font-weight: 400;
-  color: #7b8290;
+  color: ${colors.text};
   padding: 10px 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
+const AppHeaderSiteLink = styled.a(AppHeaderLink);
+
 const AppHeaderTestRepoIndicator = styled.a`
-  font-size: 14px;
-  font-weight: 400;
-  color: #7b8290;
-  padding: 10px 16px;
+  ${AppHeaderLink};
+
+  @media (max-width: 399px) {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 12px;
+    background-color: ${colors.background};
+    padding: 4px 12px;
+    border-radius: 0 0 4px 4px;
+    ${shadows.drop}
+  }
 `;
 
 function Avatar({ imageUrl }) {
@@ -59,9 +80,15 @@ Avatar.propTypes = {
   imageUrl: PropTypes.string,
 };
 
+const SettingsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  min-width: 0;
+`;
+
 function SettingsDropdown({ displayUrl, isTestRepo, imageUrl, onLogoutClick, t }) {
   return (
-    <React.Fragment>
+    <SettingsWrapper>
       {isTestRepo && (
         <AppHeaderTestRepoIndicator
           href="https://www.decapcms.org/docs/test-backend"
@@ -88,7 +115,7 @@ function SettingsDropdown({ displayUrl, isTestRepo, imageUrl, onLogoutClick, t }
       >
         <DropdownItem label={t('ui.settingsDropdown.logOut')} onClick={onLogoutClick} />
       </Dropdown>
-    </React.Fragment>
+    </SettingsWrapper>
   );
 }