(core) Adds scafoldings for the narrow screen layout

Summary:
This commit adds a bottom bar with 2 openers  button for each side panels.
It takes care of showing/hiding other openers when appropriate.
It also implements the new style for narrow screen with the side panels overlapping the main pane.

Remaining tasks:
  - adjust content of the breadcrumbs for narrow screen.
  - content of the bottom bar

Test Plan: Adds test to projects/PagePanels

Reviewers: paulfitz

Reviewed By: paulfitz

Subscribers: dsagal

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

app/client/ui2018/cssVars.ts

@@ -154,6 +154,17 @@ export const cssRootVars = cssBodyVars.className;
 // class ".test-{name}". Ideally, we'd use noTestId() instead in production.
 export const testId: TestId = makeTestId('test-');
 
+// Max width for narrow screen layout (in px). Note: 768px is bootstrap's definition of small screen
+export const maxNarrowScreenWidth = 768;
+
+export const cssHideForNarrowScreen = styled('div', `
+  @media (max-width: ${maxNarrowScreenWidth}px) {
+    & {
+      display: none !important;
+    }
+  }
+`);
+
 /**
  * Attaches the global css properties to the document's root to them available in the page.
  */