Search Menu

import { useCallback } from "react";

import "./AppMenu.scss";

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

  &__item-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__item {
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem;

    &:hover {
      background-color: lightgrey;
    }
  }
}

import { useState } from "react";
import {
  Channel,
  ChannelHeader,
  ChannelList,
  Chat,
  MessageInput,
  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 />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);