From 456a44d0f24e5b16c904ab8706ca910ea6ea1024 Mon Sep 17 00:00:00 2001
From: erwanMarmelab <erwan@marmelab.com>
Date: Thu, 1 Feb 2024 11:36:42 +0100
Subject: [PATCH 1/2] duplicate doc

---
 docs/SolarLayout.md | 85 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/docs/SolarLayout.md b/docs/SolarLayout.md
index d3ca0b1268c..93c22a951ba 100644
--- a/docs/SolarLayout.md
+++ b/docs/SolarLayout.md
@@ -862,3 +862,88 @@ export const App = () => (
 | `className` | Optional | string      |              | A class name to apply to the AppBar container.                                                                                                                                                                                                |
 | `color`     | Optional | string      | 'secondary'  | The color of the AppBar. Can be primary, secondary, or inherit. Defaults to secondary.                                                                                                                                                        |
 | `container` | Optional | ElementType | HideOnScroll | The component used for the root node.                                                                                                                                                                                                         |
+## Use It With `<SearchWithResult>`
+
+The `<SearchWithResult>` component works perfectly when used inside the [`<SolarLayout>`](https://marmelab.com/ra-enterprise/modules/ra-navigation#solarlayout) menu.
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/ra-search-with-result-solar-layout-overview.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+The `useSolarSidebarActiveMenu` hook combined with the `onNavigate` prop allow you to close the `<SolarMenu>` when the user selects an element in the result.
+
+Here is an implementation example:
+
+{% raw %}
+```tsx
+import { Admin } from 'react-admin';
+import { Box } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import AlbumIcon from '@mui/icons-material/Album';
+import Groups3Icon from '@mui/icons-material/Groups3';
+import {
+    SolarLayout,
+    SolarLayoutProps,
+    SolarMenu,
+    useSolarSidebarActiveMenu,
+} from '@react-admin/ra-navigation';
+import { SearchWithResult } from '@react-admin/ra-search';
+import { searchDataProvider } from './searchDataProvider';
+
+const MySolarLayout = (props: SolarLayoutProps) => (
+    <SolarLayout {...props} menu={MySolarMenu} />
+);
+
+const MySolarMenu = () => (
+    <SolarMenu bottomToolbar={<CustomBottomToolbar />}>
+        <SolarMenu.Item
+            name="artists"
+            to="/artists"
+            icon={<Groups3Icon />}
+            label="resources.stores.name"
+        />
+        <SolarMenu.Item
+            name="songs"
+            to="/songs"
+            icon={<AlbumIcon />}
+            label="resources.events.name"
+        />
+    </SolarMenu>
+);
+
+const CustomBottomToolbar = () => (
+    <>
+        <SearchMenuItem />
+        <SolarMenu.LoadingIndicatorItem />
+    </>
+);
+
+const SearchMenuItem = () => {
+    const [, setActiveMenu] = useSolarSidebarActiveMenu();
+    const handleClose = () => {
+        setActiveMenu('');
+    };
+
+    return (
+        <SolarMenu.Item
+            icon={<SearchIcon />}
+            label="Search"
+            name="search"
+            subMenu={
+                <Box sx={{ maxWidth: 298 }}>
+                    <SearchWithResult onNavigate={handleClose} />
+                </Box>
+            }
+            data-testid="search-button"
+        />
+    );
+};
+
+export const App = () => (
+    <Admin dataProvider={searchDataProvider} layout={MySolarLayout}>
+        {/*...*/}
+    </Admin>
+);
+```
+{% endraw %}

From 695a027c14120d76b3a29e248a6e41d8d2ab271f Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 1 Feb 2024 12:27:28 +0100
Subject: [PATCH 2/2] Update docs/SolarLayout.md

---
 docs/SolarLayout.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/SolarLayout.md b/docs/SolarLayout.md
index 93c22a951ba..87be3b111bc 100644
--- a/docs/SolarLayout.md
+++ b/docs/SolarLayout.md
@@ -862,6 +862,7 @@ export const App = () => (
 | `className` | Optional | string      |              | A class name to apply to the AppBar container.                                                                                                                                                                                                |
 | `color`     | Optional | string      | 'secondary'  | The color of the AppBar. Can be primary, secondary, or inherit. Defaults to secondary.                                                                                                                                                        |
 | `container` | Optional | ElementType | HideOnScroll | The component used for the root node.                                                                                                                                                                                                         |
+
 ## Use It With `<SearchWithResult>`
 
 The `<SearchWithResult>` component works perfectly when used inside the [`<SolarLayout>`](https://marmelab.com/ra-enterprise/modules/ra-navigation#solarlayout) menu.