feat: add pixel font for hotel name, toggle text/logo on click in site header

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages } from "next-intl/server";
-import { Nunito } from "next/font/google";
+import { Nunito, Pixelify_Sans } from "next/font/google";
 import { headers } from "next/headers";
 import type { ReactNode } from "react";
 import { Navigation } from "@/components/navigation";
@@ -22,6 +22,13 @@ const nunito = Nunito({
   variable: "--font-nunito",
 });
 
+const pixelFont = Pixelify_Sans({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  display: "swap",
+  variable: "--font-pixel",
+});
+
 export async function generateMetadata(): Promise<Metadata> {
   const hotel = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
   return {
@@ -42,7 +49,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
   const pathname = headersList.get("x-pathname") || headersList.get("next-url") || "";
   const isClient = pathname === "/client" || pathname.startsWith("/client/");
   return (
-    <html lang={locale} className={`app ${nunito.variable}`}>
+    <html lang={locale} className={`app ${nunito.variable} ${pixelFont.variable}`}>
       <head>
         {/* Apply the saved/default theme before first paint to avoid a flash. */}
         <script