feat(fs.dev): MDX styling

packages/freesewing.shared/components/layouts/default.js

@@ -1,18 +1,64 @@
 import { useState } from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
 // Shared components
-import PrimaryMenu from 'shared/components/navigation/primary'
-//import Breadcrumbs from '@/shared/components/navigation/breadcrumbs'
-import H1 from 'shared/components/elements/h1'
-//import Icon from '@/shared/components/icon'
-//import Button from '@/shared/components/elements/button'
-// Site components
-//import NavigationButtons from '@/site/components/navigation-buttons'
-//import Search from '@/site/components/search'
+import Logo from 'shared/components/logos/freesewing.js'
+import PrimaryNavigation from 'shared/components/navigation/primary'
+import get from 'lodash.get'
 
 const iconSize= 48
 
-const DefaultLayout = props => {
+const PageTitle = ({ app, slug, title }) => {
+  if (title) return <h1>{title}</h1>
+  if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
 
+  return <h1>FIXME: This page has no title</h1>
+}
+
+const Breadcrumbs = ({ app, slug=false, title }) => {
+  if (!slug) return null
+  const crumbs = []
+  const chunks = slug.split('/')
+  for (const i in chunks) {
+    const page = get(app.navigation, chunks.slice(0,i+1))
+    crumbs.push([page.__linktitle, '/'+chunks.slice(0,i+1).join('/'), (i+1 < chunks.length)])
+  }
+
+  return (
+    <ul className="flex flex-row gap-2 font-bold">
+      <li>
+        <Link href="/">
+          <a title="To the homepage">
+            <Logo size={24} />
+          </a>
+        </Link>
+      </li>
+      {crumbs.map(crumb => (
+        <>
+          <li>&raquo;</li>
+          <li>
+            {crumb[2]
+              ?  (
+                <Link href={crumb[1]}>
+                  <a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
+                    {crumb[0]}
+                  </a>
+                </Link>
+              )
+              : crumb[0]
+            }
+          </li>
+        </>
+      ))}
+    </ul>
+  )
+}
+
+
+const DefaultLayout = ({ app, title=false, children=[]}) => {
+
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
   const [leftNav, setLeftNav] = useState(false)
 
   const toggleLeftNav = () => setLeftNav(!leftNav)
@@ -23,7 +69,7 @@ const DefaultLayout = props => {
     min-h-screen
     bg-base-100
     lg:py-8
-    `} data-theme={props.app.theme}>
+    `} data-theme={app.theme}>
       <header className={`
         bg-primary
         p-4
@@ -36,26 +82,32 @@ const DefaultLayout = props => {
         grow flex flex-row
         sm:py-8
         gap-2
-        lg:gap-8
-        xl:gap-18
+        lg:gap-16
+        xl:gap-32
       `}>
         <aside className={`
           fixed top-0 right-0
-          ${props.app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
+          ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
           sm:relative sm:transform-none
           h-screen w-screen
-          bg-base-200
-          sm:bg-base-100
+          bg-base-50
+          sm:bg-base-50
           sm:max-w-[38.2%]
           sm:flex sm:flex-row-reverse
-          overflow-scroll
-          py-8
+          sm:sticky
+          overflow-y-scroll
+          py-4
         `}>
-          <PrimaryMenu app={props.app}/>
+          <PrimaryNavigation app={app} active={slug}/>
         </aside>
-        <section className='max-w-screen-lg'>
-          <H1>{props.title}</H1>
-          {props.children}
+        <section className='max-w-screen-lg lg:pt-8 p-4'>
+          {title && (
+            <>
+              <Breadcrumbs app={app} slug={slug} title={title} />
+              <PageTitle app={app} slug={slug} title={title} />
+            </>
+          )}
+          {children}
         </section>
       </main>
       <footer className="bg-primary p-8">footer</footer>