(core) Animate side panels

Summary:
Diff makes side panels slide horizontally when opening/closing them.

Caveats:
 . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is.
 ```
   private _buildContentDom() {
    return dom.domComputed((use) => {
      // if (!use(this._isOpen)) { return null; } // remove line
      const tool = use(this._extraTool);
```
```
  private _buildHeaderDom() {
    return dom.domComputed((use) => {
      // if (!use(this._isOpen)) { return null; } // remove line
      const tool = use(this._extraTool);
      return tool ? this._buildToolHeader(tool) : this._buildStandardHeader();
```

Test Plan: Tested manually on desktop environnment with  FF and chrome by shrinking the window.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2710

app/client/ui/AppUI.ts

@@ -146,7 +146,7 @@ function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App)
       panelWidth: leftPanelWidth,
       panelOpen: leftPanelOpen,
       header: appHeader(appModel.currentOrgName || pageModel.currentOrgName, appModel.topAppModel.productFlavor),
-      content: pageModel.createLeftPane(leftPanelOpen),
+      content: pageModel.createLeftPane(isNarrowScreen() ? Observable.create(null, true) : leftPanelOpen),
     },
     rightPanel: {
       panelWidth: rightPanelWidth,

app/client/ui/PagePanels.ts

@@ -3,7 +3,7 @@
  */
 import {resizeFlexVHandle} from 'app/client/ui/resizeHandle';
 import {transition} from 'app/client/ui/transitions';
-import {colors, cssHideForNarrowScreen, mediaNotSmall, mediaSmall} from 'app/client/ui2018/cssVars';
+import {colors, cssHideForNarrowScreen, isNarrowScreen, mediaNotSmall, mediaSmall} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, DomArg, noTestId, Observable, styled, TestId} from "grainjs";
 
@@ -48,7 +48,7 @@ export function pagePanels(page: PageContents) {
 
       // Opening/closing the left pane, with transitions.
       cssLeftPane.cls('-open', left.panelOpen),
-      transition(left.panelOpen, {
+      optimizeNarrowScreen && isNarrowScreen() ? null : transition(left.panelOpen, {
         prepare(elem, open) { elem.style.marginRight = (open ? -1 : 1) * (left.panelWidth.get() - 48) + 'px'; },
         run(elem, open) { elem.style.marginRight = ''; },
         finish: onResize,
@@ -107,7 +107,7 @@ export function pagePanels(page: PageContents) {
 
         // Opening/closing the right pane, with transitions.
         cssRightPane.cls('-open', right.panelOpen),
-        transition(right.panelOpen, {
+        optimizeNarrowScreen && isNarrowScreen() ? null : transition(right.panelOpen, {
           prepare(elem, open) { elem.style.marginLeft = (open ? -1 : 1) * right.panelWidth.get() + 'px'; },
           run(elem, open) { elem.style.marginLeft = ''; },
           finish: onResize,
@@ -193,13 +193,17 @@ export const cssLeftPane = styled(cssVBox, `
   transition: margin-right 0.4s;
   @media ${mediaSmall} {
     .${cssPageContainer.className}-optimizeNarrowScreen & {
-      width: 0px;
+      width: 240px;
       position: absolute;
       z-index: 10;
       top: 0;
       bottom: 0;
-      left: 0;
+      left: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
       box-shadow: 10px 0 5px rgba(0, 0, 0, 0.2);
+      transition: left 0.4s;
+    }
+    .${cssPageContainer.className}-optimizeNarrowScreen &-open {
+      left: 0;
     }
   }
   &-open {
@@ -233,12 +237,17 @@ const cssRightPane = styled(cssVBox, `
   z-index: 0;
   @media ${mediaSmall} {
     .${cssPageContainer.className}-optimizeNarrowScreen & {
+      width: 240px;
       position: absolute;
       z-index: 10;
       top: 0;
       bottom: 0;
-      right: 0;
+      right: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
       box-shadow: -10px 0 5px rgba(0, 0, 0, 0.2);
+      transition: right 0.4s;
+    }
+    .${cssPageContainer.className}-optimizeNarrowScreen &-open {
+      right: 0;
     }
   }
   &-open {