From f286352cc8425758d585875b59f54bcfe6f1bb2b Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Thu, 10 Oct 2024 18:51:58 +0200
Subject: [PATCH] fix(VAppBar,VToolbar): vertical main layout shift on SSR
 request

---
 .../src/components/VAppBar/VAppBar.tsx        | 10 ++++---
 .../src/components/VToolbar/VToolbar.tsx      | 27 ++++++++++---------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
index 905e180c1e9..23fd53cf888 100644
--- a/packages/vuetify/src/components/VAppBar/VAppBar.tsx
+++ b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -2,7 +2,7 @@
 import './VAppBar.sass'
 
 // Components
-import { makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'
+import { calculateHeight, makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'
 
 // Composables
 import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
@@ -108,8 +108,12 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
     const height = computed(() => {
       if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0
 
-      const height = vToolbarRef.value?.contentHeight ?? 0
-      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0
+      const height = vToolbarRef.value?.contentHeight ?? calculateHeight(props.height, props.density, false)
+      const extensionHeight = vToolbarRef.value?.extensionHeight ??
+        (props.extended || slots.extension?.()
+          ? calculateHeight(props.extensionHeight, props.density, true)
+          : 0
+        )
 
       if (!canHide.value) return (height + extensionHeight)
 
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
index c0ce09c5022..ed6471f7bb7 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -60,6 +60,15 @@ export const makeVToolbarProps = propsFactory({
   ...makeThemeProps(),
 }, 'VToolbar')
 
+export function calculateHeight (height: number | string, density: Density, forExtensionHeight: boolean) {
+  return parseInt((
+    Number(height) +
+    (density === 'prominent' ? Number(height) : 0) -
+    (density === 'comfortable' ? forExtensionHeight ? 4 : 8 : 0) -
+    (density === 'compact' ? forExtensionHeight ? 8 : 16 : 0)
+  ), 10)
+}
+
 export type VToolbarSlots = {
   default: never
   image: never
@@ -83,19 +92,13 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
     const { rtlClasses } = useRtl()
 
     const isExtended = shallowRef(!!(props.extended || slots.extension?.()))
-    const contentHeight = computed(() => parseInt((
-      Number(props.height) +
-      (props.density === 'prominent' ? Number(props.height) : 0) -
-      (props.density === 'comfortable' ? 8 : 0) -
-      (props.density === 'compact' ? 16 : 0)
-    ), 10))
+    const contentHeight = computed(() => calculateHeight(
+      props.height,
+      props.density,
+      false,
+    ))
     const extensionHeight = computed(() => isExtended.value
-      ? parseInt((
-        Number(props.extensionHeight) +
-        (props.density === 'prominent' ? Number(props.extensionHeight) : 0) -
-        (props.density === 'comfortable' ? 4 : 0) -
-        (props.density === 'compact' ? 8 : 0)
-      ), 10)
+      ? calculateHeight(props.extensionHeight, props.density, true)
       : 0
     )