fix(OnyxNavBar): support SSR (#1321)

Relates to #1073 

Fix error when using the nav bar with Nuxt / server side rendering

.changeset/wise-owls-dance.md

@@ -0,0 +1,7 @@
+---
+"sit-onyx": patch
+---
+
+fix(OnyxNavBar): support SSR
+
+prevent "ResizeObserver not defined" error

packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue

@@ -58,7 +58,7 @@ const isMobile = computed(() => {
     typeof props.mobileBreakpoint === "number"
       ? props.mobileBreakpoint
       : ONYX_BREAKPOINTS[props.mobileBreakpoint];
-  return width.value <= mobileWidth;
+  return width.value !== 0 && width.value <= mobileWidth;
 });
 
 const { t } = injectI18n();

packages/sit-onyx/src/composables/useResizeObserver.spec.ts

@@ -2,6 +2,14 @@ import { describe, expect, test, vi } from "vitest";
 import { ref } from "vue";
 import { useResizeObserver } from "./useResizeObserver";
 
+vi.mock("vue", async (importOriginal) => {
+  return {
+    ...(await importOriginal()),
+    // this will only affect "foo" outside of the original module
+    onBeforeMount: (callback) => callback(),
+  } satisfies typeof import("vue");
+});
+
 describe("useResizeObserver", () => {
   test("should get component size", () => {
     let callback: ((entries: Partial<ResizeObserverEntry>[]) => void) | undefined;

packages/sit-onyx/src/composables/useResizeObserver.ts

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, ref, watch, type Ref } from "vue";
+import { onBeforeMount, onBeforeUnmount, ref, watch, type Ref } from "vue";
 
 export type UseResizeObserverOptions = {
   /**
@@ -29,18 +29,21 @@ export const useResizeObserver = (
     height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
   };
 
-  const observer = new ResizeObserver(callback);
-
-  watch(
-    target,
-    (newTarget, oldTarget) => {
-      if (oldTarget) observer?.unobserve(oldTarget);
-      if (newTarget) observer?.observe(newTarget, { box });
-    },
-    { immediate: true },
-  );
-
-  onBeforeUnmount(() => observer.disconnect());
+  // ensure ResizeObserver is only called before/on mount to support server side rendering
+  onBeforeMount(() => {
+    const observer = new ResizeObserver(callback);
+
+    watch(
+      target,
+      (newTarget, oldTarget) => {
+        if (oldTarget) observer?.unobserve(oldTarget);
+        if (newTarget) observer?.observe(newTarget, { box });
+      },
+      { immediate: true },
+    );
+
+    onBeforeUnmount(() => observer.disconnect());
+  });
 
   return { width, height };
 };