From 0fd0204869df2b2ab9ae0de346ec508418cab403 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 25 Jan 2025 19:42:16 +0100
Subject: [PATCH] fix: make sidebar content respects safe-area-inset-bottom
 (#251)

---
 .../src/app/reader/components/sidebar/Content.tsx           | 5 ++++-
 .../src/app/reader/components/sidebar/TabNavigation.tsx     | 6 +-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/sidebar/Content.tsx b/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
index dfe30a9e..c00d7f83 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
@@ -6,6 +6,7 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import TOCView from './TOCView';
 import BooknoteView from './BooknoteView';
 import TabNavigation from './TabNavigation';
+import { isPWA } from '@/services/environment';
 
 const SidebarContent: React.FC<{
   bookDoc: BookDoc;
@@ -90,7 +91,9 @@ const SidebarContent: React.FC<{
           )}
         </div>
       </div>
-      <div className='flex-shrink-0'>
+      <div
+        className={clsx('flex-shrink-0', isPWA() ? 'pb-[calc(env(safe-area-inset-bottom)/2)]' : '')}
+      >
         <TabNavigation activeTab={activeTab} onTabChange={handleTabChange} />
       </div>
     </>
diff --git a/apps/readest-app/src/app/reader/components/sidebar/TabNavigation.tsx b/apps/readest-app/src/app/reader/components/sidebar/TabNavigation.tsx
index f31bd665..841842b6 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/TabNavigation.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/TabNavigation.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { MdToc, MdEditNote, MdBookmarkBorder } from 'react-icons/md';
 
 import { useTranslation } from '@/hooks/useTranslation';
-import { isPWA } from '@/services/environment';
 
 const TabNavigation: React.FC<{
   activeTab: string;
@@ -15,10 +14,7 @@ const TabNavigation: React.FC<{
 
   return (
     <div
-      className={clsx(
-        'bottom-tab border-base-300/50 bg-base-200 relative flex w-full border-t',
-        isPWA() ? 'bottom-[calc(env(safe-area-inset-bottom)_/_2)]' : '',
-      )}
+      className={clsx('bottom-tab border-base-300/50 bg-base-200 relative flex w-full border-t')}
     >
       <div
         className={clsx(