diff --git a/packages/netlify-cms-core/src/components/App/Header.js b/packages/netlify-cms-core/src/components/App/Header.js index 6e52dbbc..b0d0b224 100644 --- a/packages/netlify-cms-core/src/components/App/Header.js +++ b/packages/netlify-cms-core/src/components/App/Header.js @@ -96,6 +96,12 @@ const AppHeaderQuickNewButton = styled(StyledDropdownButton)` } `; +const AppHeaderNavList = styled.ul` + display: flex; + margin: 0; + list-style: none; +`; + class Header extends React.Component { static propTypes = { user: ImmutablePropTypes.map.isRequired, @@ -135,26 +141,34 @@ class Header extends React.Component { {createableCollections.size > 0 && ( diff --git a/packages/netlify-cms-core/src/components/Collection/Sidebar.js b/packages/netlify-cms-core/src/components/Collection/Sidebar.js index a56f0461..e71a3f0f 100644 --- a/packages/netlify-cms-core/src/components/Collection/Sidebar.js +++ b/packages/netlify-cms-core/src/components/Collection/Sidebar.js @@ -35,7 +35,7 @@ const SidebarHeading = styled.h2` const SearchContainer = styled.div` display: flex; align-items: center; - margin: 0 8px; + margin: 0 12px; position: relative; ${Icon} { @@ -65,6 +65,11 @@ const SearchInput = styled.input` } `; +const SidebarNavList = styled.ul` + margin: 16px 0 0; + list-style: none; +`; + const SidebarNavLink = styled(NavLink)` display: flex; font-size: 14px; @@ -73,19 +78,17 @@ const SidebarNavLink = styled(NavLink)` padding: 8px 12px; border-left: 2px solid #fff; + ${Icon} { + margin-right: 8px; + } + ${props => css` &:hover, &:active, &.${props.activeClassName} { ${styles.sidebarNavLinkActive}; } - `} &:first-of-type { - margin-top: 16px; - } - - ${Icon} { - margin-right: 8px; - } + `}; `; class Sidebar extends React.Component { @@ -104,14 +107,12 @@ class Sidebar extends React.Component { renderLink = collection => { const collectionName = collection.get('name'); return ( - - - {collection.get('label')} - +
  • + + + {collection.get('label')} + +
  • ); }; @@ -131,7 +132,7 @@ class Sidebar extends React.Component { value={query} /> - {collections.toList().map(this.renderLink)} + {collections.toList().map(this.renderLink)} ); }