From c6f65877b33f371c54c571aaea4155394b7debf2 Mon Sep 17 00:00:00 2001
From: John Leider <9064066+johnleider@users.noreply.github.com>
Date: Wed, 10 Apr 2024 14:01:04 -0500
Subject: [PATCH] feat(VAppBar): add support for fully-hide scroll-behavior
 (#19557)

resolves #18020
---
 .../src/components/VAppBar/VAppBar.tsx        | 19 +++++++++++++++----
 packages/vuetify/src/composables/layout.ts    |  2 +-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
index 1fe67bdfa5e..ec2b9b35708 100644
--- a/packages/vuetify/src/components/VAppBar/VAppBar.tsx
+++ b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -57,7 +57,7 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
       const behavior = new Set(props.scrollBehavior?.split(' ') ?? [])
       return {
         hide: behavior.has('hide'),
-        // fullyHide: behavior.has('fully-hide'),
+        fullyHide: behavior.has('fully-hide'),
         inverted: behavior.has('inverted'),
         collapse: behavior.has('collapse'),
         elevate: behavior.has('elevate'),
@@ -69,7 +69,7 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
       const behavior = scrollBehavior.value
       return (
         behavior.hide ||
-        // behavior.fullyHide ||
+        behavior.fullyHide ||
         behavior.inverted ||
         behavior.collapse ||
         behavior.elevate ||
@@ -85,11 +85,18 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
       scrollRatio,
     } = useScroll(props, { canScroll })
 
+    const canHide = computed(() => (
+      scrollBehavior.value.hide ||
+      scrollBehavior.value.fullyHide
+    ))
     const isCollapsed = computed(() => props.collapse || (
       scrollBehavior.value.collapse &&
       (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0)
     ))
     const isFlat = computed(() => props.flat || (
+      scrollBehavior.value.fullyHide &&
+      !isActive.value
+    ) || (
       scrollBehavior.value.elevate &&
       (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0)
     ))
@@ -102,12 +109,16 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
       const height = Number(vToolbarRef.value?.contentHeight ?? props.height)
       const extensionHeight = Number(vToolbarRef.value?.extensionHeight ?? 0)
 
-      return (height + extensionHeight)
+      if (!canHide.value) return (height + extensionHeight)
+
+      return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide
+        ? (height + extensionHeight)
+        : height
     })
 
     useToggleScope(computed(() => !!props.scrollBehavior), () => {
       watchEffect(() => {
-        if (scrollBehavior.value.hide) {
+        if (canHide.value) {
           if (scrollBehavior.value.inverted) {
             isActive.value = currentScroll.value > scrollThreshold.value
           } else {
diff --git a/packages/vuetify/src/composables/layout.ts b/packages/vuetify/src/composables/layout.ts
index 68f0332a777..a0bb99f8ae9 100644
--- a/packages/vuetify/src/composables/layout.ts
+++ b/packages/vuetify/src/composables/layout.ts
@@ -271,7 +271,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
         const styles = {
           [position.value]: 0,
           zIndex: zIndex.value,
-          transform: `translate${isHorizontal ? 'X' : 'Y'}(${(active.value ? 0 : -110) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}%)`,
+          transform: `translate${isHorizontal ? 'X' : 'Y'}(${(active.value ? 0 : -layoutSize.value) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}px)`,
           position: absolute.value || rootZIndex.value !== ROOT_ZINDEX ? 'absolute' : 'fixed',
           ...(transitionsEnabled.value ? undefined : { transition: 'none' }),
         } as const