Improve AppBar Customization

[fzaninotto]

Problem

Adding new buttons or a search engine to the AppBar is cumbersome

Solution

• Add a <TitlePortal> component to avoid copy/pasting a large <Typography> from the doc
• Add a toolbar prop to let users override the default toolbar
• Add an alwaysOn prop to facilitate always on toolbars (and deprecate component prop)
• Fix styling glitches
• Fix <Title> doesn't work without routing
• Add Storybook
• Add a dedicated AppBar doc chapter
• Add a dedicated Title doc chapter
• Fix <AppBar> usage examples in the doc and demos
• Include screenshots in the doc
• Final proofreading

Resulting API

To add buttons to the app bar, you can use the <AppBar> children prop.

For instance, to add <ToggleThemeButton>:

// in src/MyAppBar.js
import { 
    AppBar,
    TitlePortal,
    ToggleThemeButton,
    defaultTheme
} from 'react-admin';

const darkTheme = { palette: { mode: 'dark' } };

export const MyAppBar = () => (
    <AppBar>
        <TitlePortal />
        <ToggleThemeButton lightTheme={defaultTheme} darkTheme={darkTheme} />
    </AppBar>
);

[djhi]

💪

[fzaninotto]

Switching to RFR

[cduran-seeri]

Thanks! Found a typo, I'm not sure if this is an issue

<`Title>` to `<Title>`
<`TitlePortal>` to `<TitlePortal>`

[djhi]

Good catch, can you open a PR to fix it?

[carlos-duran]

Sure!