feat: add dividers to menu items

src/components/menu/divider/divider.module.css

@@ -0,0 +1,5 @@
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-neutral-200);
+}

src/components/menu/divider/divider.tsx

@@ -0,0 +1,5 @@
+import styles from './divider.module.css';
+
+export function Divider() {
+  return <div className={styles.divider} />;
+}

src/components/menu/divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from './divider';

src/components/menu/item/item.module.css

@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  height: 50px;
+  height: 40px;
   padding: 0 12px;
   font-size: var(--font-sm);
   font-weight: 500;
@@ -14,7 +14,7 @@
   text-decoration: none;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid transparent;
   border-radius: 4px;
   outline: none;
   transition: 0.2s;
@@ -27,6 +27,7 @@
   &:not(:disabled):hover {
     color: var(--color-foreground);
     background-color: var(--color-neutral-200);
+    border: 1px solid var(--color-neutral-300);
   }
 
   & .icon {

src/components/menu/menu.module.css

@@ -2,7 +2,7 @@
   position: fixed;
   right: 20px;
   bottom: 20px;
-  z-index: 5;
+  z-index: 15;
 
   & .menuButton {
     display: flex;

src/components/menu/menu.tsx

@@ -15,6 +15,7 @@ import {
 } from '@floating-ui/react';
 
 import { ShuffleItem, ShareItem, DonateItem, NotepadItem } from './items';
+import { Divider } from './divider';
 import { ShareLinkModal } from '@/components/modals/share-link';
 import { Notepad } from '@/components/toolbox';
 
@@ -78,7 +79,9 @@ export function Menu() {
                 >
                   <ShareItem open={() => setShowShareLink(true)} />
                   <ShuffleItem />
+                  <Divider />
                   <NotepadItem open={() => setShowNotepad(true)} />
+                  <Divider />
                   <DonateItem />
                 </motion.div>
               </div>