From 8d35d476e3e90fd8a6183ab105a9ffc79d76e121 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 15 Jun 2023 18:03:37 +0800
Subject: [PATCH] Fix nav menu overlapping tab bar

Also allow custom padding into safeBoundingBoxPadding function
---
 src/components/nav-menu.jsx                            | 10 +++++++++-
 ...ng-box-padding.jsx => safe-bounding-box-padding.js} |  8 ++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)
 rename src/utils/{safe-bounding-box-padding.jsx => safe-bounding-box-padding.js} (78%)

diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
index 7ac55fb8..116a8618 100644
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@@ -6,6 +6,7 @@ import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
 
 import { api } from '../utils/api';
+import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 import states from '../utils/states';
 import store from '../utils/store';
 
@@ -52,6 +53,13 @@ function NavMenu(props) {
   const buttonRef = useRef();
   const [menuState, setMenuState] = useState(undefined);
 
+  const boundingBoxPadding = safeBoundingBoxPadding([
+    0,
+    0,
+    snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0,
+    0,
+  ]);
+
   return (
     <>
       <button
@@ -104,7 +112,7 @@ function NavMenu(props) {
         viewScroll="close"
         position="anchor"
         align="center"
-        boundingBoxPadding="8 8 8 8"
+        boundingBoxPadding={boundingBoxPadding}
         unmountOnClose
       >
         <section>
diff --git a/src/utils/safe-bounding-box-padding.jsx b/src/utils/safe-bounding-box-padding.js
similarity index 78%
rename from src/utils/safe-bounding-box-padding.jsx
rename to src/utils/safe-bounding-box-padding.js
index b16b7468..e9372499 100644
--- a/src/utils/safe-bounding-box-padding.jsx
+++ b/src/utils/safe-bounding-box-padding.js
@@ -3,7 +3,8 @@ import mem from 'mem';
 const root = document.documentElement;
 const style = getComputedStyle(root);
 const defaultBoundingBoxPadding = 8;
-function _safeBoundingBoxPadding() {
+function _safeBoundingBoxPadding(paddings = []) {
+  // paddings = [top, right, bottom, left]
   // Get safe area inset variables from root
   const safeAreaInsetTop = style.getPropertyValue('--sai-top');
   const safeAreaInsetRight = style.getPropertyValue('--sai-right');
@@ -15,7 +16,10 @@ function _safeBoundingBoxPadding() {
     safeAreaInsetBottom,
     safeAreaInsetLeft,
   ]
-    .map((v) => parseInt(v, 10) || defaultBoundingBoxPadding)
+    .map(
+      (v, i) =>
+        (parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
+    )
     .join(' ');
   // console.log(str);
   return str;