Window controls overlay demo
A demo of the Window Controls Overlay API in an installable web app, for collapsing navigation bars into the title bar.
At a glance
- TypeScript, React, PWA
Tags
An experiment with the Window Controls Overlay API in a progressive web app, which lets a desktop PWA use the title bar area for its own navigation.
Installed PWAs normally keep a standard title bar. With the API, the content can cover the whole window, title bar included, as editors and music apps do. There are few open-source demos of it in React, and this project is meant as a reference implementation of a polished title bar.
Inspiration
The behaviour is modelled on the Vercel dashboard toolbar: a navigation bar that collapses and expands with the scroll direction, and does not snap at the first pixel of movement. A threshold, a kind of hysteresis, waits for a deliberate scroll before it reacts.
Techniques
- The web app manifest asks for the window-controls-overlay display mode, and a hook listens to the geometry change event, so the interface always knows where the native window buttons are and stays clear of them, even when the window is resized or the text scaled.
- Scroll-linked animation with Motion, driven by motion values that run outside the React render cycle.
- A navigation bar that adapts to where it runs: a plain header in a browser tab, a themed title bar in an installed app, and a bar that extends into the title bar when the overlay is on.
It is built with React, Vite, the Vite PWA plugin, Joy UI and Motion.
