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