import React, { useCallback } from "react";
import type { AppMenuProps } from "stream-chat-react";
import "./AppMenu.scss";
export const AppMenu = ({ close }: AppMenuProps) => {
const handleSelect = useCallback(() => {
// custom logic...
close?.();
}, [close]);
return (
<div className="app-menu__container">
<ul className="app-menu__item-list">
<li className="app-menu__item" onClick={handleSelect}>
Profile
</li>
<li className="app-menu__item" onClick={handleSelect}>
New Group
</li>
<li className="app-menu__item" onClick={handleSelect}>
Sign Out
</li>
</ul>
</div>
);
};
App Menu
As of the version 10.0.0, users can add app menu into the SearchBar
. In case you would like to display menu button next to the search input, you can do that by adding AppMenu
component to the ChannelSearch
props. The display of AppMenu
is then toggled by clicking on the menu button. AppMenu
can be rendered as a drop-down or even a modal. In our example we will render a drop-down menu.
The SDK does not provide any default AppMenu
component and so you will have to write your CSS for it to be styled correctly.
.str-chat__channel-search-bar-button.str-chat__channel-search-bar-button--menu {
position: relative;
}
.app-menu {
&__container {
position: absolute;
top: 50px;
left: 10px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
}
&__item-list {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
list-style: none;
margin: 0;
padding: 0.5rem 1rem;
&:hover {
background-color: lightgrey;
cursor: pointer;
}
}
}
import { AppMenu } from "./components/AppMenu";
const App = () => (
<Chat client={chatClient}>
<ChannelList additionalChannelSearchProps={{ AppMenu }} showChannelSearch />
<Channel>
<Window>
<ChannelHeader />
<MessageList />
<MessageInput />
</Window>
<Thread />
</Channel>
</Chat>
);