Skip to content

v3.1.3 - Navbar/AppSidebar density + hoverEffect, sidebar width fixes

Latest
Latest

Choose a tag to compare

View all tags
@WebbaLuca WebbaLuca released this 17 May 10:32
v3.1.3
7572eb8

Added

Navbar.density

New prop. 'compact' shrinks the whole bar: shorter height (sm 40px, md 48px, lg 56px), smaller logo, tighter item padding, smaller fontSize and gap. A denser version of the same size preset.

Navbar.hoverEffect

New prop with 'pill' (default sliding bg), 'underline' (animated bottom bar), 'highlight' (text-only colour shift to brand), 'none'. Active item follows the same family. The sliding pill indicator and the icon scale-on-hover are both gated to 'pill'.

Navbar.layout="search"

New layout preset. Swaps the items row for a real centered <input> (logo / wide input / actions). Drive it via the new searchInline prop:

<Navbar
  layout="search"
  searchInline={{ value, onChange, onSubmit, placeholder }}
  actions={<Button>Sign in</Button>}
/>

Anchored to the viewport center via the same 3-column grid as itemsAlignment="center". Brand-tinted focus halo. Enter triggers onSubmit. On mobile, the inline input is hidden and the existing search icon button shows up as fallback.

AppSidebar.density

New prop. 'compact' tightens item padding, the icon/label gap, and the icon size (top-level 20→18, nested 16→14). About 30% more items fit at the same sidebar width.

AppSidebar.hoverEffect

New prop. Picks the indicator drawn on hover and on the active item:

  • 'bg' (default): subtle background tint on hover, brand-color text on active.
  • 'border-left': 3px left bar (brand on active, muted on hover).
  • 'dot': small brand-tinted dot left of the icon. Reserves extra left padding so the dot sits cleanly.
  • 'highlight': text + icon shift to the brand colour. No bg, no bar.
  • 'none': no surface feedback. Active item still gets the brand colour.

Changed

  • AppSidebar default width changed from 280 to 240.
  • AppSidebar padding tightened: top/bottom 1.5rem (1rem on mobile), left/right 0.75rem.

Fixed

AppSidebar

  • The inner now uses box-sizing: border-box so the width prop is the true layout width. Previously the aside took width + 2 * padding and overflowed narrow wrappers.
  • The aside no longer sets minWidth: width (now minWidth: 0). The aside can follow a narrower parent.
  • Nav item button gets box-sizing: border-box so width: 100% plus internal padding doesn't push the button past the parent's right edge.
  • Nav item label gets min-width: 0 + ellipsis. Long labels truncate instead of pushing the right padding out.
  • Parent sliding indicator now renders only when hoverEffect === 'bg'. Other effects carry the active state on the item itself.

Navbar

  • Mega-menu panel now renders via createPortal to document.body. Escapes any ancestor with transform, filter, or perspective (the NavItem button uses transform: scale() for the press effect, which previously broke the panel's position: fixed).

ForgeProvider

  • Nested instances no longer write their CSS variables to document.documentElement. Previously, nested providers (theme previews on a landing page, isolated demos) overrode the root provider's variables on the global scope and, on unmount, removed them entirely. Portals (dropdowns, mega menus,
    popovers) lost their tokens after a page with nested providers unmounted. The root provider stays the only writer on documentElement; nested providers scope to their wrapper div.

Install

npm install wss3-forge@3.1.3

Full changelog: v3.1.2...v3.1.3

Assets 2
Loading