src/api/menu.ts

@@ -8,7 +8,7 @@ export const getMenuCategories = async (
   return payload.find({ collection: "menu-category", pagination: false, ...opts });
 };
 
-export const getMenuItems = async (opts: Omit<Options<"menu-item">, "collection" | "depth">) => {
+export const getMenuItems = async (opts: Omit<Options<"menu-item">, "collection">) => {
   const payload = await getPayload();
-  return payload.find({ collection: "menu-item", depth: 1, ...opts });
+  return payload.find({ collection: "menu-item", ...opts });
 };

src/app/(frontend)/[locale]/about/page.tsx

@@ -1,10 +1,10 @@
-import { Cigarette, DoorOpen, PawPrint, Truck } from "lucide-react";
+import { Cigarette, PawPrint } from "lucide-react";
-import { Container, Stack } from "@styled-system/jsx";
+import { Container, HStack, Stack } from "@styled-system/jsx";
 
-import FeatureToggle from "@/components/general/feature-toggle";
 import { Metadata } from "next";
 import { Params } from "../shared";
 import RichText from "@/components/rich-text";
+import { Text } from "@/components/ui/text";
 import { getAbout } from "@/api";
 import { getI18n } from "@/i18n/server";
 
@@ -17,14 +17,18 @@ export default async function About({ params: { locale } }: { params: Params })
       <Stack gap={10}>
         <RichText content={about.text!} />
         <Stack>
-          <FeatureToggle
+          {about.dogsAllowed && (
-            icon={PawPrint}
+            <HStack alignItems="center">
-            feature={about.dogsAllowed}
+              <PawPrint />
-            label={t("about.dogsAllowed")}
+              <Text>{t("about.dogsAllowed")}</Text>
-          />
+            </HStack>
-          <FeatureToggle icon={Cigarette} feature={about.fumoire} label={t("about.fumoire")} />
+          )}
-          <FeatureToggle icon={Truck} feature={about.delivery} label={t("about.delivery")} />
+          {about.fumoire && (
-          <FeatureToggle icon={DoorOpen} feature={about.takeAway} label={t("about.takeAway")} />
+            <HStack alignItems="center">
+              <Cigarette />
+              <Text>{t("about.fumoire")}</Text>
+            </HStack>
+          )}
         </Stack>
       </Stack>
     </Container>

src/app/(frontend)/[locale]/contact/page.tsx

@@ -59,15 +59,14 @@ export default async function Contact({
             <Heading as="h3" size="xl">
               {t("general.address")}
             </Heading>
-            <HStack gap={12} alignItems="start" flexWrap="wrap">
+            <HStack gap={12} alignItems="start">
               <Address locale={locale} />
               <ContactMethods locale={locale} />
             </HStack>
             {contact.address.embeddedMaps && (
               <styled.div
                 dangerouslySetInnerHTML={{ __html: contact.address.embeddedMaps }}
-                maxW={600}
+                width={600}
-                width="100%"
               />
             )}
           </Stack>

src/app/(frontend)/[locale]/menu/category-tab-content.tsx

@@ -1,9 +1,11 @@
-import { HStack, Stack } from "@styled-system/jsx";
+import { Box, HStack, Stack } from "@styled-system/jsx";
-import type { Media, MenuItemTag as MenuItemTagT } from "@/payload-types";
 
+import { HoverCard } from "@/components/ui/hover-card";
+import { IconButton } from "@/components/ui/icon-button";
+import Image from "next/image";
+import { Image as ImageIcon } from "lucide-react";
 import { Locale } from "@/i18n/settings";
-import MenuItemImage from "@/app/(frontend)/[locale]/menu/menu-item-image";
+import { Media } from "@/payload-types";
-import MenuItemTag from "./menu-item-tag";
 import RichText from "@/components/rich-text";
 import { TabContentBaseProps } from "@ark-ui/react";
 import { Tabs } from "@/components/ui/tabs";
@@ -28,27 +30,45 @@ export default async function CategoryTabContent({
         {menuItems.docs.map((mi) => (
           <HStack key={mi.id} alignItems="start">
             <Stack marginRight="auto">
-              <HStack alignItems="start">
+              <HStack>
                 <Text>{mi.name}</Text>
-                <HStack flexWrap="wrap">
+                {mi.image && (
-                  {mi.tags?.map((tag) => (
+                  <HoverCard.Root>
-                    <MenuItemTag key={(tag as MenuItemTagT).id} tag={tag as MenuItemTagT} />
+                    <HoverCard.Trigger asChild>
-                  ))}
+                      <IconButton variant="ghost">
-                </HStack>
+                        <ImageIcon />
-                {mi.image && <MenuItemImage image={mi.image as Media} />}
+                      </IconButton>
+                    </HoverCard.Trigger>
+                    <HoverCard.Positioner>
+                      <HoverCard.Content>
+                        <HoverCard.Arrow>
+                          <HoverCard.ArrowTip />
+                        </HoverCard.Arrow>
+                        <Box w={250} h={150} position="relative">
+                          <Image
+                            src={(mi.image as Media).url!}
+                            alt={(mi.image as Media).alt ?? ""}
+                            className={css({ objectFit: "cover" })}
+                            fill
+                          />
+                        </Box>
+                      </HoverCard.Content>
+                    </HoverCard.Positioner>
+                  </HoverCard.Root>
+                )}
               </HStack>
               {mi.description && (
                 <RichText content={mi.description} className={css({ color: "fg.muted" })} />
               )}
             </Stack>
-            <Stack css={{ sm: { justifyContent: "end", flexDir: "row" } }}>
+            <HStack justify="end">
               {mi.variants.map((v) => (
                 <Stack key={v.id} align="end">
                   <Text>{formatToCHF(v.price!)}</Text>
                   <Text color="fg.muted">{v.title}</Text>
                 </Stack>
               ))}
-            </Stack>
+            </HStack>
           </HStack>
         ))}
       </Stack>

src/app/(frontend)/[locale]/menu/menu-item-image.tsx

@@ -1,34 +0,0 @@
-import { Box } from "@styled-system/jsx";
-import { HoverCard } from "@ark-ui/react";
-import { IconButton } from "@/components/ui/icon-button";
-import Image from "next/image";
-import { ImageIcon } from "lucide-react";
-import { Media } from "@/payload-types";
-import { css } from "@styled-system/css";
-
-export default function MenuItemImage({ image }: { image: Media }) {
-  return (
-    <HoverCard.Root>
-      <HoverCard.Trigger asChild>
-        <IconButton variant="ghost">
-          <ImageIcon />
-        </IconButton>
-      </HoverCard.Trigger>
-      <HoverCard.Positioner>
-        <HoverCard.Content>
-          <HoverCard.Arrow>
-            <HoverCard.ArrowTip />
-          </HoverCard.Arrow>
-          <Box w={250} h={150} position="relative">
-            <Image
-              src={(image as Media).url!}
-              alt={(image as Media).alt ?? ""}
-              className={css({ objectFit: "cover" })}
-              fill
-            />
-          </Box>
-        </HoverCard.Content>
-      </HoverCard.Positioner>
-    </HoverCard.Root>
-  );
-}

src/app/(frontend)/[locale]/menu/menu-item-tag.tsx

@@ -1,41 +0,0 @@
-import { Box, HStack, Stack } from "@styled-system/jsx";
-import { Media, MenuItemTag } from "@/payload-types";
-
-import { HoverCard } from "@/components/ui/hover-card";
-import { IconButton } from "@/components/ui/icon-button";
-import Image from "next/image";
-import { Image as ImageIcon } from "lucide-react";
-import { Locale } from "@/i18n/settings";
-import MenuItemImage from "@/app/(frontend)/[locale]/menu/menu-item-image";
-import RichText from "@/components/rich-text";
-import { TabContentBaseProps } from "@ark-ui/react";
-import { Tabs } from "@/components/ui/tabs";
-import { Text } from "@/components/ui/text";
-import { css } from "@styled-system/css";
-import { formatToCHF } from "@/utils/formatters";
-import { getMenuItems } from "@/api";
-
-export default function MenuItemTag({ tag }: { tag: MenuItemTag }) {
-  return (
-    <HoverCard.Root>
-      <HoverCard.Trigger asChild>
-        <Box bg="accent.a8" color="white" fontSize="xs" borderRadius="md" p={1}>
-          {(tag as MenuItemTag).name}
-        </Box>
-      </HoverCard.Trigger>
-      <HoverCard.Positioner>
-        <HoverCard.Content p={2} pb={0.5}>
-          <HoverCard.Arrow>
-            <HoverCard.ArrowTip />
-          </HoverCard.Arrow>
-          {(tag as MenuItemTag).description !== undefined && (
-            <RichText
-              content={(tag as MenuItemTag).description}
-              className={css({ fontSize: "sm" })}
-            />
-          )}
-        </HoverCard.Content>
-      </HoverCard.Positioner>
-    </HoverCard.Root>
-  );
-}

src/app/(frontend)/[locale]/page.tsx

@@ -1,5 +1,5 @@
-import { Box, Container, HStack, Stack } from "@styled-system/jsx";
+import { Box, Container, Stack, styled } from "@styled-system/jsx";
-import { Cigarette, DoorOpen, Info, Palmtree, PartyPopper, PawPrint, Truck } from "lucide-react";
+import { Info, Palmtree, PartyPopper } from "lucide-react";
 import {
   getAbout,
   getCurrentAnnouncements,
@@ -9,7 +9,6 @@ import {
 } from "@/api";
 
 import { Alert } from "@/components/ui/alert";
-import FeatureToggle from "@/components/general/feature-toggle";
 import Gallery from "./gallery";
 import { Heading } from "@/components/ui/heading";
 import Image from "next/image";
@@ -46,10 +45,14 @@ export default async function Home({ params: { locale } }: { params: Params }) {
           maxH="80%"
           align="center"
           px={30}
-          gap={20}
+          gap={24}
           color="white"
         >
-          <Stack maxW={550} width="100%" className={scrollable({ hideScrollbar: false, px: 2 })}>
+          <Stack
+            maxW={550}
+            width="100%"
+            className={scrollable({ hideScrollbar: false, px: 2 })}
+          >
             {announcements.docs.length > 0 && (
               <Heading size="xl" color="white">
                 {t("general.announcements")}
@@ -93,16 +96,6 @@ export default async function Home({ params: { locale } }: { params: Params }) {
           <Text color="white" maxW={550} width="100%" textAlign="center" fontSize={36}>
             {home.tagline}
           </Text>
-          <HStack justify="center" flexWrap="wrap">
-            <FeatureToggle
-              icon={PawPrint}
-              feature={about.dogsAllowed}
-              label={t("about.dogsAllowed")}
-            />
-            <FeatureToggle icon={Cigarette} feature={about.fumoire} label={t("about.fumoire")} />
-            <FeatureToggle icon={Truck} feature={about.delivery} label={t("about.delivery")} />
-            <FeatureToggle icon={DoorOpen} feature={about.takeAway} label={t("about.takeAway")} />
-          </HStack>
         </Stack>
       </Box>
       <Container>

src/components/general/address.tsx

@@ -1,15 +1,15 @@
-import { Box, BoxProps } from "@styled-system/jsx";
 import { getAbout, getContact } from "@/api";
 
+import { Box } from "@styled-system/jsx";
 import { Locale } from "@/i18n/settings";
 import { Text } from "@/components/ui/text";
 
-export default async function Address({ locale, ...props }: { locale: Locale } & BoxProps) {
+export default async function Address({ locale }: { locale: Locale }) {
   const about = await getAbout({ locale });
   const contact = await getContact({ locale });
 
   return (
-    <Box {...props}>
+    <Box>
       <Text fontWeight="bold">{about.name}</Text>
       <Text>
         {contact.address.street} {contact.address.number}

src/components/general/contact-methods.tsx

@@ -1,17 +1,16 @@
-import { Grid, GridProps } from "@styled-system/jsx";
+import { Grid } from "@styled-system/jsx";
-
 import { Link } from "@/components/ui/link";
 import { Locale } from "@/i18n/settings";
 import { Text } from "@/components/ui/text";
 import { getContact } from "@/api";
 import { getI18n } from "@/i18n/server";
 
-export default async function ContactMethods({ locale, ...props }: { locale: Locale } & GridProps) {
+export default async function ContactMethods({ locale }: { locale: Locale }) {
   const t = await getI18n();
   const contact = await getContact({ locale });
 
   return (
-    <Grid gridTemplateColumns="min-content 1fr" columnGap={2} rowGap={0.5} {...props}>
+    <Grid gridTemplateColumns="min-content 1fr" columnGap={2} rowGap={0.5}>
       {contact.phone && (
         <>
           <Text fontWeight="bold">{t("general.phoneNumber")}</Text>

src/components/general/feature-toggle.tsx

@@ -1,20 +0,0 @@
-import { HStack } from "@styled-system/jsx";
-import React from "react";
-import { Text } from "@/components/ui/text";
-
-type FeatureToggleProps = {
-  feature: boolean;
-  icon: React.ComponentType;
-  label: string;
-};
-
-export default function FeatureToggle({ feature, icon: Icon, label }: FeatureToggleProps) {
-  return (
-    feature && (
-      <HStack alignItems="center">
-        <Icon />
-        <Text>{label}</Text>
-      </HStack>
-    )
-  );
-}

src/components/layout/footer.tsx

@@ -18,15 +18,9 @@ export default async function Footer({ locale }: { locale: Locale }) {
 
   return (
     <styled.footer minH={60} p={8} className={stack({ gap: 4, justify: "end" })}>
-      <Stack
+      <HStack justify="space-between" alignItems="start" flexWrap="wrap">
-        css={{
+        <Address locale={locale} />
-          flexDir: "column",
+        <HStack>
-          alignItems: "center",
-          sm: { flexDir: "row", alignItems: "start" },
-        }}
-      >
-        <Address locale={locale} flex={1} />
-        <HStack flex={1} justify="center">
           {(contact.socialLinks ?? []).map((sl) => (
             <IconButton key={sl.id} asChild variant="link">
               <a href={sl.link}>
@@ -35,10 +29,8 @@ export default async function Footer({ locale }: { locale: Locale }) {
             </IconButton>
           ))}
         </HStack>
-        <HStack flex={1} justify="end">
+        <ContactMethods locale={locale} />
-          <ContactMethods locale={locale} />
+      </HStack>
-        </HStack>
-      </Stack>
       <Stack alignSelf="center" gap={1}>
         <Heading size="lg">{t("general.openingTimes")}</Heading>
         <OpeningTimes locale={locale} />

src/components/rich-text/serialize.tsx

@@ -162,7 +162,7 @@ export function serializeLexical({ nodes }: Props): JSX.Element {
             const media = node.value as Media;
 
             return (
-              <styled.div textAlign="center" mb={4}>
+              <styled.div textAlign="center">
                 <Image
                   height={250}
                   width={500}

src/globals/About.ts

@@ -31,15 +31,5 @@ export const About: GlobalConfig = {
       type: "checkbox",
       required: true,
     },
-    {
-      name: "delivery",
-      type: "checkbox",
-      required: true,
-    },
-    {
-      name: "takeAway",
-      type: "checkbox",
-      required: true,
-    },
   ],
 };

src/i18n/de.ts

@@ -31,8 +31,6 @@ export default {
   about: {
     dogsAllowed: "Hunde erlaubt",
     fumoire: "Fumoire verfügbar",
-    takeAway: "Take-away",
-    delivery: "Lieferung",
   },
   contact: {
     name: "Name",

src/payload-types.ts

@@ -349,8 +349,6 @@ export interface About {
   } | null;
   dogsAllowed: boolean;
   fumoire: boolean;
-  delivery: boolean;
-  takeAway: boolean;
   updatedAt?: string | null;
   createdAt?: string | null;
 }