Step 1: Create ActionSheet Component

In the app directory of your Next.js app, create a component called ActionSheet. This component will contain the ellipsis icon, handle the click event, and show or hide the action sheet.

app/components/ActionSheet.js

"use client";
import { useState, useEffect } from "react";

export default function ActionSheet() {
  const [showActionSheet, setShowActionSheet] = useState(false);

  const toggleActionSheet = () => {
    setShowActionSheet(!showActionSheet);
  };

  const closeActionSheet = (e) => {
    if (showActionSheet && e.target.closest('.action-sheet') === null) {
      setShowActionSheet(false);
    }
  };

  useEffect(() => {
    if (showActionSheet) {
      document.addEventListener("click", closeActionSheet);
    } else {
      document.removeEventListener("click", closeActionSheet);
    }
    return () => {
      document.removeEventListener("click", closeActionSheet);
    };
  }, [showActionSheet]);

  return (
    <div className="ellipsis-container">
      <button className="ellipsis-icon" onClick={toggleActionSheet}>
        &#x22EE;
      </button>
      {showActionSheet && (
        <div className="action-sheet">
          <ul>
            <li>Action 1</li>
            <li>Action 2</li>
            <li>Action 3</li>
          </ul>
        </div>
      )}
    </div>
  );
}

Step 2: Add the CSS for the Ellipsis Icon and Action Sheet

Now, add some CSS to style the ellipsis icon, the scrollable div, and the action sheet. Create a CSS file under app/styles/global.css or in the same folder as the component and import it into your Next.js app. app/styles/global.css

/* Scrollable container */
.scrollable-container {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
}

/* Ellipsis Icon */
.ellipsis-container {
  position: relative;
}

.ellipsis-icon {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Action Sheet */
.action-sheet {
  position: absolute;
  top: 30px;
  right: 0;
  width: 150px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.action-sheet ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.action-sheet li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.action-sheet li:hover {
  background-color: #f0f0f0;
}

.action-sheet li:last-child {
  border-bottom: none;
}