feat(ui): transparent status bar

elk-zone · Dec 30, 2022 · 4da2fd0 · 4da2fd0
1 parent b64d1ad
commit 4da2fd0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
@@ -8,10 +8,11 @@ defineProps<{
 </script>
 
 <template>
-  <div relative>
+  <div>
     <div
-      sticky top-0 z10
-      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]" backdrop-blur
+      sticky top-0 z10 backdrop-blur
+      pt="[env(safe-area-inset-top,0)]"
+      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>

diff --git a/composables/setups.ts b/composables/setups.ts
@@ -44,5 +44,8 @@ export function setupPageHeader() {
     },
     titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
     link,
+    meta: [
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+    ],
   })
 }