feat: add settings menu

src/routes/-/RootLayout/components/Navigation/Navigation.tsx

@@ -23,6 +23,7 @@ import rouletteIcon from "./assets/roulette.svg";
 import tasksIcon from "./assets/tasks.svg";
 import earningsIcon from "./assets/earnings.svg";
 import tg, { useTelegramViewportValue } from "@/tg";
+import { usePlaySound } from "@/audio";
 
 const ANIMATION_DURATION = 0.2;
 const SPRING_ANIMATION = {
@@ -34,7 +35,6 @@ const SPRING_ANIMATION = {
 
 const BAR_HEIGHT = 64;
 const ACTIVE_BAR_HEIGHT = 74;
-const OFFSCREEN_BAR_OFFSET = 20;
 
 const NAV_ITEMS = [
   { key: "nav.shop", route: ShopRoute, icon: shopIcon },
@@ -162,6 +162,7 @@ function MenuBar({ labelKey, icon, delay, active, onClick }: MenuBarProps) {
 }
 
 export default function Navigation() {
+  const play = usePlaySound();
   const matchRoute = useMatchRoute();
   const navigate = useNavigate();
   const [menuOpen, setMenuOpen] = useState<number>(0);
@@ -181,6 +182,7 @@ export default function Navigation() {
   }, [menuOpen, handleOutsideClick]);
 
   const navigateRoute = async (route: AnyRoute, wait = false) => {
+    play("click");
     tg.hapticFeedback.click();
     const redirection = navigate({ to: route.to });
     if (wait) {
@@ -220,6 +222,7 @@ export default function Navigation() {
               onClick={
                 item.isMenu
                   ? () => {
+                      play("click");
                       tg.hapticFeedback.click();
                       setMenuOpen((v) => (v ? 0 : Math.random()));
                     }