[Doc] Add ContainerLayout and HorizontalMenu documentation

docs/ContainerLayout.md

@@ -0,0 +1,135 @@
+---
+layout: default
+title: "ContainerLayout"
+---
+
+# ContainerLayout
+
+This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component offers an alternative to react-admin's `<Layout>` for applications with a limited number of resources. It replaces the sidebar menu by an AppBar menu, and displays the content in a centered container.
+
+![Container layout](https://marmelab.com/ra-enterprise/modules/assets/ra-navigation/latest/container-layout.png)
+
+## Usage
+
+Set `<ContainerLayout>` as the `<Admin layout>` value:
+
+```jsx
+import { Admin, Resource } from 'react-admin';
+import { ContainerLayout } from '@react-admin/ra-navigation';
+
+export const App = () => (
+    <Admin dataProvider={dataProvider} layout={ContainerLayout}>
+        <Resource name="songs" list={SongList} />
+        <Resource name="artists" list={ArtistList} />
+    </Admin>
+);
+```
+
+See more details in the [ra-navigation documentation](https://marmelab.com/ra-enterprise/modules/ra-navigation#containerlayout).
+
+## Props
+
+`<ContainerLayout>` accepts the following props:
+
+-   `menu`: The menu component to use. Defaults to `<HorizontalMenu>`.
+-   `appBar`: The component to use to render the top AppBar. Defaults to `<Header>`
+-   `toolbar`: The buttons to render on the top right of the toolbar.
+-   `maxWidth`: The maximum width of the content `<Container>`. Defaults to `md`.
+-   `fixed`: Whether the content `<Container>` should be fixed. Defaults to false.
+
+## `menu`
+
+By default, `<ContainerLayout>` renders one menu item per resource in the admin. To reorder the menu, omit resources, or add custom pages, pass a custom menu element to the `menu` prop. This element should be [a `<HorizontalMenu>` component](./HorizontalMenu.md) with `<HorizontalMenu.Item>` children. Each child should have a `value` corresponding to the [application location](https://marmelab.com/ra-enterprise/modules/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.
+
+```jsx
+import {
+    Admin,
+    Resource,
+    CustomRoutes,
+    ListGuesser,
+    EditGuesser,
+} from 'react-admin';
+import { Route } from 'react-router-dom';
+import {
+    ContainerLayout,
+    HorizontalMenu,
+    useDefineAppLocation,
+} from '@react-admin/ra-navigation';
+
+const Menu = () => (
+    <HorizontalMenu>
+        <HorizontalMenu.Item label="Dashboard" to="/" value="" />
+        <HorizontalMenu.Item label="Songs" to="/songs" value="songs" />
+        <HorizontalMenu.Item label="Artists" to="/artists" value="artists" />
+        <HorizontalMenu.Item label="Custom" to="/custom" value="custom" />
+    </HorizontalMenu>
+);
+
+const MyLayout = props => <ContainerLayout {...props} menu={<Menu />} />;
+
+const CustomPage = () => {
+    useDefineAppLocation('custom');
+    return <h1>Custom page</h1>;
+};
+
+const Dashboard = () => <h1>Dashboard</h1>;
+const CustomPage = () => <h1>Custom page</h1>;
+
+export const App = () => (
+    <Admin dataProvider={dataProvider} layout={MyLayout} dashboard={Dashboard}>
+        <Resource name="songs" list={ListGuesser} edit={EditGuesser} />
+        <Resource name="artists" list={ListGuesser} edit={EditGuesser} />
+        <CustomRoutes>
+            <Route path="custom" element={<CustomPage />} />
+        </CustomRoutes>
+    </Admin>
+);
+```
+
+## `appBar`
+
+If you want to use a different color for the AppBar, or to make it sticky, pass a custom `appBar` element based on `<Header>`, which is a simple wrapper around [MUI's `<AppBar>` component](https://mui.com/material-ui/react-app-bar/#main-content).
+
+```jsx
+import { ContainerLayout, Header } from '@react-admin/ra-navigation';
+
+const myAppBar = <Header color="primary" position="sticky" />;
+const MyLayout = props => <ContainerLayout {...props} appBar={myAppBar} />;
+```
+
+## `toolbar`
+
+The `toolbar` prop allows to add buttons to the top right of the toolbar. It accepts an element.
+
+```jsx
+import { LocalesMenuButton, LoadingIndicator } from 'react-admin';
+import { ContainerLayout } from '@react-admin/ra-navigation';
+
+const toolbar = (
+    <>
+        <LocalesMenuButton />
+        <LoadingIndicator />
+    </>
+);
+const MyLayout = props => <ContainerLayout {...props} toolbar={toolbar} />;
+```
+
+## `maxWidth`
+
+This prop allows to set the maximum width of the content [`<Container>`](https://mui.com/material-ui/react-container/#main-content). It accepts a string, one of `xs`, `sm`, `md`, `lg`, `xl`, or `false` to remove side margins and occupy the full width of the screen.
+
+```jsx
+import { ContainerLayout } from '@react-admin/ra-navigation';
+
+const MyLayout = props => <ContainerLayout {...props} maxWidth="md" />;
+```
+
+## `fixed`
+
+If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the `fixed` prop. The max-width matches the min-width of the current breakpoint.
+
+```jsx
+import { ContainerLayout } from '@react-admin/ra-navigation';
+
+const MyLayout = props => <ContainerLayout {...props} fixed />;
+```

docs/HorizontalMenu.md

@@ -0,0 +1,46 @@
+---
+layout: default
+title: "The HorizontalMenu Component"
+---
+
+# `<HorizontalMenu>`
+
+
+This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component renders a horizontal menu, alternative to react-admin's [`<Menu>`](./Menu.md), to be used in the AppBar of the [`<ContainerLayout>`](./ContainerLayout.md).
+
+![Container layout](https://marmelab.com/ra-enterprise/modules/assets/ra-navigation/latest/container-layout.png)
+
+## Usage
+
+Create a menu component based on `<HorizontalMenu>` and `<HorizontalMenu.Item>` children. Each child should have a `value` corresponding to the [application location](https://marmelab.com/ra-enterprise/modules/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.
+
+```jsx
+import { HorizontalMenu } from '@react-admin/ra-navigation';
+
+export const Menu = () => (
+    <HorizontalMenu>
+        <HorizontalMenu.Item label="Dashboard" to="/" value="" />
+        <HorizontalMenu.Item label="Songs" to="/songs" value="songs" />
+        <HorizontalMenu.Item label="Artists" to="/artists" value="artists" />
+    </HorizontalMenu>
+);
+```
+
+Then pass it to the `<ContainerLayout>`:
+
+```jsx
+import { Admin, Resource } from 'react-admin';
+import { ContainerLayout } from '@react-admin/ra-navigation';
+
+import { Menu } from './Menu';
+
+const MyLayout = props => <ContainerLayout {...props} menu={<Menu />} />;
+
+const App = () => (
+    <Admin dataProvider={dataProvider} layout={MyLayout}>
+        ...
+    </Admin>
+);
+```
+
+See more details in the [ra-navigation documentation](https://marmelab.com/ra-enterprise/modules/ra-navigation#containerlayout).

docs/Reference.md

@@ -30,6 +30,7 @@ title: "Reference"
 * [`<CloneButton>`](./CloneButton.md)
 * [`<CompleteCalendar>`](https://marmelab.com/ra-enterprise/modules/ra-calendar#completecalendar)<img class="icon" src="./img/premium.svg" />
 * [`<Confirm>`](./Confirm.md)
+* [`<ContainerLayout>`](./ContainerLayout.md)<img class="icon" src="./img/premium.svg" />
 * [`<Create>`](./Create.md)
 * `<CreateActions>`
 * [`<CreateButton>`](./Buttons.md#createbutton)
@@ -68,6 +69,7 @@ title: "Reference"
 * [`<FormDataConsumer>`](./Inputs.md#linking-two-inputs)
 * [`<FormTab>`](./TabbedForm.md)
 * [`<FunctionField>`](./FunctionField.md)
+* [`<HorizontalMenu>`](./HorizontalMenu.md)<img class="icon" src="./img/premium.svg" />
 * [`<IfCanAccess>`](./IfCanAccess.md)<img class="icon" src="./img/premium.svg" />
 * [`<ImageField>`](./ImageField.md)
 * [`<ImageInput>`](./ImageInput.md)
@@ -172,7 +174,7 @@ title: "Reference"
 * [`useGetIdentity`](./useGetIdentity.md)
 * [`useGetList`](./useGetList.md)
 * [`useGetMany`](./useGetMany.md)
-* [´useGetManyAggregate´](./useGetOne.md#aggregating-getone-calls)
+* [`useGetManyAggregate`](./useGetOne.md#aggregating-getone-calls)
 * [`useGetManyReference`](./useGetManyReference.md)
 * [`useGetOne`](./useGetOne.md)
 * [`useGetPermissions`](./WithPermissions.md)

docs/navigation.html

@@ -213,9 +213,11 @@
 
 <ul><div>Other UI components</div>
   <li {% if page.path == 'Layout.md' %} class="active" {% endif %}><a class="nav-link" href="./Layout.html"><code>&lt;Layout&gt;</code></a></li>
+  <li {% if page.path == 'ContainerLayout.md' %} class="active" {% endif %}><a class="nav-link" href="./ContainerLayout.html"><code>&lt;ContainerLayout&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
   <li {% if page.path == 'Menu.md' %} class="active" {% endif %}><a class="nav-link" href="./Menu.html"><code>&lt;Menu&gt;</code></a></li>
   <li {% if page.path == 'MultiLevelMenu.md' %} class="active" {% endif %}><a class="nav-link" href="./MultiLevelMenu.html"><code>&lt;MultiLevelMenu&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
   <li {% if page.path == 'IconMenu.md' %} class="active" {% endif %}><a class="nav-link" href="./IconMenu.html"><code>&lt;IconMenu&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
+  <li {% if page.path == 'HorizontalMenu.md' %} class="active" {% endif %}><a class="nav-link" href="./HorizontalMenu.html"><code>&lt;HorizontalMenu&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
   <li {% if page.path == 'Breadcrumb.md' %} class="active" {% endif %}><a class="nav-link" href="./Breadcrumb.html"><code>&lt;Breadcrumb&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
   <li {% if page.path == 'Search.md' %} class="active" {% endif %}><a class="nav-link" href="./Search.html"><code>&lt;Search&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
   <li {% if page.path == 'Buttons.md' %} class="active" {% endif %}><a class="nav-link" href="./Buttons.html">Buttons</a></li>