refactor: Sidebar collapse

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,43 @@ const Sidebar = ({
   primaryBackgroundColor,
   secondaryBackgroundColor
 }, { currentApp }) => {
+  const isSidebarFixed = window.innerWidth > 980;
   const [ appsMenuOpen, setAppsMenuOpen ] = useState(false);
+  const [ collapsed, setCollapsed ] = useState(!isSidebarFixed);
+  const [ fixed, setFixed ] = useState(isSidebarFixed);
+
+  const windowResizeHandler = () => {
+    if (window.innerWidth <= 980) {
+      if (document.body.className.indexOf(' expanded') === -1) {
+        document.body.className += ' expanded';
+      }
+      setCollapsed(true);
+      setFixed(false);
+    } else {
+      document.body.className = document.body.className.replace(' expanded', '');
+      setCollapsed(false);
+      setFixed(true);
+    }
+  }
+
+  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 +92,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) {
+      setCollapsed(true);
+      setFixed(false);
+      setAppsMenuOpen(false);
+    } else {
+      setCollapsed(false);
+      setFixed(true);
+    }
+  };
 
   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 />
+      : 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 +137,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 +154,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 = {

src/components/Sidebar/Sidebar.scss

@@ -20,38 +20,17 @@ $footerHeight: 36px;
   bottom: 0;
   background: #0c5582;
   color: #fff;
-  transition: left 0.5s ease-in;
-}
-
-.toggle {
-  position: fixed;
-  border-radius: 5px;
-  width: 28px;
-  height: 28px;
-  top: 10px;
-  left: 310px;
-  opacity: 0;
-  transition: left 0.5s ease-in, opacity 0.5s 0.5s ease-in;
-}
 
-@media (max-width: 980px) {
-  .sidebar {
+  &.collapsed {
     left: 0;
-  }
-
-  .toggle {
-    left: 310px;
-    top: 10px;
-    opacity: 1;
-  }
+    width: 54px;
 
-  body:global(.expanded) {
-    .sidebar {
-      left: -300px;
+    .section_header > svg {
+      margin: 0;
     }
 
-    .toggle {
-      left: 10px;
+    .pinContainer > svg {
+      fill: white;
     }
   }
 }
@@ -128,10 +107,10 @@ $footerHeight: 36px;
   font-size: 18px;
   font-weight: 700;
   line-height: 30px;
-  cursor: pointer;
 }
 
 .menuRow {
+  cursor: pointer;
   border-bottom: 1px solid #0c5582;
 
   > *:first-child {
@@ -149,31 +128,40 @@ $footerHeight: 36px;
 
 .currentApp {
   position: relative;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-right: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .appNameContainer {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .currentAppName {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 215px;
+    }
 
-  &:hover{
+    &:after {
+      @include arrow('down', 10px, 7px, #132B39);
+      content: '';
+      margin-left: 10px;
+    }
+
+    &:hover {
       &:after {
         border-top-color: white;
       }
-  }
-
-  &:after {
-    @include arrow('down', 10px, 7px, #132B39);
-    position: absolute;
-    content: '';
-    top: 20px;
-    right: 15px;
+    }
   }
 }
 
-.appsMenu .currentApp:after {
-  @include arrow('up', 10px, 7px, #ffffff);
-  position: absolute;
-  content: '';
-  top: 20px;
-  right: 15px;
+.sidebarPin {
+  cursor: pointer;
+  height: 30px;
+  width: 30px;
+  padding: 6px;
 }
 
 .appsMenu {
@@ -185,6 +173,20 @@ $footerHeight: 36px;
     background: #0c5582;
   }
 
+  .currentApp {
+    .currentAppName {
+      &:after {
+        @include arrow('up', 10px, 7px, #132B39);
+      }
+
+      &:hover {
+        &:after {
+          border-bottom-color: white;
+        }
+      }
+    }
+  }
+
   .appListContainer {
     overflow-y: auto;
     height: calc(100vh - #{$headerHeight} - #{$menuSectionHeight} - #{$sidebarMenuItemHeight} - #{$footerHeight});
@@ -392,3 +394,23 @@ a.subitem {
     }
   }
 }
+
+.pinContainer {
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #094162;
+
+  svg {
+    cursor: pointer;
+    padding: 14px 0;
+    height: 48px;
+    width: 30px;
+    fill: #132B39;
+
+    &:hover {
+      fill: white;
+    }
+  }
+}