Sidebar collapse (#1760)

* feat: Sidebar collapse

* fix: Handling app name text-overflow

* fix overlaying JS console line number bar

* removed toolbar ease-in animation

* fixed pin icon padding

* Update CHANGELOG.md

* fixed pinned collapse state

* fixed uncollapsing on mobile

Co-authored-by: Douglas Muraoka <[email protected]>

Author: mtrezza

CHANGELOG.md

@@ -5,6 +5,7 @@
 
 __New features:__
 * Added data export in CSV format for classes ([#1494](https://github.com/parse-community/parse-dashboard/pull/1494)), thanks to [Cory Imdieke](https://github.com/Vortec4800), [Manuel Trezza](https://github.com/mtrezza).
+* Collapse sidebar ([#1760](https://github.com/parse-community/parse-dashboard/pull/1760)), thanks to [Douglas Muraoka](https://github.com/douglasmuraoka), [Manuel Trezza](https://github.com/mtrezza).
 
 ### 2.1.0
 [Full Changelog](https://github.com/parse-community/parse-dashboard/compare/2.0.5...2.1.0)

src/components/Sidebar/AppName.react.js

@@ -1,8 +1,18 @@
 import React from 'react';
+import Pin from 'components/Sidebar/Pin.react';
 import styles from 'components/Sidebar/Sidebar.scss';
 
-export default ({ name, onClick }) => (
-  <div className={styles.currentApp} onClick={onClick}>
-    {name}
+const AppName = ({ name, onClick, onPinClick }) => (
+  <div>
+    <div className={styles.currentApp}>
+      <div className={styles.appNameContainer} onClick={onClick}>
+        <div className={styles.currentAppName}>
+          {name}
+        </div>
+      </div>
+      <Pin onClick={onPinClick} />
+    </div>
   </div>
 );
+
+export default AppName;

src/components/Sidebar/AppsMenu.react.js

@@ -13,9 +13,9 @@ import React            from 'react';
 import styles           from 'components/Sidebar/Sidebar.scss';
 import { unselectable } from 'stylesheets/base.scss';
 
-let AppsMenu = ({ apps, current, height, onSelect }) => (
+const AppsMenu = ({ apps, current, height, onSelect, onPinClick }) => (
   <div style={{ height }} className={[styles.appsMenu, unselectable].join(' ')}>
-    <AppName name={current.name} onClick={onSelect.bind(null, current.slug)} />
+    <AppName name={current.name} onClick={onSelect.bind(null, current.slug)} onPinClick={onPinClick} />
     <div className={styles.menuSection}>All Apps</div>
     <div className={styles.appListContainer}>
       {apps.map((app) => {

src/components/Sidebar/FooterMenu.react.js

@@ -33,6 +33,14 @@ export default class FooterMenu extends React.Component {
   }
 
   render() {
+    if (this.props.isCollapsed) {
+      return (
+        <div className={styles.more}>
+          <Icon height={24} width={24} name='ellipses' />
+        </div>
+      );
+    }
+
     let content = null;
     if (this.state.show) {
       content = (

src/components/Sidebar/Pin.react.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+import Icon from "components/Icon/Icon.react";
+import styles from "components/Sidebar/Sidebar.scss";
+
+const Pin = ({ onClick }) => (
+  <div className={styles.pinContainer} onClick={onClick}>
+    <Icon className={styles.sidebarPin} name="pin" width={20} height={20} />
+  </div>
+);
+
+export default Pin;

src/components/Sidebar/Sidebar.react.js

@@ -10,8 +10,10 @@ import AppsManager    from 'lib/AppsManager';
 import AppsMenu       from 'components/Sidebar/AppsMenu.react';
 import AppName        from 'components/Sidebar/AppName.react';
 import FooterMenu     from 'components/Sidebar/FooterMenu.react';
-import React, { useState } from 'react';
+import isInsidePopover from 'lib/isInsidePopover';
 import ParseApp       from 'lib/ParseApp';
+import Pin            from 'components/Sidebar/Pin.react';
+import React, { useEffect, useState } from 'react';
 import SidebarHeader  from 'components/Sidebar/SidebarHeader.react';
 import SidebarSection from 'components/Sidebar/SidebarSection.react';
 import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react';
@@ -29,7 +31,46 @@ const Sidebar = ({
   primaryBackgroundColor,
   secondaryBackgroundColor
 }, { currentApp }) => {
+  const collapseWidth = 980;
   const [ appsMenuOpen, setAppsMenuOpen ] = useState(false);
+  const [ collapsed, setCollapsed ] = useState(false);
+  const [ fixed, setFixed ] = useState(true);
+  let currentWidth = window.innerWidth;
+
+  const windowResizeHandler = () => {
+    if (window.innerWidth <= collapseWidth && currentWidth > collapseWidth) {
+      if (document.body.className.indexOf(' expanded') === -1) {
+        document.body.className += ' expanded';
+      }
+      setCollapsed(true);
+      setFixed(false);
+    } else if (window.innerWidth > collapseWidth && currentWidth <= collapseWidth) {
+      document.body.className = document.body.className.replace(' expanded', '');
+      setCollapsed(false);
+      setFixed(true);
+    }
+    // Update window width
+    currentWidth = window.innerWidth;
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', windowResizeHandler);
+
+    return () => {
+      window.removeEventListener('resize', windowResizeHandler);
+    }
+  });
+
+  const sidebarClasses = [styles.sidebar];
+  if (fixed) {
+    document.body.className = document.body.className.replace(' expanded', '');
+  } else if (!fixed && collapsed) {
+    sidebarClasses.push(styles.collapsed);
+    if (document.body.className.indexOf(' expanded') === -1) {
+      document.body.className += ' expanded';
+    }
+  }
+
   const _subMenu = subsections => {
     if (!subsections) {
       return null;
@@ -54,25 +95,40 @@ const Sidebar = ({
     );
   }
 
-  const apps = [].concat(AppsManager.apps()).sort((a, b) => (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)));
+  const onPinClick = () => {
+    if (fixed) {
+      setFixed(false);
+      setCollapsed(true);
+      setAppsMenuOpen(false);
+    } else {
+      setFixed(true);
+      setCollapsed(false);
+    }
+  };
 
   let sidebarContent;
   if (appsMenuOpen) {
+    const apps = [].concat(AppsManager.apps()).sort((a, b) => (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)));
     sidebarContent = (
       <AppsMenu
         apps={apps}
         current={currentApp}
+        onPinClick={onPinClick}
         onSelect={() => setAppsMenuOpen(false)} />
     );
   } else {
+    const topContent = collapsed
+      ? <Pin onClick={onPinClick} />
+      : appSelector && (
+        <div className={styles.apps}>
+          <AppName name={currentApp.name} onClick={() => setAppsMenuOpen(true)} onPinClick={onPinClick} />
+        </div>
+      ) || undefined;
+
     sidebarContent = (
       <>
-        {appSelector && (
-          <div className={styles.apps}>
-            <AppName name={currentApp.name} onClick={() => setAppsMenuOpen(true)} />
-          </div>
-        )}
         <div className={styles.content}>
+          {topContent}
           {sections.map(({
             name,
             icon,
@@ -84,15 +140,15 @@ const Sidebar = ({
             return (
               <SidebarSection
                 key={name}
-                name={name}
+                name={collapsed ? null : name}
                 icon={icon}
                 style={style}
                 link={prefix + link}
                 active={active}
                 primaryBackgroundColor={primaryBackgroundColor}
                 secondaryBackgroundColor={secondaryBackgroundColor}
                 >
-                {active ? _subMenu(subsections) : null}
+                {!collapsed && active ? _subMenu(subsections) : null}
               </SidebarSection>
             );
           })}
@@ -101,16 +157,39 @@ const Sidebar = ({
     )
   }
 
-  return <div className={styles.sidebar}>
-    <SidebarHeader />
-    {sidebarContent}
-    <div className={styles.footer}>
-      <a target='_blank' href='http://parseplatform.org/'>Open Source Hub</a>
-      <a target='_blank' href='https://github.com/parse-community'>GitHub</a>
-      <a target='_blank' href='http://docs.parseplatform.org/'>Docs</a>
-      <FooterMenu />
+  return (
+    <div
+      className={sidebarClasses.join(' ')}
+      onMouseEnter={
+        !fixed && collapsed
+          ? () => setCollapsed(false)
+          : undefined
+      }
+      onMouseLeave={
+        !collapsed && !fixed
+          ? (e => {
+            if (!isInsidePopover(e.relatedTarget)) {
+              setAppsMenuOpen(false);
+              setCollapsed(true);
+            }
+          })
+          : undefined
+      }
+    >
+      <SidebarHeader isCollapsed={!appsMenuOpen && collapsed} />
+      {sidebarContent}
+      <div className={styles.footer}>
+        {!collapsed && (
+          <>
+            <a target='_blank' href='http://parseplatform.org/'>Open Source Hub</a>
+            <a target='_blank' href='https://github.com/parse-community'>GitHub</a>
+            <a target='_blank' href='http://docs.parseplatform.org/'>Docs</a>
+          </>
+        )}
+        <FooterMenu isCollapsed={!appsMenuOpen && collapsed} />
+      </div>
     </div>
-  </div>
+  );
 }
 
 Sidebar.contextTypes = {