Use safe insets on bottom of screen (#755)

modrinth · Nov 20, 2022 · 9849bc0 · 9849bc0
1 parent 1cf75a7
commit 9849bc0
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -867,6 +867,7 @@ export default {
       width: 100%;
       transition: height 0.25s ease-in-out;
       height: var(--size-mobile-navbar-height);
+      padding-bottom: env(safe-area-inset-bottom);
       position: fixed;
       left: 0;
       bottom: 0;
@@ -977,6 +978,21 @@ export default {
 
       &.expanded {
         height: var(--size-mobile-navbar-height-expanded);
+
+        &::after {
+          top: var(--size-mobile-navbar-height-expanded);
+        }
+      }
+
+      &::after {
+        content: '';
+        background: var(--color-raised-bg);
+        width: 100%;
+        height: 50px;
+        position: absolute;
+        top: var(--size-mobile-navbar-height);
+        left: 0;
+        transition: top 0.25s ease-in-out;
       }
     }
   }