feat: add menu button

src/components/app/app.tsx

@@ -9,7 +9,8 @@ import { StoreConsumer } from '@/components/store-consumer';
 import { Buttons } from '@/components/buttons';
 import { Categories } from '@/components/categories';
 import { ScrollToTop } from '@/components/scroll-to-top';
-import { Shuffle } from '@/components/shuffle';
+// import { Shuffle } from '@/components/shuffle';
+import { Menu } from '@/components/menu/menu';
 import { SnackbarProvider } from '@/contexts/snackbar';
 
 import { sounds } from '@/data/sounds';
@@ -60,7 +61,8 @@ export function App() {
         </Container>
 
         <ScrollToTop />
-        <Shuffle />
+        <Menu />
+        {/* <Shuffle /> */}
       </StoreConsumer>
     </SnackbarProvider>
   );

src/components/menu/index.ts

@@ -0,0 +1 @@
+export { Menu } from './menu';

src/components/menu/menu.module.css

@@ -0,0 +1,57 @@
+.wrapper {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 5;
+
+  & .menuButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 45px;
+    height: 45px;
+    font-size: var(--font-md);
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: var(--color-neutral-100);
+    border: 1px solid var(--color-neutral-300);
+    border-radius: 50%;
+    transition: 0.2s;
+
+    &:hover {
+      background-color: var(--color-neutral-200);
+    }
+  }
+
+  & .menu {
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 12px);
+    width: 200px;
+    padding: 4px;
+    background-color: var(--color-neutral-100);
+    border: 1px solid var(--color-neutral-200);
+    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);
+      }
+    }
+  }
+}

src/components/menu/menu.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { IoMenu, IoClose } from 'react-icons/io5/index';
+
+import { Tooltip } from '@/components/tooltip';
+import { useSoundStore } from '@/store';
+
+import styles from './menu.module.css';
+
+export function Menu() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const shuffle = useSoundStore(state => state.shuffle);
+
+  return (
+    <div className={styles.wrapper}>
+      <Tooltip content="Menu" hideDelay={0} showDelay={0}>
+        <button
+          className={styles.menuButton}
+          onClick={() => setIsOpen(prev => !prev)}
+        >
+          {isOpen ? <IoClose /> : <IoMenu />}
+        </button>
+      </Tooltip>
+
+      {isOpen && (
+        <div className={styles.menu}>
+          <button className={styles.menuItem} onClick={shuffle}>
+            Shuffle Sounds
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}