feat(web): adds floating & reversed navbar

Author: dvcol

src/components/AppComponent.vue

@@ -11,19 +11,26 @@ import CheckinComponent from '~/components/views/checkin/CheckinComponent.vue';
 import PanelContent from '~/components/views/panel/PanelContent.vue';
 import { NavbarService } from '~/services/navbar.service';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
+import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 
 const { isAuthenticated } = useAuthSettingsStoreRefs();
 const { currentRoute, push, back } = useRouter();
 
-const { footerOpen, panelOpen, panelDirty } = useAppStateStoreRefs();
+const {
+  appRef,
+  mainRef,
+  footerRef,
+  footerOpen,
+  panelOpen,
+  panelDirty,
+  floating,
+  reverse,
+} = useAppStateStoreRefs();
+const { isWatching } = useWatchingStoreRefs();
 
 const base = ref();
 
-const appRef = ref<HTMLDivElement>();
-const mainRef = ref<HTMLDivElement>();
-const footerRef = ref<HTMLDivElement>();
-
 watch(
   currentRoute,
   (_next, _prev) => {
@@ -62,11 +69,20 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="appRef" class="app-container">
+  <div
+    ref="appRef"
+    class="app-container"
+    :class="{ reverse, floating, watching: isWatching }"
+  >
     <NDialogProvider :to="appRef">
       <header :class="{ open: panelOpen }">
         <RouterView v-slot="{ Component }" name="navbar">
-          <NavbarComponent v-if="isAuthenticated" :disabled="panelOpen">
+          <NavbarComponent
+            v-if="isAuthenticated"
+            :disabled="panelOpen"
+            :reverse="reverse"
+            :floating="floating"
+          >
             <template v-if="Component" #drawer="{ parentElement }">
               <Transition name="scale" mode="out-in">
                 <KeepAlive>
@@ -99,7 +115,7 @@ onBeforeUnmount(() => {
               v-model:show="panelOpen"
               :to="mainRef"
               width="100%"
-              class="panel"
+              class="root-panel-wrapper"
               close-on-esc
               auto-focus
               :on-after-leave="onAfterLeave"
@@ -137,17 +153,26 @@ onBeforeUnmount(() => {
 @include transition.scale;
 
 .app-container {
+  --max-header-width: 800px;
+
   overflow: hidden;
 
   header {
     position: absolute;
     top: 0;
+    bottom: auto;
+    left: 0;
     z-index: layers.$layer-ui;
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
     min-height: layout.$header-navbar-height;
+    transition:
+      bottom 0.4s var(--n-bezier),
+      top 0.5s var(--n-bezier),
+      left 0.5s var(--n-bezier),
+      width 0.5s var(--n-bezier);
 
     > :first-child {
       @include mixin.hover-background;
@@ -167,10 +192,13 @@ onBeforeUnmount(() => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: layout.$main-content-height;
+    min-height: layout.$safe-content-height;
     margin-top: layout.$safe-navbar-height;
     padding-right: calc(#{layout.$safe-area-inset-right} / 1.5);
     padding-left: calc(#{layout.$safe-area-inset-left} / 1.5);
+    transition:
+      min-height 0.5s var(--n-bezier),
+      margin-top 0.5s var(--n-bezier);
 
     &.full-height {
       min-height: var(--full-height);
@@ -189,11 +217,55 @@ onBeforeUnmount(() => {
     width: 100%;
   }
 
-  .panel {
-    position: relative;
-    max-height: calc(100% - #{layout.$safe-navbar-height});
-    overflow: auto;
-    overscroll-behavior: none;
+  :deep(.root-panel-wrapper.n-drawer) {
+    transition: all 0.3s var(--n-bezier);
+  }
+
+  &.watching {
+    :deep(.root-panel-wrapper.n-drawer) {
+      padding-bottom: layout.$safe-watching-height;
+    }
+  }
+
+  &.reverse {
+    header {
+      top: auto;
+      bottom: 0;
+      flex-direction: column-reverse;
+    }
+
+    main {
+      min-height: layout.$bottom-content-height;
+      margin-top: layout.$safe-area-inset-top;
+    }
+
+    footer {
+      top: 0;
+      bottom: auto;
+    }
+
+    &.watching {
+      :deep(.root-panel-wrapper.n-drawer) {
+        padding-top: layout.$top-safe-watching-height;
+      }
+    }
+  }
+
+  &.floating {
+    header {
+      top: 1rem;
+      left: calc(50% - var(--max-header-width) / 2);
+      width: var(--max-header-width);
+    }
+
+    main {
+      min-height: layout.$floating-content-height;
+      margin-top: layout.$safe-area-inset-top;
+    }
+
+    :deep(.root-panel-wrapper.n-drawer) {
+      margin-top: layout.$floating-navbar-height;
+    }
   }
 }
 </style>

src/components/common/buttons/FloatingButton.vue

@@ -4,6 +4,8 @@ import { NFlex, NFloatButton, NIcon } from 'naive-ui';
 import type { Component, PropType, Transition } from 'vue';
 
 import IconChevronUp from '~/components/icons/IconChevronUp.vue';
+import { NavbarService } from '~/services/navbar.service';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 
 defineProps({
@@ -23,6 +25,8 @@ defineProps({
 });
 
 const { isWatching } = useWatchingStoreRefs();
+const { reverse } = useAppStateStoreRefs();
+const { open } = NavbarService;
 
 const emit = defineEmits<{
   (e: 'onClick'): void;
@@ -34,7 +38,7 @@ const emit = defineEmits<{
     <NFloatButton
       v-if="show"
       class="button"
-      :class="{ watching: isWatching }"
+      :class="{ watching: isWatching, reverse, open }"
       width="fit-content"
       @click="emit('onClick')"
     >
@@ -68,10 +72,26 @@ const emit = defineEmits<{
   flex-direction: row;
   padding: 0.5rem;
 
-  &.watching {
+  &.watching:not(.reverse) {
     bottom: calc(2.5rem + #{layout.$safe-area-inset-bottom / 1.5});
   }
 
+  &.reverse {
+    $navbar-offset: calc(
+      #{layout.$header-navbar-height} + #{layout.$safe-area-inset-bottom / 1.5}
+    );
+
+    bottom: calc(0.5rem + #{$navbar-offset});
+    transition-delay: 0.5s;
+
+    &.open {
+      $navbar-open-offset: calc(#{layout.$header-drawer-height} + #{$navbar-offset});
+
+      bottom: calc(0.5rem + #{$navbar-open-offset});
+      transition-delay: 0s;
+    }
+  }
+
   .text {
     display: inline-flex;
     width: 0;

src/components/common/list/ListScroll.vue

@@ -16,6 +16,9 @@ import {
   type VirtualListProps,
   type VirtualListRef,
 } from '~/models/list-scroll.model';
+import { useAppStateStoreRefs } from '~/stores/app-state.store';
+import { useWatchingStoreRefs } from '~/stores/data/watching.store';
+import { Watching } from '~/styles/layout.style';
 import { watchMedia } from '~/utils/window.utils';
 
 const listRef = ref<VirtualListRef>();
@@ -139,6 +142,9 @@ const {
   scrollBoundary,
 } = toRefs(props);
 
+const { floating, reverse } = useAppStateStoreRefs();
+const { isWatching } = useWatchingStoreRefs();
+
 const scrolled = ref(false);
 
 const isCompact = watchMedia('(max-width: 600px)');
@@ -198,10 +204,19 @@ const topInset = computed(() => {
   if (!inset) return 0;
   return parseInt(inset, 10);
 });
-const listPaddingTop = computed(
-  () => topInset.value + (listOptions?.value?.paddingTop ?? 60),
-);
-const listPaddingBottom = computed(() => listOptions?.value?.paddingBottom ?? 8);
+const listPaddingTop = computed(() => {
+  const offset = topInset.value;
+  if (listOptions?.value?.paddingTop) return offset + listOptions.value.paddingTop;
+  if (floating.value) return offset + 10;
+  if (reverse.value)
+    return isWatching.value ? offset + 16 + Watching.Height : offset + 16;
+  return offset + 60;
+});
+const listPaddingBottom = computed(() => {
+  if (listOptions?.value?.paddingBottom) return listOptions.value.paddingBottom;
+  if (reverse.value) return 8 + 16;
+  return 8;
+});
 </script>
 
 <template>
@@ -210,7 +225,10 @@ const listPaddingBottom = computed(() => listOptions?.value?.paddingBottom ?? 8)
       v-if="!isEmpty"
       ref="listRef"
       class="list-scroll"
-      :style="{ '--overscroll-behavior': overscroll }"
+      :class="{ floating, reverse }"
+      :style="{
+        '--overscroll-behavior': overscroll,
+      }"
       :data-length="items.length"
       :data-page-size="pageSize"
       :item-size="listItemSize"
@@ -314,6 +332,12 @@ const listPaddingBottom = computed(() => listOptions?.value?.paddingBottom ?? 8)
 .list-scroll {
   height: var(--full-height);
   margin-top: calc(0% - #{layout.$safe-navbar-height});
+  transition: margin-top 0.5s var(--n-bezier);
+
+  &.floating,
+  &.reverse {
+    margin-top: calc(0% - #{layout.$safe-area-inset-top});
+  }
 
   .all-loaded,
   .load-more {
@@ -325,5 +349,9 @@ const listPaddingBottom = computed(() => listOptions?.value?.paddingBottom ?? 8)
   :deep(.v-vl) {
     overscroll-behavior: var(--overscroll-behavior, auto);
   }
+
+  :deep(.v-vl-items) {
+    transition: padding 0.5s var(--n-bezier);
+  }
 }
 </style>

src/components/common/navbar/NavbarComponent.vue

@@ -23,9 +23,19 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  reverse: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  floating: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
-const { disabled } = toRefs(props);
+const { disabled, reverse } = toRefs(props);
 
 const i18n = useI18n('route');
 const route = useRoute();
@@ -116,10 +126,10 @@ const isDrawerNotScrollable = (
 const handleSwipeDirection = (swipe: SwipeDirections) => {
   switch (swipe) {
     case SwipeDirection.Down:
-      isHover.value = true;
+      isHover.value = !reverse.value;
       break;
     case SwipeDirection.Up:
-      isHover.value = false;
+      isHover.value = reverse.value;
       break;
     case SwipeDirection.Left:
       if (nextRoute.value && isDrawerNotScrollable(swipe)) navigate(nextRoute.value);
@@ -157,6 +167,7 @@ const onTouchEnd = (e: TouchEvent) => {
 <template>
   <nav
     ref="navElement"
+    :class="{ reverse, floating }"
     @mouseenter="isHover = true"
     @mouseleave="isHover = false"
     @focusin="isFocus = true"
@@ -228,9 +239,25 @@ nav {
   --navbar-text-color-hover-active: var(--white);
   --navbar-text-color-active: var(--white);
 
+  display: flex;
+  flex-direction: column;
   padding: env(safe-area-inset-top) 0.25rem 0;
+  overflow-x: unset;
   font-size: 12px;
   text-align: center;
+  transition:
+    border-radius 0.25s var(--n-bezier),
+    padding 0.25s var(--n-bezier);
+
+  &.reverse {
+    flex-direction: column-reverse;
+    padding: 0 0.25rem env(safe-area-inset-bottom);
+  }
+
+  &.floating {
+    padding: 0 0.25rem;
+    border-radius: 1rem;
+  }
 
   .drawer {
     @include layout.navbar-transition;
@@ -260,7 +287,7 @@ nav {
     :deep(.tab) {
       --n-font-weight-strong: normal;
 
-      padding: 0 0.25rem;
+      padding: 0 0.75rem;
     }
   }
 }