add basic support for mobile mode

web/static/src/ts/core/utils.ts

@@ -51,3 +51,35 @@ export function memoize<R, T extends (...args: any[]) => R>(
   }
   return memoizedFunction as T;
 }
+
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing.
+ *
+ * Inspired by https://davidwalsh.name/javascript-debounce-function
+ */
+export function debounce(
+  func: Function,
+  wait: number,
+  immediate?: boolean
+): Function {
+  let timeout;
+  return function(this: any) {
+    const context = this;
+    const args = arguments;
+    function later() {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    }
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+}

web/static/src/ts/env.ts

@@ -74,6 +74,6 @@ export const makeEnvironment = memoize(function(): Env {
 
     rpc: ajax.rpc,
     debug: false,
-    isMobile: false
+    isMobile: window.innerWidth <= 768
   };
 });

web/static/src/ts/main.ts

@@ -4,6 +4,7 @@ import { makeEnvironment } from "./env";
 import { registry } from "./registry";
 import { Discuss } from "./widgets/discuss";
 import { Root } from "./root";
+import { debounce } from "./core/utils";
 
 //------------------------------------------------------------------------------
 // Prepare application registry
@@ -17,4 +18,12 @@ document.addEventListener("DOMContentLoaded", async function() {
   const env = makeEnvironment();
   const rootWidget = new Root(env);
   await rootWidget.mount(document.body);
+
+  window.addEventListener("resize", <any>debounce(() => {
+    const isMobile = window.innerWidth <= 768;
+    if (isMobile !== env.isMobile) {
+      env.isMobile = isMobile;
+      rootWidget.render();
+    }
+  }, 100));
 });

web/static/src/ts/widgets/Navbar.ts

@@ -3,7 +3,7 @@ import { Env, Menu } from "../env";
 
 const template = `
     <div class="o_navbar">
-        <span class="title">Odoo</span>
+        <span class="title">Odoo<t t-if="env.isMobile"> MOBILE</t></span>
         <ul>
             <li t-foreach="env.menus" t-as="menu">
                 <a t-att-href="getUrl(menu)">