From bf68819b4aa07974ed678c81021c687d5c39fbfb Mon Sep 17 00:00:00 2001
From: mini2024 <mini2024@oo1.dev>
Date: Sun, 6 Apr 2025 19:18:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D=20FlowbiteSidebar=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20iPhone=20=E6=A8=AA=E5=B1=8F=E5=AE=89?=
 =?UTF-8?q?=E5=85=A8=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/FlowbiteSidebar.page.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/FlowbiteSidebar.page.vue b/src/pages/FlowbiteSidebar.page.vue
index 7b55103..47a6bef 100644
--- a/src/pages/FlowbiteSidebar.page.vue
+++ b/src/pages/FlowbiteSidebar.page.vue
@@ -2,7 +2,9 @@
 
 <template>
   <!-- https://flowbite.com/docs/components/sidebar/#sidebar-with-navbar -->
-  <nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <nav
+    class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]"
+  >
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
@@ -105,13 +107,13 @@
 
   <aside
     id="logo-sidebar"
-    class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+    class="fixed top-0 left-[env(safe-area-inset-left)] z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
     aria-label="Sidebar"
   >
     <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800" b="1px dashed red">Sidebar</div>
   </aside>
 
-  <div class="p-4 sm:ml-64">
+  <div class="p-4 sm:ml-[calc(16rem+env(safe-area-inset-left))] pr-[env(safe-area-inset-right)]">
     <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">CONTENT</div>
   </div>
 </template>