@imfusion/web-ui 0.10.1-dev.3.gc9ea991e → 0.10.1-dev.6.gf715361a

package/CHANGELOG.md

@@ -247,6 +247,37 @@ AppShell sections draw no dividers. Delete overrides of the border properties, w
 - --imf-ui-appshell-border-width: var(--imf-ui-border-size-2);
 ```
 
+Navbar sections pad themselves with `--imf-ui-appshell-navbar-padding`, and that rule outranks a single class. Delete your
+own section padding, and set the variable when the gutter needs to change:
+
+```diff
+- .navSection { padding: 0 var(--imf-ui-appshell-padding); }
++ .root { --imf-ui-appshell-navbar-padding: var(--imf-ui-size-5); }
+```
+
+Nav links widen past the gutter only as `AppShell.NavItem`. Replace hand-built navbar links, and pass a router link through
+`render`:
+
+```diff
+- <MyNavLink to="/products" icon={Box} label="Products" />
++ <AppShell.NavItem render={<Link to="/products" />} icon={<Icon glyph={Box} />}>Products</AppShell.NavItem>
+```
+
+Above `lg` the aside docks whether or not `open` is set. Render no aside when there is nothing to show, not an empty one:
+
+```diff
+- <AppShell.Aside>{selected ? <Details /> : <div />}</AppShell.Aside>
++ {selected ? <AppShell.Aside><Details /></AppShell.Aside> : null}
+```
+
+The navbar's first row and Main's offset read the header height while an `AppShell.Header` is rendered, even when CSS hides
+it. Render the header conditionally instead of hiding it or setting the height to `0`:
+
+```diff
+- <AppShell.Header className={styles.hiddenOnDesktop}>…</AppShell.Header>
++ {isDesktop ? null : <AppShell.Header>…</AppShell.Header>}
+```
+
 ### Breaking
 
 - **Breaking:** The library supports Safari 17.5, Chrome 123, and Firefox 120 or newer. — Nikolaus Brunner <brunner@imfusion.com>
@@ -254,6 +285,11 @@ AppShell sections draw no dividers. Delete overrides of the border properties, w
   - The JavaScript build targets the same versions.
 - **Breaking:** AppShell sections draw no dividers, and the `--imf-ui-appshell-border-color`, `--imf-ui-appshell-border-width`, and `--imf-ui-appshell-border-style` properties are removed. ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
 - **Breaking:** `AppShell.Main` is the scroll container and the document does not scroll; window scroll listeners, scroll restoration, and `scrollTo` target `AppShell.Main`. ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
+- **Breaking:** AppShell owns its navbar and aside layout. ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Navbar sections pad themselves with `--imf-ui-appshell-navbar-padding` through a rule that outranks a single class.
+  - Only `AppShell.NavItem` widens past the navbar gutter.
+  - Above `lg` the aside docks whether or not `open` is set.
+  - The navbar's first row and Main's offset read the header height whenever an `AppShell.Header` is rendered.
 
 ### Added
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.10.1-dev.3.gc9ea991e",
+  "version": "0.10.1-dev.6.gf715361a",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",