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.

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>
  );
};

.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>
);

Emoji Picker

Channel Header