Merged in feat/SW-2782-create-sas-branded-header (pull request #2878)

feat(SW-2782): Updated header as per design, added language switcher and user menu

* feat(SW-2782): Updated header as per design, added language switcher and user menu

* feat(SW-2782): Updated UI as per design

* feat(SW-2782): Optimised code with use of Popover and modal from RAC


Approved-by: Anton Gunnarsson

apps/partner-sas/components/Menu/index.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useMediaQuery } from "usehooks-ts"
+
+import Image from "@scandic-hotels/design-system/Image"
+import Link from "@scandic-hotels/design-system/Link"
+
+import useLang from "@/hooks/useLang"
+
+import { MobileMenu } from "./MobileMenu"
+import { NavigationMenu } from "./NavigationMenu"
+
+import styles from "./menu.module.css"
+
+export function Menu() {
+  const lang = useLang()
+  const checkIfMobile = useMediaQuery("(max-width: 767px)")
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    setIsMobile(checkIfMobile)
+  }, [checkIfMobile])
+  return (
+    <div className={styles.container}>
+      <Link href={`/${lang}`}>
+        <Image
+          alt="SAS logotype"
+          className={styles.logo}
+          src="/_static/img/sas-logotype-white.svg"
+          height={32}
+          width={90}
+          sizes="100vw"
+        />
+      </Link>
+      {isMobile ? (
+        <MobileMenu>
+          <NavigationMenu isMobile={true} />
+        </MobileMenu>
+      ) : (
+        <NavigationMenu isMobile={false} />
+      )}
+    </div>
+  )
+}