feat(dev): Ported dev site to named exports

sites/dev/components/layouts/docs.mjs

@@ -0,0 +1,41 @@
+// Hooks
+import { useRouter } from 'next/router'
+// Components
+import Link from 'next/link'
+import { AsideNavigation } from 'site/components/navigation/aside.mjs'
+import { ThemePicker } from 'shared/components/theme-picker/index.mjs'
+import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs'
+import { getCrumbs } from 'shared/utils.mjs'
+import { HomeIcon } from 'shared/components/icons.mjs'
+
+export const DocsLayout = ({ app, title = false, crumbs = false, children = [] }) => {
+  const router = useRouter()
+  const slug = router.asPath.slice(1)
+  const breadcrumbs = crumbs ? crumbs : getCrumbs(app, slug, title)
+
+  return (
+    <div className="grid grid-cols-4 m-auto justify-center place-items-stretch">
+      <AsideNavigation
+        app={app}
+        slug={slug}
+        before={[
+          <div className="flex flex-row items-center justify-between border-b mb-4" key="home-key">
+            <Link href="/">
+              <HomeIcon />
+            </Link>
+            <ThemePicker app={app} />
+          </div>,
+        ]}
+      />
+      <section className="col-span-4 lg:col-span-3 py-24 px-4 lg:pl-8 bg-base-50">
+        {title && (
+          <div className="xl:pl-4">
+            <Breadcrumbs title={title} crumbs={breadcrumbs} />
+            <h1 className="break-words">{title}</h1>
+          </div>
+        )}
+        {children}
+      </section>
+    </div>
+  )
+}