diff --git a/src/components/menu/divider/divider.module.css b/src/components/menu/divider/divider.module.css
index 9139b3a..3845db9 100644
--- a/src/components/menu/divider/divider.module.css
+++ b/src/components/menu/divider/divider.module.css
@@ -1,5 +1,6 @@
.divider {
width: 100%;
height: 1px;
+ min-height: 1px;
background-color: var(--color-neutral-200);
}
diff --git a/src/components/menu/item/item.module.css b/src/components/menu/item/item.module.css
index 1d28bc3..d8479e7 100644
--- a/src/components/menu/item/item.module.css
+++ b/src/components/menu/item/item.module.css
@@ -5,6 +5,7 @@
justify-content: flex-start;
width: 100%;
height: 40px;
+ min-height: 40px;
padding: 0 12px;
font-size: var(--font-sm);
line-height: 1;
diff --git a/src/components/menu/menu.module.css b/src/components/menu/menu.module.css
index af985f1..99b54eb 100644
--- a/src/components/menu/menu.module.css
+++ b/src/components/menu/menu.module.css
@@ -28,30 +28,11 @@
flex-direction: column;
row-gap: 4px;
width: 240px;
+ height: max-content;
padding: 4px;
+ overflow: auto;
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300);
border-radius: 4px;
-
- & .menuItem {
- position: flex;
- align-items: center;
- width: 100%;
- padding: 12px 8px;
- font-size: var(--font-sm);
- font-weight: 500;
- color: var(--color-foreground-subtle);
- cursor: pointer;
- background-color: transparent;
- border: 1px solid var(--color-neutral-200);
- border-radius: 4px;
- outline: none;
- transition: 0.2s;
-
- &:hover {
- color: var(--color-foreground);
- background-color: var(--color-neutral-200);
- }
- }
}
}
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index ab2cf89..1329a45 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -1,12 +1,12 @@
import { useState } from 'react';
import { IoMenu, IoClose } from 'react-icons/io5/index';
-import { AnimatePresence, motion } from 'framer-motion';
import {
useFloating,
autoUpdate,
offset,
flip,
shift,
+ size,
useClick,
useDismiss,
useRole,
@@ -25,8 +25,6 @@ import { Divider } from './divider';
import { ShareLinkModal } from '@/components/modals/share-link';
import { Notepad } from '@/components/toolbox';
-import { slideY, fade, mix } from '@/lib/motion';
-
import styles from './menu.module.css';
export function Menu() {
@@ -35,10 +33,20 @@ export function Menu() {
const [showShareLink, setShowShareLink] = useState(false);
const [showNotepad, setShowNotepad] = useState(false);
- const variants = mix(slideY(-20), fade());
-
const { context, floatingStyles, refs } = useFloating({
- middleware: [offset(12), flip(), shift()],
+ middleware: [
+ offset(12),
+ flip(),
+ shift(),
+ size({
+ apply({ availableHeight, elements }) {
+ Object.assign(elements.floating.style, {
+ maxHeight: `${availableHeight}px`,
+ });
+ },
+ padding: 10,
+ }),
+ ],
onOpenChange: setIsOpen,
open: isOpen,
placement: 'top-end',
@@ -68,33 +76,24 @@ export function Menu() {
{isOpen ? : }
-
- {isOpen && (
-
-
-
- setShowShareLink(true)} />
-
-
- setShowNotepad(true)} />
-
-
-
-
-
-
- )}
-
+ {isOpen && (
+
+
+
setShowShareLink(true)} />
+
+
+ setShowNotepad(true)} />
+
+
+
+
+
+ )}