Merge branch 'feat/um-285-report-schema' into dev

components/layout/NavBar.js

@@ -20,6 +20,7 @@ export function NavBar() {
     { label: formatMessage(labels.dashboard), url: '/dashboard' },
     { label: formatMessage(labels.reports), url: '/reports' },
     { label: formatMessage(labels.realtime), url: '/realtime' },
+    { label: formatMessage(labels.reports), url: '/reports/funnel' },
     !cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
   ].filter(n => n);
 

components/layout/ReportsLayout.js

@@ -0,0 +1,23 @@
+import { Column, Row } from 'react-basics';
+import styles from './ReportsLayout.module.css';
+
+export function SettingsLayout({ children, filter, header }) {
+  return (
+    <>
+      <Row>{header}</Row>
+      <Row>
+        {filter && (
+          <Column className={styles.filter} defaultSize={12} md={4} lg={3} xl={3}>
+            <h2>Filters</h2>
+            {filter}
+          </Column>
+        )}
+        <Column className={styles.content} defaultSize={12} md={8} lg={9} xl={9}>
+          {children}
+        </Column>
+      </Row>
+    </>
+  );
+}
+
+export default SettingsLayout;

components/layout/ReportsLayout.module.css

@@ -0,0 +1,23 @@
+.filter {
+  margin-top: 30px;
+  min-width: 200px;
+  max-width: 100vw;
+  padding: 10px;
+  background: var(--base50);
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+}
+
+.filter h2 {
+  padding-bottom: 20px;
+}
+
+.content {
+  min-height: 50vh;
+}
+
+@media only screen and (max-width: 768px) {
+  .menu {
+    display: none;
+  }
+}