fix pwa layout

src/@layouts/components/VerticalNavLayout.vue

@@ -71,10 +71,10 @@ export default defineComponent({
         {
           class: [
             "layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid",
-            "layout-navbar-sticky",
+            "layout-navbar-fixed",
             mdAndDown.value && "layout-overlay-nav",
             route.meta.layoutWrapperClasses,
-            scrollDistance.value > 20 && "window-scrolled",
+            scrollDistance.value && "window-scrolled",
           ],
         },
         [
@@ -107,12 +107,15 @@ export default defineComponent({
   }
 
   .layout-navbar {
-    position: sticky;
+    position: fixed;
+    width: 100vw;
     z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
     inset-block-start: 0;
 
     .navbar-content-container {
-      block-size: variables.$layout-vertical-nav-navbar-height;
+      block-size: calc(
+        env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height
+      );
     }
 
     @at-root {
@@ -130,8 +133,8 @@ export default defineComponent({
     }
   }
 
-  &.layout-navbar-sticky .layout-navbar {
-    @extend %layout-navbar-sticky;
+  &.layout-navbar-fixed .layout-navbar {
+    @extend %layout-navbar-fixed;
   }
 
   &.layout-navbar-hidden .layout-navbar {
@@ -202,7 +205,7 @@ export default defineComponent({
   width: calc(100% - 1rem);
   background-color: rgb(var(--v-theme-surface), 0.9);
   -webkit-backdrop-filter: blur(6px);
-    backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
   z-index: 1002;
   transition: padding 0.2s ease, background-color 0.18s ease;
 }

src/@layouts/styles/_default-layout.scss

@@ -14,12 +14,13 @@ body,
   min-height: 100%;
 }
 
-.layout-vertical-nav, .layout-navbar {
+.layout-vertical-nav {
   padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
-.layout-vertical-nav {
-  padding-bottom: env(safe-area-inset-bottom);
+.navbar-content-container {
+  padding-top: env(safe-area-inset-top);
 }
 
 .layout-page-content {
@@ -29,6 +30,7 @@ body,
 
   // TODO: Use grid gutter variable here
   padding-block: 0.5rem;
+  padding-top: calc(env(safe-area-inset-top) + 70px);
 }
 
 .layout-footer {

src/@layouts/styles/_placeholders.scss

@@ -17,8 +17,9 @@
 }
 
 // ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately
-%layout-navbar-sticky {
-  position: sticky;
+%layout-navbar-fixed {
+  position: fixed;
+  top: 0;
   inset-block-start: 0;
 
   // will-change: transform;