🐛 fix(bottom-navigation): Bottom navigation respects the iOS safe-area (

saadeghi#1354) * 🐛 fix(bottom-navigation): Bottom navigation respects the iOS safe-area * 💄 style: Restore syntax
inorganik · Nov 14, 2022 · 45e3df1 · 45e3df1
1 parent 3b9e746
commit 45e3df1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/components/unstyled/bottom-navigation.css b/src/components/unstyled/bottom-navigation.css
@@ -1,5 +1,6 @@
 .btm-nav {
   @apply flex flex-row items-center justify-around fixed bottom-0 left-0 right-0 w-full;
+  padding-bottom: env(safe-area-inset-bottom);
   &>* {
     @apply flex items-center justify-center flex-col basis-full h-full cursor-pointer relative gap-1;
   }

diff --git a/src/docs/src/routes/components/bottom-navigation.svelte.md b/src/docs/src/routes/components/bottom-navigation.svelte.md
@@ -23,6 +23,13 @@ data="{[
 ]}"
 />
 
+<div class="alert alert-info text-sm mb-2">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info-content flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    The &lt;meta name="viewport" content="viewport-fit=cover"&gt; is required for responsive of the bottom navigation in iOS.
+  </div>
+</div>
+
 <Component title="Bottom Navigation">
 <div class="btm-nav relative">
   <button>