Undock and overlap sidebar at small screen sizes

typescript/packages/common-os-ui/src/components/os-chrome.ts

@@ -1,7 +1,8 @@
-import { LitElement, css, html } from "lit-element";
+import { LitElement, PropertyValues, css, html } from "lit-element";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { base } from "../shared/styles.js";
+import { breakpointLg, ResponsiveElement } from "./responsive-element.js";
 
 /**
  * Custom element representing the chrome (outer structure) of the application.
@@ -19,7 +20,7 @@ import { base } from "../shared/styles.js";
  * @slot sidebar-toolbar - Additional elements to be placed in the sidebar toolbar.
  */
 @customElement("os-chrome")
-export class OsChrome extends LitElement {
+export class OsChrome extends ResponsiveElement {
   static override styles = [
     base,
     css`
@@ -31,14 +32,58 @@ export class OsChrome extends LitElement {
       }
 
       .chrome {
-        display: grid;
-        grid-template-columns: 1fr 0;
-        grid-template-areas: "main sidebar";
-        overflow: hidden;
+        display: block;
+        grid-template-columns: 1fr;
         justify-items: stretch;
         height: 100vh;
-        transition: grid var(--dur-md) var(--ease-out-cubic);
         position: relative;
+        overflow: hidden;
+        /*
+        NOTE: prevents transition initial state bug. We trigger an update due to
+        responsive element ResizeObserver, which sets a breakpoint class to
+        work around bugs with container queries and slotted content.
+        Because this class is not present during the first microtask, the
+        initial property of the padding is 0, causing a transition on first
+        load. However, setting display none and then block when we add the
+        breakpoint class solves the issue, since the the intial value will
+        not be used for animation since the element is display none.
+        */
+        display: none;
+
+        &.breakpoint {
+          display: block;
+        }
+
+        .chrome-main {
+          transition: padding-right var(--dur-lg) var(--ease-out-expo);
+          padding-right: 0;
+
+          :host([sidebar]) .breakpoint-lg & {
+            padding-right: var(--sidebar-width);
+          }
+        }
+
+        .chrome-sidebar {
+          background-color: var(--bg-2);
+          position: absolute;
+          right: 0;
+          top: 0;
+          height: 100vh;
+          transform: translateX(var(--sidebar-width));
+          transition: transform var(--dur-lg) var(--ease-out-expo);
+
+          :host([sidebar]) & {
+            transform: translateX(0);
+          }
+
+          .chrome-sidebar-inner {
+            display: block;
+            /* Set fixed width on inner element to prevent text reflow on
+            sidebar animation. */
+            width: var(--sidebar-width);
+            height: 100vh;
+          }
+        }
       }
 
       /** Container for absolute elements */
@@ -74,27 +119,6 @@ export class OsChrome extends LitElement {
         }
       }
 
-      .chrome-sidebar {
-        background-color: var(--bg-2);
-        grid-area: sidebar;
-        height: 100vh;
-
-        .chrome-sidebar-inner {
-          display: block;
-          /* Set fixed width on inner element to prevent text reflow on
-          sidebar animation. */
-          width: var(--sidebar-width);
-          height: 100vh;
-        }
-      }
-
-      /* Sidebar animation */
-      :host([sidebar]) {
-        .chrome {
-          grid-template-columns: 1fr var(--sidebar-width);
-        }
-      }
-
       /* Half-and-half editor mode animation */
       :host([state="split"]) {
         .chrome {
@@ -123,8 +147,14 @@ export class OsChrome extends LitElement {
       this.sidebar = !this.sidebar;
     };
 
+    const classes = classMap({
+      chrome: true,
+      breakpoint: this.getObservedWidth() > 0,
+      "breakpoint-lg": this.getObservedWidth() >= breakpointLg + 480,
+    });
+
     return html`
-      <div class="chrome" @sidebarclose="${onSidebarClose}">
+      <div class="${classes}" @sidebarclose="${onSidebarClose}">
         <div class="chrome-overlay">
           <os-fabgroup class="pin-br">
             <os-bubble icon="add" text="Lorem ipsum dolor sit amet"></os-bubble>

typescript/packages/common-os-ui/src/components/os-colgrid.ts

@@ -1,7 +1,11 @@
 import { css, html } from "lit-element";
 import { customElement } from "lit/decorators.js";
 import { base } from "../shared/styles.js";
-import { ResponsiveElement } from "./responsive-element.js";
+import {
+  ResponsiveElement,
+  breakpointLg,
+  breakpointMd,
+} from "./responsive-element.js";
 
 @customElement("os-colgrid")
 export class OsColgrid extends ResponsiveElement {
@@ -31,13 +35,13 @@ export class OsColgrid extends ResponsiveElement {
   ];
 
   #getSizeClass() {
-    switch (this.breakpoint()) {
-      case "lg":
-        return "colgrid-lg";
-      case "md":
-        return "colgrid-md";
-      default:
-        return "colgrid-sm";
+    const width = this.getObservedWidth();
+    if (width >= breakpointLg) {
+      return "colgrid-lg";
+    } else if (width >= breakpointMd) {
+      return "colgrid-md";
+    } else {
+      return "colgrid-sm";
     }
   }
 

typescript/packages/common-os-ui/src/components/os-navstack.ts

@@ -4,9 +4,8 @@ import {
   setTransitions,
   transition,
   durationMd,
-  cubicBezierCss,
-  easeOutCubic,
-  easeOutExpo,
+  easeOutExpoCss,
+  easeOutCubicCss,
 } from "../shared/animation.js";
 
 @customElement("os-navstack")
@@ -83,15 +82,15 @@ export class OsNavstack extends LitElement {
       transition({
         property: "left",
         duration: durationMd,
-        easing: cubicBezierCss(easeOutCubic),
-        value: `480px`,
+        easing: easeOutCubicCss,
+        to: `480px`,
       }),
       transition({
         property: "opacity",
         duration: durationMd,
         delay: 100,
-        easing: cubicBezierCss(easeOutExpo),
-        value: `0`,
+        easing: easeOutExpoCss,
+        to: `0`,
       }),
     ]);
     panels.pop();

typescript/packages/common-os-ui/src/components/responsive-element.ts

@@ -1,15 +1,7 @@
 import { LitElement } from "lit";
-import { state } from "lit/decorators.js";
 
-export const breakpointForWidth = (width: number): String => {
-  if (width >= 800) {
-    return "lg";
-  } else if (width >= 600) {
-    return "md";
-  } else {
-    return "sm";
-  }
-};
+export const breakpointLg = 800;
+export const breakpointMd = 600;
 
 /**
  * This element reacts to changes in its width using a resize observer,
@@ -27,12 +19,18 @@ export const breakpointForWidth = (width: number): String => {
  */
 export class ResponsiveElement extends LitElement {
   #resizeObserver: ResizeObserver;
-  @state() private _observedWidth: number = -1;
+  #observedWidth: number = -1;
 
   constructor() {
     super();
+    const isSelf = (entry: ResizeObserverEntry) => entry.target === this;
     this.#resizeObserver = new ResizeObserver((entries) => {
-      this._observedWidth = entries.at(0)?.contentRect.width ?? -1;
+      const entry = entries.find(isSelf);
+      const observedWidth = entry?.contentRect.width ?? -1;
+      if (this.#observedWidth !== observedWidth) {
+        this.#observedWidth = observedWidth;
+        this.requestUpdate();
+      }
     });
   }
 
@@ -47,7 +45,7 @@ export class ResponsiveElement extends LitElement {
     this.#resizeObserver.disconnect();
   }
 
-  breakpoint() {
-    return breakpointForWidth(this._observedWidth);
+  getObservedWidth() {
+    return this.#observedWidth;
   }
 }

typescript/packages/common-os-ui/src/shared/animation.ts

@@ -10,7 +10,7 @@ export const slowable = (ms: number) => (slowAnimations ? 10000 : ms);
 
 export const durationSm = 250;
 export const durationMd = 350;
-export const durationLg = 500;
+export const durationLg = 350;
 
 /** Create a promise for a timeout  */
 export const timeout = (ms: number): Promise<void> =>
@@ -39,29 +39,36 @@ export const easeOutExpo = cubicBezier(0.19, 1, 0.22, 1);
 export const cubicBezierCss = ({ x1, y1, x2, y2 }: CubicBezier) =>
   `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
 
+export const easeOutCubicCss = cubicBezierCss(easeOutCubic);
+export const easeOutExpoCss = cubicBezierCss(easeOutExpo);
+
 export type Transition = {
   property: string;
   duration: number;
   delay: number;
   easing: string;
-  value: string;
+  from?: string;
+  to: string;
 };
 
 export const transition = ({
   property,
-  value,
-  duration = 0,
+  from,
+  to,
+  duration = durationMd,
   delay = 0,
-  easing = "ease-out",
+  easing = easeOutCubicCss,
 }: {
   property: string;
-  value: string;
+  from?: any;
+  to: any;
   duration?: number;
   delay?: number;
   easing?: string;
 }): Transition => ({
   property,
-  value,
+  from: from != null ? `${from}` : undefined,
+  to: `${to}`,
   duration: slowable(duration),
   easing,
   delay,
@@ -92,11 +99,18 @@ export const setTransitions = async <E extends HTMLElement>(
   transitions: Array<Transition>,
 ): Promise<E> => {
   const fullDuration = fullTransitionDuration(transitions);
+  element.style.removeProperty("transition");
+  for (const t of transitions) {
+    if (t.from != null) {
+      element.style.setProperty(t.property, t.from);
+    }
+  }
+  await timeout(0);
   element.style.transition = transitionsToCssRule(transitions);
   for (const t of transitions) {
-    element.style.setProperty(t.property, t.value);
+    element.style.setProperty(t.property, t.to);
   }
-  await timeout(fullDuration + 0.001);
+  await timeout(fullDuration);
   element.style.removeProperty("transition");
   return element;
 };