updates to theme, render out header and footer via the cms

app/components/Layout.jsx

@@ -11,11 +11,17 @@ import { CartDrawer } from '~/components/Cart'
 import { Footer } from '~/components/global/Footer'
 import { Header } from '~/components/global/Header'
 
-export function Layout({children, title}) {
+export function Layout({children, data}) {
  const fetchers = useFetchers()
  const [root] = useMatches()
  const cart = root.data?.cart
 
+ const {
+ promo,
+ footerMenu,
+ headerMenu,
+ } = data
+
  const {isCartOpen, toggleCart} = useStore(
  store => ({
  isCartOpen: store.isCartOpen,
@@ -34,7 +40,7 @@ export function Layout({children, title}) {
 
  return (
  <div className="flex flex-col min-h-screen antialiased font-mono">
- <Header title={''} open={toggleCart} />
+ <Header promo={promo} menu={headerMenu?.menu} open={toggleCart} />
  <main
  role="main"
  id="mainContent"
@@ -47,7 +53,7 @@ export function Layout({children, title}) {
  }}>
  <CartDrawer cart={cart} close={toggleCart} />
  </Drawer>
- <Footer />
+ <Footer menu={footerMenu?.menu} tagline={footerMenu?.tagline} />
  </div>
  );
 }

app/components/global/Footer.jsx

@@ -52,23 +52,30 @@ const MobileMenu = ({ menus }) => {
  )
 }
 
-export function Footer() {
+export function Footer({
+ menu,
+ tagline,
+}) {
  const date = new Date
  return (
  <>
  <footer className='p-5 py-8 800:p-[62px] 1200:px-[100px] bg-primary-green text-black'>
  <div className=''>
  <div className='800:grid 800:grid-cols-12 800:gap-5'>
- <div className='800:hidden'>
+ {/* <div className='800:hidden'>
  <MobileMenu menus={menus} />
- </div>
+ </div> */}
  <div className='hidden 800:col-span-9 1200:col-span-9 800:flex'>
- {menus?.map(menu => (
- <div className='hidden 800:block col-span-6 800:w-full' key={menu.name}>
- <h5 className='uppercase font-600 font-sans text-sans-15 mb-5'>{menu.title}</h5>
- {menu.items?.map(item => (
- <Link className='block pb-1' key={item.name} to={item.route}>{item.title}</Link>
- ))}
+ {menu?.map(singleMenu => (
+ <div className='hidden 800:block col-span-6 800:w-full' key={singleMenu._key}>
+ <h5 className='uppercase font-600 font-sans text-sans-15 mb-5'>{singleMenu.title}</h5>
+ {singleMenu.links?.map(item => {
+ return (
+ <Link className='block pb-1' key={item._key} to={item.slug}>
+ {item.title ? item.title : item.productName ? item.productName : 'Unnamed Link'}
+ </Link>
+ )}
+ )}
  </div>
  ))}
  </div>
@@ -85,7 +92,11 @@ export function Footer() {
  </div>
  </div>
  <div>
- <div className='text-[10vw] leading-[100%] my-10 800:mt-20'>Building Modular Commerce</div>
+ {tagline && (
+ <div className='text-[10vw] leading-[100%] my-10 800:mt-20'>
+ {tagline}
+ </div>
+ )}
  </div>
  </footer>
  <div className='bg-black text-primary-green p-5 text-center text-primary-grey'>

app/components/global/Header.jsx

@@ -5,25 +5,62 @@ import { Link, useFetchers, Await, useMatches } from '@remix-run/react'
 
 import { CartHeader } from '~/components/Cart'
 
-export function Header({ title, open }) {
+import { Menu } from '@headlessui/react'
+
+function HeaderMenu({
+ menu
+}) {
+ return (
+ <div className='relative'>
+ <Menu>
+ <Menu.Button>Menu</Menu.Button>
+ <Menu.Items className='absolute top-[30px] left-0 bg-white p-2 rounded-[4px]'>
+ {menu?.map(item => {
+ switch(item._type) {
+ case 'link':
+ return (
+ <a href={item.url} target={item.openInNewWindow ? '_blank': ''}>
+ {item.title}
+ </a> 
+ )
+ case 'productLink':
+ return (
+ <Menu.Item key={item._key}>
+ <Link className='block pb-1' to={item.slug}>
+ {item.title ? item.title : item.productName ? item.productName : 'Unnamed Link'}
+ </Link>
+ </Menu.Item>
+ )
+ default: 
+ return (<span />)
+ }
+ })}
+ </Menu.Items>
+ </Menu>
+ </div>
+ )
+}
+
+export function Header({ promo, menu, open }) {
  const [root] = useMatches()
  const cart = root.data?.cart
  // const cartOpen = root.data?.cartOpen
-
+ console.log('header menu', menu)
  return (
  <>
  <header
  role="banner"
  className={`h-[80px] fixed z-40 w-full top-0`}
  >
  <div className='w-full bg-primary-green text-black text-center p-2'>
- <span>Promo Bar</span>
+ <span>{promo}</span>
  </div>
  <div className="grid px-4 800:px-8 grid-cols-4 gap-12 w-full justify-between items-center">
- <a className="font-600 col-span-1 800:text-48" href="/">
+ {/* <a className="font-600 col-span-1 800:text-48" href="/">
  Menu
- </a>
- <div className='col-span-2 text-center'>Luggo</div>
+ </a> */}
+ <HeaderMenu menu={menu} />
+ <a href="/" className='col-span-2 text-center'>Luggo</a>
  <div className='col-span-1 text-right'>
  <CartHeader cart={cart} open={open} />
  </div>

app/queries/sanity.js

@@ -1,5 +1,49 @@
 import groq from 'groq'
 
+
+export const link = groq`{
+ _key,
+ _type,
+ openInNewWindow,
+ title,
+ url,
+}`;
+
+export const pageLink = groq`{
+ _key,
+ _type,
+ openInNewWindow,
+ title,
+ 'pageName': page->title,
+ 'slug': page->slug.current,
+}`;
+
+export const productLink = groq`{
+ _key,
+ _type,
+ openInNewWindow,
+ title,
+ 'productName': product->store.title,
+ 'slug': 'products/' + product->store.slug.current,
+}`;
+
+export const collectionLink = groq`{
+ _key,
+ _type,
+ openInNewWindow,
+ title,
+ 'collectionName': collection->store.title,
+ 'slug': collection->store.slug.current,
+}`;
+
+
+const cta = groq`{
+ ...,
+ _type == 'link' => ${link},
+ _type == 'pageLink' => ${pageLink},
+ _type == 'productLink' => ${productLink},
+ _type == 'collectionLink' => ${collectionLink}
+}`;
 const richText = groq`
  ...,
  markDefs[] {
@@ -291,4 +335,21 @@ export const QUERY_HOME = groq`
  }
  }[0]
 `
-
+export const LAYOUT_QUERY = groq`
+ *[_type == 'theme' &&
+ launchDate <= now() &&
+ !(_id in path("drafts.**"))] {
+ promo,
+ headerMenu-> {
+ ...,
+ menu[] ${cta}
+ },
+ footerMenu-> {
+ ...,
+ menu[] {
+ ...,
+ links[] ${cta}
+ }
+ }
+ }[0]
+`

app/root.jsx

@@ -15,6 +15,7 @@ import { ExternalScripts } from 'remix-utils'
 
 import {defer} from '@shopify/remix-oxygen';
 import {CART_QUERY} from '~/queries/cart';
+import {LAYOUT_QUERY} from '~/queries/sanity';
 
 import { Seo } from '@shopify/hydrogen'
 import { ShopifyProvider } from '@shopify/hydrogen-react'
@@ -81,7 +82,7 @@ export async function loader({context}) {
  return defer({
  cart: cartId ? getCart(context, cartId) : undefined,
  cartOpen: cartOpen || false,
- layout: await context.storefront.query(LAYOUT_QUERY),
+ layout: await context.sanity.fetch(LAYOUT_QUERY),
  });
 }
 
@@ -100,7 +101,9 @@ export default function App() {
  console.log(pageAnalytics)
  }, [location])
 
- const {name} = data.layout.shop;
+ const {promo} = data.layout;
+
+ console.log('layout', data.layout)
 
  return (
  <ShopifyProvider {...shopifyConfig}>
@@ -114,7 +117,7 @@ export default function App() {
  <link href="https://fonts.googleapis.com/css2?family=Martian+Mono:wght@300&display=swap" rel="stylesheet"></link>
  </head>
  <body>
- <Layout title={name}>
+ <Layout data={data.layout}>
  <Outlet />
  </Layout>
  <ScrollRestoration />
@@ -126,13 +129,4 @@ export default function App() {
  );
 }
 
-const LAYOUT_QUERY = `#graphql
- query layout {
- shop {
- name
- description
- }
- }
-`;
-
 

app/styles/app.css

@@ -1121,6 +1121,9 @@ select {
 .top-0 {
  top: 0px;
 }
+.top-\[30px\] {
+ top: 30px;
+}
 .z-10 {
  z-index: 10;
 }
@@ -1506,6 +1509,9 @@ select {
 .rounded-sm {
  border-radius: 0.125rem;
 }
+.rounded-\[4px\] {
+ border-radius: 4px;
+}
 .border {
  border-width: 1px;
 }
@@ -1823,6 +1829,9 @@ select {
 .opacity-60 {
  opacity: 0.6;
 }
+.opacity-75 {
+ opacity: 0.75;
+}
 .outline {
  outline-style: solid;
 }