From 758f2f48dc6a4e520b7a1e937f96eed28c8e8c20 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sat, 24 Feb 2024 20:22:36 +0330
Subject: [PATCH] feat: add scroll for lower heights

---
 .../menu/divider/divider.module.css           |  1 +
 src/components/menu/item/item.module.css      |  1 +
 src/components/menu/menu.module.css           | 23 +------
 src/components/menu/menu.tsx                  | 65 +++++++++----------
 4 files changed, 36 insertions(+), 54 deletions(-)

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 ? <IoClose /> : <IoMenu />}
         </button>
 
-        <AnimatePresence>
-          {isOpen && (
-            <FloatingFocusManager context={context} modal={false}>
-              <div
-                ref={refs.setFloating}
-                style={floatingStyles}
-                {...getFloatingProps()}
-              >
-                <motion.div
-                  animate="show"
-                  className={styles.menu}
-                  exit="hidden"
-                  initial="hidden"
-                  variants={variants}
-                >
-                  <ShareItem open={() => setShowShareLink(true)} />
-                  <ShuffleItem />
-                  <Divider />
-                  <NotepadItem open={() => setShowNotepad(true)} />
-                  <Divider />
-                  <DonateItem />
-                  <SourceItem />
-                </motion.div>
-              </div>
-            </FloatingFocusManager>
-          )}
-        </AnimatePresence>
+        {isOpen && (
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
+              className={styles.menu}
+            >
+              <ShareItem open={() => setShowShareLink(true)} />
+              <ShuffleItem />
+              <Divider />
+              <NotepadItem open={() => setShowNotepad(true)} />
+              <Divider />
+              <DonateItem />
+              <SourceItem />
+            </div>
+          </FloatingFocusManager>
+        )}
       </div>
 
       <ShareLinkModal