diff --git a/packages/strapi-admin/admin/src/components/GlobalStyle/index.js b/packages/strapi-admin/admin/src/components/GlobalStyle/index.js
index ac51a6a08b..f8599cb41f 100644
--- a/packages/strapi-admin/admin/src/components/GlobalStyle/index.js
+++ b/packages/strapi-admin/admin/src/components/GlobalStyle/index.js
@@ -137,6 +137,39 @@ const GlobalStyle = createGlobalStyle`
}
+ // scrollbar
+ ::-webkit-scrollbar {
+ width: 9px;
+ }
+
+ ::-webkit-scrollbar-track {
+ background-color: #eee;
+ }
+
+ ::-webkit-scrollbar-track:hover {
+ background-color: #ddd;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background-color: #ccc;
+ border-radius: 0.5rem;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background-color: #bbb;
+ }
+
+ ::-webkit-scrollbar-button {
+ display: none;
+ }
+
+ // firefox scrollbar
+ * {
+ scrollbar-color: #bbb #eee;
+ scrollbar-width: thin;
+ }
+
+
`;
export default GlobalStyle;
diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/MenuSection.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/MenuSection.js
new file mode 100644
index 0000000000..b21cd2393a
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/MenuSection.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const LeftMenuSection = styled.div`
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+
+ &:first-child {
+ overflow: hidden;
+ min-height: 175px;
+ height: auto;
+ flex: 0 1 auto;
+ }
+`;
+
+export default LeftMenuSection;
diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js
index c3963e43d5..296f8d2685 100644
--- a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js
@@ -11,6 +11,8 @@ const Wrapper = styled.div`
overflow-y: auto;
height: calc(100vh - (${props => props.theme.main.sizes.leftMenu.height} + 10.2rem));
box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
.title {
padding-left: 2rem;
diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js
index 8812215a17..cd8c131260 100644
--- a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js
@@ -5,6 +5,7 @@ import { get, snakeCase, isEmpty } from 'lodash';
import { SETTINGS_BASE_URL } from '../../config';
import Wrapper from './Wrapper';
+import MenuSection from './MenuSection';
import messages from './messages.json';
import LeftMenuLinkSection from '../LeftMenuLinkSection';
@@ -19,6 +20,7 @@ const LeftMenuLinkContainer = ({ plugins }) => {
acc[snakeCase(section.name)] = {
name: section.name,
searchable: true,
+ shrink: true,
links: get(acc[snakeCase(section.name)], 'links', []).concat(
section.links
.filter(link => link.isDisplayed !== false)
@@ -50,49 +52,58 @@ const LeftMenuLinkContainer = ({ plugins }) => {
};
});
- const menu = {
- ...contentTypesSections,
- plugins: {
- searchable: false,
- name: 'plugins',
- emptyLinksListMessage: messages.noPluginsInstalled.id,
- links: pluginsLinks,
+ const menus = [
+ contentTypesSections,
+ {
+ plugins: {
+ searchable: false,
+ name: 'plugins',
+ emptyLinksListMessage: messages.noPluginsInstalled.id,
+ links: pluginsLinks,
+ },
+ general: {
+ searchable: false,
+ name: 'general',
+ links: [
+ {
+ icon: 'list',
+ label: messages.listPlugins.id,
+ destination: '/list-plugins',
+ },
+ {
+ icon: 'shopping-basket',
+ label: messages.installNewPlugin.id,
+ destination: '/marketplace',
+ },
+ {
+ icon: 'cog',
+ label: messages.settings.id,
+ destination: SETTINGS_BASE_URL || '/settings',
+ },
+ ],
+ },
},
- general: {
- searchable: false,
- name: 'general',
- links: [
- {
- icon: 'list',
- label: messages.listPlugins.id,
- destination: '/list-plugins',
- },
- {
- icon: 'shopping-basket',
- label: messages.installNewPlugin.id,
- destination: '/marketplace',
- },
- {
- icon: 'cog',
- label: messages.settings.id,
- destination: SETTINGS_BASE_URL || '/settings',
- },
- ],
- },
- };
+ ];
return (
- {Object.keys(menu).map(current => (
-
- ))}
+ {menus.map(
+ section => (
+
+ {Object.entries(section).map(([key, value]) => (
+
+ ))}
+
+ )
+ )}
);
};
diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/LeftMenuListLink.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/LeftMenuListLink.js
index 0ed7d0c9fe..028c189520 100644
--- a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/LeftMenuListLink.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/LeftMenuListLink.js
@@ -1,9 +1,18 @@
import styled from 'styled-components';
const LeftMenuListLink = styled.div`
- max-height: 180px;
+ box-sizing: border-box;
+ min-height: 3.7rem;
+ flex-shrink: 0;
margin-bottom: 0.1rem;
overflow: auto;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+ ${props =>
+ props.shrink &&
+ `
+ flex-shrink: 1;
+ `}
`;
export default LeftMenuListLink;
diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/index.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/index.js
index d33cc27ec6..82f8233e84 100644
--- a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/index.js
+++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/index.js
@@ -10,7 +10,14 @@ import LeftMenuListLink from './LeftMenuListLink';
import EmptyLinksList from './EmptyLinksList';
import EmptyLinksListWrapper from './EmptyLinksListWrapper';
-const LeftMenuLinksSection = ({ section, searchable, location, links, emptyLinksListMessage }) => {
+const LeftMenuLinksSection = ({
+ section,
+ searchable,
+ location,
+ links,
+ emptyLinksListMessage,
+ shrink,
+}) => {
const [search, setSearch] = useState('');
const filteredList = sortBy(
@@ -39,7 +46,7 @@ const LeftMenuLinksSection = ({ section, searchable, location, links, emptyLinks
setSearch={setSearch}
search={search}
/>
-
+
{filteredList.length > 0 ? (
filteredList.map((link, index) => (
props.theme.main.sizes.leftMenu.width};
background: ${props => props.theme.main.colors.strapi['blue-darker']};
+
+ // scrollbar overrides
+ * {
+ ::-webkit-scrollbar {
+ width: 7px;
+ }
+
+ ::-webkit-scrollbar-track,
+ ::-webkit-scrollbar-track:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.3);
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.5);
+ }
+
+ // firefox
+ scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1);
+ }
`;
Wrapper.defaultProps = {
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js
index 1cc182d63d..6927e6ce26 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js
@@ -1,7 +1,6 @@
import styled from 'styled-components';
const ListWrapper = styled.div`
- overflow: hidden;
max-height: 116px;
> ul {