fix(mobile): fix bottom navbar

Author: dvcol

src/components/AppComponent.vue

@@ -224,13 +224,14 @@ const onBack = () => {
   &.reverse {
     header {
       top: auto;
-      bottom: 0;
+      bottom: calc(0% - #{layout.$safe-area-inset-bottom});
       flex-direction: column-reverse;
     }
 
     main {
       min-height: layout.$bottom-content-height;
-      margin-top: layout.$safe-area-inset-top;
+      margin-top: 0;
+      margin-bottom: layout.$safe-navbar-height;
     }
 
     footer {

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -134,7 +134,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
 const { dropdown } = NavbarService;
 const { floating, reverse } = useAppStateStoreRefs();
 const placement = computed(() => {
-  if (reverse.value) return 'top-end';
+  if (reverse.value) return 'top';
   if (floating.value) return 'bottom';
   return 'bottom-start';
 });
@@ -187,14 +187,16 @@ const placement = computed(() => {
   min-width: max(calc(100vw / var(--tab-count)), 8rem);
   max-width: 20rem;
   margin-top: 0.75rem;
+  margin-right: -0.25rem;
   text-align: left;
 
   &.floating {
     min-width: max(calc(var(--max-header-width) / var(--tab-count)), 8rem);
+    margin-right: 0;
   }
 
   &.reverse {
-    margin-right: -1rem;
+    margin-right: -0.5rem;
   }
 }
 </style>

src/components/container/ContainerComponent.ce.vue

@@ -148,25 +148,29 @@ onBeforeMount(() => addCustomProgressProperty());
     layout.$navbar-transition-delay-visible}
   );
 
-  &:not(.reverse) {
-    top: layout.$safe-navbar-height;
+  top: layout.$safe-navbar-height;
 
-    &.drawer-visible {
-      top: layout.$header-open-drawer-height;
-    }
+  &.drawer-visible {
+    top: layout.$header-open-drawer-height;
+  }
 
-    &.floating {
-      top: layout.$floating-navbar-height;
+  &.floating {
+    top: layout.$floating-navbar-height;
 
-      &.drawer-visible {
-        top: layout.$floating-open-drawer-height;
-      }
+    &.drawer-visible {
+      top: layout.$floating-open-drawer-height;
     }
+  }
 
+  &:not(.reverse, .floating) {
     &.dropdown-visible {
       right: max(calc(100vw / var(--tab-count)), 8rem);
     }
   }
+
+  &.reverse {
+    top: 0.5rem;
+  }
 }
 
 .message-container.n-message-container.n-message-container {
@@ -179,21 +183,25 @@ onBeforeMount(() => addCustomProgressProperty());
     layout.$navbar-transition-delay-visible}
   );
 
-  &:not(.reverse) {
-    top: calc(#{layout.$safe-navbar-height} + 12px);
+  top: calc(#{layout.$safe-navbar-height} + 12px);
 
-    &.drawer-visible {
-      top: calc(#{layout.$header-open-drawer-height} + 12px);
-    }
+  &.drawer-visible {
+    top: calc(#{layout.$header-open-drawer-height} + 12px);
+  }
 
-    &.floating {
-      top: calc(#{layout.$floating-navbar-height} + 12px);
+  &.floating {
+    top: calc(#{layout.$floating-navbar-height} + 12px);
 
-      &.drawer-visible {
-        top: calc(#{layout.$floating-open-drawer-height} + 12px);
-      }
+    &.drawer-visible {
+      top: calc(#{layout.$floating-open-drawer-height} + 12px);
     }
+  }
+
+  &.reverse {
+    top: 0.5rem;
+  }
 
+  &:not(.reverse, .floating) {
     &.dropdown-visible {
       right: max(calc(100vw / var(--tab-count)), 8rem);
     }

src/components/views/settings/SettingsComponent.vue

@@ -103,7 +103,7 @@ const onLeave = (section: Section) => {
 
 const isCompact = watchMedia('(max-width: 600px)');
 
-const { floating } = useAppStateStoreRefs();
+const { floating, reverse } = useAppStateStoreRefs();
 
 onDeactivated(() => {
   target.value = undefined;
@@ -112,7 +112,7 @@ onDeactivated(() => {
 </script>
 
 <template>
-  <NLayout class="container" :class="{ floating }" has-sider>
+  <NLayout class="container" :class="{ floating, reverse }" has-sider>
     <NLayoutSider
       class="menu"
       bordered
@@ -226,6 +226,22 @@ onDeactivated(() => {
     margin-top: layout.$safe-navbar-height;
   }
 
+  &.reverse {
+    margin-top: 0;
+
+    .menu {
+      margin-top: 0;
+    }
+
+    .content {
+      margin-bottom: layout.$header-navbar-height;
+
+      .card:first-child {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+
   &.floating {
     margin-top: calc(0% - #{layout.$safe-area-inset-top});
 

src/styles/layout.scss

@@ -19,9 +19,7 @@ $floating-open-drawer-height: calc(#{$floating-navbar-height} + #{$header-drawer
 $floating-content-height: $safe-full-height;
 
 // Bottom Navbar
-$bottom-safe-navbar-height: calc(#{$header-navbar-height} + #{$safe-area-inset-bottom});
-$bottom-open-drawer-height: calc(#{$bottom-safe-navbar-height} + #{$header-drawer-height});
-$bottom-content-height: $safe-full-height;
+$bottom-content-height: calc(var(--full-height) - #{$header-navbar-height});
 
 // Watching
 $watching-height: 1.75rem;