Add Components for BH admin panel redesign

[GiuseppeArcifa]

Proposed changes

This PR adds into the UI Library all the new components needed for the new Bluehost admin panel redesign, it Adds:

NavigationProvider component

This components should be used to wrap elements that needs the access to the activePath which can be also manipulated through its setter setActivePath.
This status and its setter can be retrieved using the useNavigationContext hook.

AppBarNavigation component

This component setup the environment with a NavigationProvider for it's child components which are AppBarNavigation.AppBar and AppBarNavigation.Item.

The AppBarNavigation.AppBar renders the actual navbar which can be filled with AppBarNavigation.Item

Code Example

// Usage inside a components that is already wrapped in a `AppBarNavigation` or `NavigationProvider`

const { setActivePath } = useNavigationContext();

return (
	<AppBarNavigation.AppBar position={ 'absolute' }>
		{
			navs.map( nav => (
				<AppBarNavigation.Item
					key={ nav.id }
					href={ `#${ nav.id }` }
					label={ nav.label }
					onClick={ () => setActivePath( `#${ nav.id }` ) }
				/>
			) )
		}
		<div className={'nfd-grow'}/>
		<AppBarNavigation.Item
			href={ '#help' }
			label={ 'Help' }
			onClick={ () => setActivePath( '#help') }
		/>
	</AppBarNavigation.AppBar>
);

Result

Registrazione.schermo.2025-08-06.alle.19.58.43.mov

Type of Change

Production

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Dependency update
• Refactoring / housekeeping (changes to files not directly related to functionality)

Development

• Tests
• Dependency update
• Environment update / refactoring
• Documentation Update

Visual

Checklist

• I have read the CONTRIBUTING doc
• I have viewed my change in a web-browser
• Linting and tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Changelog

New: `AppBarNavigation` component
New: `AppBarNavigation.AppBar` component
New: `AppBarNavigation.Item` component
New: `NavigationContext` context to store utils statuses to implement navigation
New: `NavigationProvider` copmonent which provides access to some utils to implement navigation for `AppBarNavigation` and `SidebarNavigation` components
Dev: refactored `SidebarNavigation` component implementing the new `NavigationProvider`
Dev: fixed `watch:js` npm script command

[GiuseppeArcifa]

If both AppBarNavigation.AppBar and SidebarNavigation.Sidebar are put inside a NavigationProvider they will be synced

Registrazione.schermo.2025-08-06.alle.20.00.34.mov