Creating a mobile menu at the bottom of the app

2026-09-14 19:19:09 +03:30
parent f176fde1eb
commit 76acf8d1d3
7 changed files with 487 additions and 89 deletions
@@ -75,17 +75,22 @@ let dragOffsetX = 0;
 let dragOffsetY = 0;

 function defaultPos(): FabPos {
+  const bottomGap = viewport.value.w <= 900 ? FAB_MARGIN + 64 : FAB_MARGIN;
  return {
    left: FAB_MARGIN,
-    top: Math.max(FAB_MARGIN, viewport.value.h - FAB_MARGIN - FAB_SIZE),
+    top: Math.max(FAB_MARGIN, viewport.value.h - bottomGap - FAB_SIZE),
  };
 }

 function clampPos(pos: FabPos): FabPos {
  const margin = 8;
+  const bottomGap = viewport.value.w <= 900 ? 64 : 0;
  return {
    left: Math.min(Math.max(margin, pos.left), viewport.value.w - FAB_SIZE - margin),
-    top: Math.min(Math.max(margin, pos.top), viewport.value.h - FAB_SIZE - margin),
+    top: Math.min(
+      Math.max(margin, pos.top),
+      viewport.value.h - FAB_SIZE - margin - bottomGap,
+    ),
  };
 }

@@ -262,7 +262,7 @@ onUnmounted(() => {
    width: 100%;
    max-height: min(86dvh, calc(100dvh - 3.5rem));
    overflow: auto;
-    padding: 0.85rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
+    padding: 0.85rem 0.9rem 0.9rem;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.16);
  }