Merge pull request #5419 from wysher/feat/menu-scrollbars

Fit Left menu + scrollbars

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;

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;

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;

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 (
     <Wrapper>
-      {Object.keys(menu).map(current => (
-        <LeftMenuLinkSection
-          key={current}
-          links={menu[current].links}
-          section={current}
-          location={location}
-          searchable={menu[current].searchable}
-          emptyLinksListMessage={menu[current].emptyLinksListMessage}
-        />
-      ))}
+      {menus.map(
+        section => (
+          <MenuSection>
+            {Object.entries(section).map(([key, value]) => (
+              <LeftMenuLinkSection
+                key={key}
+                shrink={value.shrink}
+                links={value.links}
+                section={key}
+                location={location}
+                searchable={value.searchable}
+                emptyLinksListMessage={value.emptyLinksListMessage}
+              />
+            ))}
+          </MenuSection>
+        )
+      )}
     </Wrapper>
   );
 };

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;

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}
       />
-      <LeftMenuListLink>
+      <LeftMenuListLink shrink={shrink}>
         {filteredList.length > 0 ? (
           filteredList.map((link, index) => (
             <LeftMenuLink
@@ -64,9 +71,14 @@ const LeftMenuLinksSection = ({ section, searchable, location, links, emptyLinks
   );
 };
 
+LeftMenuLinksSection.defaultProps = {
+  shrink: false,
+};
+
 LeftMenuLinksSection.propTypes = {
   section: PropTypes.string.isRequired,
   searchable: PropTypes.bool.isRequired,
+  shrink: PropTypes.bool,
   location: PropTypes.shape({
     pathname: PropTypes.string,
   }).isRequired,

packages/strapi-admin/admin/src/containers/LeftMenu/Wrapper.js

@@ -15,6 +15,29 @@ const Wrapper = styled.div`
   height: 100vh;
   width: ${props => 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 = {

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 {