Search Menu

import { useCallback } from "react";

import "./AppMenu.css";

export const AppMenu = ({ close }) => {
  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>
  );
};

.search-bar-with-menu {
  position: relative;
}

.search-bar-with-menu__button {
  left: 0.75rem;
  position: absolute;
  top: 0.75rem;
  z-index: 2;
}

.search-bar-with-menu .str-chat__search-bar {
  padding-left: 3rem;
}

.app-menu__container {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
  left: 0.75rem;
  position: absolute;
  top: 3.25rem;
  z-index: 3;
}

.app-menu__item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-menu__item {
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0.5rem 1rem;
}

.app-menu__item:hover {
  background-color: lightgrey;
}

import { useState } from "react";
import {
  Channel,
  ChannelHeader,
  ChannelList,
  Chat,
  MessageComposer,
  MessageList,
  SearchBar as DefaultSearchBar,
  Thread,
  Window,
  WithComponents,
} from "stream-chat-react";

import { AppMenu } from "./components/AppMenu";

const SearchBarWithMenu = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <div className="search-bar-with-menu">
      <button
        className="search-bar-with-menu__button"
        onClick={() => setMenuOpen((open) => !open)}
        type="button"
      >
        Menu
      </button>
      {menuOpen ? <AppMenu close={() => setMenuOpen(false)} /> : null}
      <DefaultSearchBar />
    </div>
  );
};

const App = () => (
  <Chat client={chatClient}>
    <WithComponents overrides={{ SearchBar: SearchBarWithMenu }}>
      <ChannelList
        filters={filters}
        options={options}
        showChannelSearch
        sort={sort}
      />
    </WithComponents>
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageComposer />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);