first commit

examples/cms-payload/components/Header/MobileMenuModal.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Modal } from "@faceless-ui/modal";
+import { HeaderBar } from ".";
+import { MainMenu } from "../../payload-types";
+import { Gutter } from "../Gutter";
+import { CMSLink } from "../Link";
+
+import classes from "./mobileMenuModal.module.scss";
+
+type Props = {
+  navItems: MainMenu["navItems"];
+};
+
+export const slug = "menu-modal";
+
+export const MobileMenuModal: React.FC<Props> = ({ navItems }) => {
+  return (
+    <Modal slug={slug} className={classes.mobileMenuModal}>
+      <HeaderBar />
+
+      <Gutter>
+        <div className={classes.mobileMenuItems}>
+          {navItems.map(({ link }, i) => {
+            return <CMSLink className={classes.menuItem} key={i} {...link} />;
+          })}
+        </div>
+      </Gutter>
+    </Modal>
+  );
+};

examples/cms-payload/components/Header/index.module.scss

@@ -0,0 +1,36 @@
+@use "../../css/queries.scss" as *;
+
+.header {
+  padding: var(--base) 0;
+  z-index: var(--header-z-index);
+}
+
+.wrap {
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav {
+  a {
+    text-decoration: none;
+    margin-left: var(--base);
+  }
+
+  @include mid-break {
+    display: none;
+  }
+}
+
+.mobileMenuToggler {
+  all: unset;
+  cursor: pointer;
+  display: none;
+
+  &[aria-expanded="true"] {
+    transform: rotate(-25deg);
+  }
+
+  @include mid-break {
+    display: block;
+  }
+}

examples/cms-payload/components/Header/index.tsx

@@ -0,0 +1,53 @@
+import { ModalToggler } from "@faceless-ui/modal";
+import Link from "next/link";
+import React from "react";
+import { MainMenu } from "../../payload-types";
+import { Gutter } from "../Gutter";
+import { MenuIcon } from "../icons/Menu";
+import { CMSLink } from "../Link";
+import { Logo } from "../Logo";
+import { MobileMenuModal, slug as menuModalSlug } from "./MobileMenuModal";
+
+import classes from "./index.module.scss";
+
+type HeaderBarProps = {
+  children?: React.ReactNode;
+};
+export const HeaderBar: React.FC<HeaderBarProps> = ({ children }) => {
+  return (
+    <header className={classes.header}>
+      <Gutter className={classes.wrap}>
+        <Link href="/">
+          <Logo />
+        </Link>
+
+        {children}
+
+        <ModalToggler
+          slug={menuModalSlug}
+          className={classes.mobileMenuToggler}
+        >
+          <MenuIcon />
+        </ModalToggler>
+      </Gutter>
+    </header>
+  );
+};
+
+export const Header: React.FC<{ mainMenu: MainMenu }> = ({ mainMenu }) => {
+  const navItems = mainMenu?.navItems || [];
+
+  return (
+    <>
+      <HeaderBar>
+        <nav className={classes.nav}>
+          {navItems.map(({ link }, i) => {
+            return <CMSLink key={i} {...link} />;
+          })}
+        </nav>
+      </HeaderBar>
+
+      <MobileMenuModal navItems={navItems} />
+    </>
+  );
+};

examples/cms-payload/components/Header/mobileMenuModal.module.scss

@@ -0,0 +1,31 @@
+@use "../../css/common.scss" as *;
+
+.mobileMenuModal {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0;
+  opacity: 1;
+  display: none;
+
+  @include mid-break {
+    display: block;
+  }
+}
+
+.contentContainer {
+  padding: 20px;
+}
+
+.mobileMenuItems {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-top: 30px;
+}
+
+.menuItem {
+  @extend %h4;
+  margin-top: 0;
+}