(core) Making side bars a bit more usable for narrow screen

Summary:
 - closes side bars when tapping content area
 - opens left panel when tapping the page name

Test Plan: Includes browser tests.

Reviewers: paulfitz

Reviewed By: paulfitz

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

app/client/ui/AppUI.ts

@@ -149,6 +149,6 @@ function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App)
     onResize,
     testId,
     optimizeNarrowScreen: true,
-    contentBottom: dom.create(createBottomBarDoc, pageModel)
+    contentBottom: dom.create(createBottomBarDoc, pageModel, leftPanelOpen, rightPanelOpen)
   });
 }

app/client/ui/BottomBar.ts

@@ -1,10 +1,16 @@
 import {DocPageModel} from 'app/client/models/DocPageModel';
-import {dom, MultiHolder, styled} from 'grainjs';
+import {testId} from 'app/client/ui2018/cssVars';
+import {dom, MultiHolder, Observable, styled} from 'grainjs';
 
 
-export function createBottomBarDoc(owner: MultiHolder, pageModel: DocPageModel) {
+export function createBottomBarDoc(owner: MultiHolder, pageModel: DocPageModel, leftPanelOpen: Observable<boolean>,
+                                   rightPanelOpen: Observable<boolean>) {
   return dom.maybe(pageModel.gristDoc, (gristDoc) => (
-    cssPageName(dom.text(gristDoc.currentPageName))
+    cssPageName(
+      dom.text(gristDoc.currentPageName),
+      dom.on('click', () => { rightPanelOpen.set(false); leftPanelOpen.set(true); }),
+      testId('page-name'),
+    )
   ));
 }
 
@@ -13,4 +19,5 @@ const cssPageName = styled('div', `
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: pointer;
 `);

app/client/ui/PagePanels.ts

@@ -117,6 +117,10 @@ export function pagePanels(page: PageContents) {
     ),
     cssContentOverlay(
       dom.show((use) => use(left.panelOpen) || Boolean(right && use(right.panelOpen))),
+      dom.on('click', () => {
+        left.panelOpen.set(false);
+        if (right) { right.panelOpen.set(false); }
+      }),
       testId('overlay'))
   ), (
     !optimizeNarrowScreen ? null :