feat: ✨ implement mobile nav and footer
parent
34be1c9ad7
commit
e424ae8d0d
@ -0,0 +1 @@
|
|||||||
|
export default async function About() {}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export default async function Contact() {}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export default async function Menu() {}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { Box, HStack, Stack, styled } from "@styled-system/jsx";
|
||||||
|
|
||||||
|
import { IconButton } from "@/components/ui/icon-button";
|
||||||
|
import { SiFacebook } from "@icons-pack/react-simple-icons";
|
||||||
|
import { getPayload } from "@/utils/payload";
|
||||||
|
import { stack } from "@styled-system/patterns";
|
||||||
|
|
||||||
|
export default async function Footer() {
|
||||||
|
const payload = await getPayload();
|
||||||
|
const about = await payload.findGlobal({ slug: "about" });
|
||||||
|
const contact = await payload.findGlobal({ slug: "contact" });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<styled.footer h={60} p={8} className={stack({ gap: 4 })}>
|
||||||
|
<HStack justify="space-between" alignItems="start">
|
||||||
|
<Box>
|
||||||
|
<styled.p fontWeight="bold">{about.name}</styled.p>
|
||||||
|
<styled.p>
|
||||||
|
{contact.address.street} {contact.address.number}
|
||||||
|
</styled.p>
|
||||||
|
<styled.p>
|
||||||
|
{contact.address.zip} {contact.address.area}
|
||||||
|
</styled.p>
|
||||||
|
</Box>
|
||||||
|
<HStack>
|
||||||
|
{(contact.socialLinks ?? []).map((sl) => (
|
||||||
|
<IconButton key={sl.id} asChild variant="link">
|
||||||
|
<a href={sl.link}>
|
||||||
|
<SiFacebook />
|
||||||
|
</a>
|
||||||
|
</IconButton>
|
||||||
|
))}
|
||||||
|
</HStack>
|
||||||
|
<Stack gap={2}>
|
||||||
|
{contact.phone && <styled.a href={`tel:${contact.phone}`}>{contact.phone}</styled.a>}
|
||||||
|
{contact.email && <styled.a href={`mailto:${contact.email}`}>{contact.email}</styled.a>}
|
||||||
|
</Stack>
|
||||||
|
</HStack>
|
||||||
|
<styled.p textAlign="center">Powered by Jenyus</styled.p>
|
||||||
|
</styled.footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Menu, X } from "lucide-react";
|
||||||
|
|
||||||
|
import { IconButton } from "@/components/ui/icon-button";
|
||||||
|
import NavLink from "@/components/layout/nav-link";
|
||||||
|
import { css } from "@styled-system/css";
|
||||||
|
import { styled } from "@styled-system/jsx";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export default function MobileNav() {
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<styled.div className={css({ display: "block", sm: { display: "none" } })}>
|
||||||
|
<IconButton onClick={() => setShow((show) => !show)}>
|
||||||
|
<Menu />
|
||||||
|
</IconButton>
|
||||||
|
<styled.div
|
||||||
|
display={show ? "flex" : "none"}
|
||||||
|
zIndex={600}
|
||||||
|
position="fixed"
|
||||||
|
top={0}
|
||||||
|
left={0}
|
||||||
|
right={0}
|
||||||
|
bottom={0}
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
flexDir="column"
|
||||||
|
gap={4}
|
||||||
|
p={12}
|
||||||
|
bg="white"
|
||||||
|
alignItems="center"
|
||||||
|
onClick={() => setShow(false)}
|
||||||
|
>
|
||||||
|
<styled.div alignSelf="stretch" display="flex" justifyContent="end">
|
||||||
|
<IconButton variant="ghost" onClick={() => setShow(false)}>
|
||||||
|
<X />
|
||||||
|
</IconButton>
|
||||||
|
</styled.div>
|
||||||
|
|
||||||
|
<NavLink href="/about">Über uns</NavLink>
|
||||||
|
<NavLink href="/menu">Menü</NavLink>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
href="/contact"
|
||||||
|
type="button"
|
||||||
|
className={css({ alignSelf: "stretch", textAlign: "center", marginTop: "auto" })}
|
||||||
|
>
|
||||||
|
Kontakt
|
||||||
|
</NavLink>
|
||||||
|
</styled.div>
|
||||||
|
</styled.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import Link, { LinkProps } from "next/link";
|
||||||
|
import { RecipeVariantProps, cva, cx } from "@styled-system/css";
|
||||||
|
|
||||||
|
import { AnchorHTMLAttributes } from "react";
|
||||||
|
|
||||||
|
const variants = cva({
|
||||||
|
base: { _hover: { color: "gray.800" } },
|
||||||
|
variants: {
|
||||||
|
type: {
|
||||||
|
button: {
|
||||||
|
background: "accent.9",
|
||||||
|
color: "white",
|
||||||
|
p: 2,
|
||||||
|
borderRadius: "md",
|
||||||
|
_hover: {
|
||||||
|
background: "accent.11",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function NavLink({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
type,
|
||||||
|
...props
|
||||||
|
}: RecipeVariantProps<typeof variants> &
|
||||||
|
Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> &
|
||||||
|
LinkProps) {
|
||||||
|
return (
|
||||||
|
<Link className={cx(variants({ type }), className)} {...props}>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue