Feat/payload globals

package.json

@@ -43,7 +43,6 @@
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "sass": "^1.100.0",
-    "shadcn": "^4.8.0",
     "sharp": "^0.34.5",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0",

src/app/(landing)/[locale]/layout.tsx

@@ -2,8 +2,7 @@ import ConsentManager from "@/components/providers/ConsentManager"
 import { Navigation } from "@/components/navigation/Navigation"
 import { FooterSection } from "@/components/sections/FooterSection"
 import { getFooter } from "@/lib/cms"
-import { getNavbarButtons } from "@/lib/cms"
-import { getNavbarItems } from "@/lib/cms"
+import { getNavigation } from "@/lib/cms"
 import { isSupportedLocale } from "@/lib/i18n"
 import type { ReactNode } from "react"
 import { notFound } from "next/navigation"
@@ -21,16 +20,17 @@ export default async function LocaleLayout({ children, params }: LocaleLayoutPro
         notFound()
     }
 
-    const [items, buttons, footer] = await Promise.all([
-        getNavbarItems(locale),
-        getNavbarButtons(locale),
+    const [navigation, footer] = await Promise.all([
+        getNavigation(locale),
         getFooter(locale),
     ])
+    const items = navigation?.items?.items ?? []
+    const buttons = navigation?.buttons?.buttons ?? []
 
     return (
         <ConsentManager locale={locale}>
             <div className="relative bg-primary overflow-x-hidden">
-                <Navigation locale={locale} items={items} buttons={buttons} />
+                <Navigation locale={locale} items={items} buttons={buttons} logo={navigation?.logo} />
                 <main id="main-content" className="bg-primary">
                     {children}
                 </main>

src/components/navigation/Navigation.tsx

@@ -1,23 +1,23 @@
-import type { NavbarItem } from "@/payload-types"
 import { type AppLocale } from "@/lib/i18n"
-import type { NavbarButtonData } from "@/lib/navigation"
+import type { NavigationLogoData, NavbarButtonData, NavbarItemData } from "@/lib/navigation"
 import { NavigationDesktop } from "./NavigationDesktop"
 import { NavigationMobile } from "./NavigationMobile"
 
 interface NavigationProps {
     locale: AppLocale
-    items: NavbarItem[]
+    items: NavbarItemData[]
     buttons: NavbarButtonData[]
+    logo?: NavigationLogoData
 }
 
-export function Navigation({ locale, items, buttons }: NavigationProps) {
+export function Navigation({ locale, items, buttons, logo }: NavigationProps) {
     return (
         <>
             <div className="hidden lg:block">
-                <NavigationDesktop locale={locale} items={items} buttons={buttons} />
+                <NavigationDesktop locale={locale} items={items} buttons={buttons} logo={logo} />
             </div>
             <div className="lg:hidden">
-                <NavigationMobile locale={locale} items={items} buttons={buttons} />
+                <NavigationMobile locale={locale} items={items} buttons={buttons} logo={logo} />
             </div>
         </>
     )

src/components/navigation/NavigationDesktop.tsx

@@ -4,8 +4,7 @@ import { cn } from "@/lib/utils"
 import { useNavigationScrollState } from "@/hooks/useNavigationScrollState"
 import { useNavigationViewModel } from "@/hooks/useNavigationViewModel"
 import { type AppLocale } from "@/lib/i18n"
-import type { NavbarButtonData } from "@/lib/navigation"
-import type { NavbarItem } from "@/payload-types"
+import type { NavigationLogoData, NavbarButtonData, NavbarItemData } from "@/lib/navigation"
 import {
     NavigationMenu,
     NavigationMenuContent,
@@ -25,11 +24,12 @@ import { NavigationSubMenu } from "./NavigationSubMenu"
 
 type NavigationDesktopProps = {
     locale: AppLocale
-    items: NavbarItem[]
+    items: NavbarItemData[]
     buttons: NavbarButtonData[]
+    logo?: NavigationLogoData
 }
 
-const NavigationDesktop: React.FC<NavigationDesktopProps> = ({ locale, items, buttons }) => {
+const NavigationDesktop: React.FC<NavigationDesktopProps> = ({ locale, items, buttons, logo }) => {
     const rootRef = useRef<HTMLDivElement>(null)
     const navTabsRef = useRef<HTMLDivElement>(null)
     const submenuContentRef = useRef<HTMLDivElement>(null)
@@ -38,7 +38,7 @@ const NavigationDesktop: React.FC<NavigationDesktopProps> = ({ locale, items, bu
     const [activeMenuValue, setActiveMenuValue] = useState<string | null>(null)
     const [shellInsetWidth, setShellInsetWidth] = useState(0)
     const [submenuHeight, setSubmenuHeight] = useState(0)
-    const { homeHref, navbarItems, navbarButtons } = useNavigationViewModel(locale, items, buttons)
+    const { homeHref, navbarItems, navbarButtons, logo: navigationLogo } = useNavigationViewModel(locale, items, buttons, logo)
     const isScrolled = useNavigationScrollState({
         onScroll: () => {
             suppressMenuOpenRef.current = true
@@ -160,7 +160,7 @@ const NavigationDesktop: React.FC<NavigationDesktopProps> = ({ locale, items, bu
 
                         <Link href={homeHref}>
                             <div className="flex">
-                                <Image src={"/code0_logo_white.png"} width={"32"} height={"32"} alt={"Code0 Logo"} loading="eager"/>
+                                <NavigationLogo logo={navigationLogo} />
                             </div>
                         </Link>
 
@@ -293,3 +293,20 @@ const NavigationDesktop: React.FC<NavigationDesktopProps> = ({ locale, items, bu
 }
 
 export { NavigationDesktop }
+
+function NavigationLogo({ logo }: { logo?: NavigationLogoData }) {
+    if (logo && typeof logo !== "number" && logo.url) {
+        return (
+            <Image
+                src={logo.url}
+                width={32}
+                height={32}
+                alt={logo.alt ?? "Code0 Logo"}
+                loading="eager"
+                className="size-8 object-contain"
+            />
+        )
+    }
+
+    return <Image src="/code0_logo_white.png" width={32} height={32} alt="Code0 Logo" loading="eager"/>
+}

src/components/navigation/NavigationMobile.tsx

@@ -5,8 +5,7 @@ import { useNavigationScrollState } from "@/hooks/useNavigationScrollState"
 import { useNavigationViewModel } from "@/hooks/useNavigationViewModel"
 import { useOutsideClick } from "@/hooks/useOutsideClick"
 import { type AppLocale } from "@/lib/i18n"
-import type { NavbarButtonData } from "@/lib/navigation"
-import type { NavbarItem } from "@/payload-types"
+import type { NavigationLogoData, NavbarButtonData, NavbarItemData } from "@/lib/navigation"
 import { Container } from "@code0-tech/pictor"
 import { IconMenu2, IconX } from "@tabler/icons-react"
 import { AnimatePresence, m as motion } from "motion/react"
@@ -19,11 +18,12 @@ import { NavigationMobileItem } from "./NavigationMobileItem"
 
 type NavigationMobileProps = {
     locale: AppLocale
-    items: NavbarItem[]
+    items: NavbarItemData[]
     buttons: NavbarButtonData[]
+    logo?: NavigationLogoData
 }
 
-const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, buttons }) => {
+const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, buttons, logo }) => {
     const { trigger } = useWebHaptics()
     const menuRef = useOutsideClick<HTMLElement>(() => setIsOpen(false))
     const rootRef = useRef<HTMLDivElement>(null)
@@ -32,7 +32,7 @@ const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, butt
     const [mobileOpenKey, setMobileOpenKey] = useState<string | null>(null)
     const [isMenuClosing, setIsMenuClosing] = useState(false)
     const [shellInsetWidth, setShellInsetWidth] = useState(0)
-    const { homeHref, navbarItems, navbarButtons } = useNavigationViewModel(locale, items, buttons)
+    const { homeHref, navbarItems, navbarButtons, logo: navigationLogo } = useNavigationViewModel(locale, items, buttons, logo)
     const menuTransition = {
         duration: 0.34,
         ease: [0.16, 1, 0.3, 1] as const,
@@ -153,7 +153,7 @@ const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, butt
                                 }}
                             >
                                 <div className="flex">
-                                    <Image src={"/code0_logo_white.png"} width={"32"} height={"32"} alt={"Code0 Logo"} loading="eager"/>
+                                    <NavigationLogo logo={navigationLogo} />
                                 </div>
                             </Link>
                             <button
@@ -222,3 +222,20 @@ const NavigationMobile: React.FC<NavigationMobileProps> = ({ locale, items, butt
 }
 
 export { NavigationMobile }
+
+function NavigationLogo({ logo }: { logo?: NavigationLogoData }) {
+    if (logo && typeof logo !== "number" && logo.url) {
+        return (
+            <Image
+                src={logo.url}
+                width={32}
+                height={32}
+                alt={logo.alt ?? "Code0 Logo"}
+                loading="eager"
+                className="size-8 object-contain"
+            />
+        )
+    }
+
+    return <Image src="/code0_logo_white.png" width={32} height={32} alt="Code0 Logo" loading="eager"/>
+}

src/collections/cookieBanner.ts → src/globals/cookieBanner.ts

@@ -1,4 +1,4 @@
-import type { CollectionConfig } from "payload"
+import type { GlobalConfig } from "payload"
 
 const localizedText = (name: string, label: string) => ({
   name,
@@ -8,13 +8,11 @@ const localizedText = (name: string, label: string) => ({
   localized: true,
 })
 
-export const CookieBanner: CollectionConfig = {
+export const CookieBanner: GlobalConfig = {
   slug: "cookie-banner",
   access: {
     read: () => true,
-    create: ({ req }) => Boolean(req.user),
     update: ({ req }) => Boolean(req.user),
-    delete: ({ req }) => Boolean(req.user),
   },
   fields: [
     {

src/collections/footer.ts → src/globals/footer.ts

@@ -1,12 +1,10 @@
-import type { CollectionConfig } from "payload"
+import type { GlobalConfig } from "payload"
 
-export const Footer: CollectionConfig = {
+export const Footer: GlobalConfig = {
   slug: "footer",
   access: {
     read: () => true,
-    create: ({ req }) => Boolean(req.user),
     update: ({ req }) => Boolean(req.user),
-    delete: ({ req }) => Boolean(req.user),
   },
   fields: [
     {