From 61ae567b246c72017357e8e0f19970bc3f719417 Mon Sep 17 00:00:00 2001
From: Brent Jackson <jxnblk@gmail.com>
Date: Wed, 20 Jun 2018 17:15:54 -0400
Subject: [PATCH] Add basic 404

---
 README.md              |  4 ++--
 docs/404.md            |  2 ++
 docs/_app.js           |  1 +
 docs/examples/index.js |  5 +----
 src/SidebarLayout.js   | 13 +++++++++++--
 src/entry.js           | 17 +++--------------
 6 files changed, 20 insertions(+), 22 deletions(-)
 create mode 100644 docs/404.md

diff --git a/README.md b/README.md
index 53afbdf..b802a05 100644
--- a/README.md
+++ b/README.md
@@ -370,8 +370,8 @@ See the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config)
 
 - [ ] changelog/docs
 
-- [ ] 404 in SidebarLayout
-- [ ] 404s generally
+- [ ] static 404 output
+- [x] 404
 - [x] Sidebar minHeight/pagination
 - [x] Sidebar hidePagination option
 - [x] bug: route.props from defaultProps
diff --git a/docs/404.md b/docs/404.md
new file mode 100644
index 0000000..598dbb8
--- /dev/null
+++ b/docs/404.md
@@ -0,0 +1,2 @@
+
+# Page not found
diff --git a/docs/_app.js b/docs/_app.js
index f14ef0e..ced6750 100644
--- a/docs/_app.js
+++ b/docs/_app.js
@@ -26,6 +26,7 @@ export default class App extends React.Component {
 
     // built-in layout test
     if (true) {
+      // const logo = <div style={{ width: 32, height: 32, backgroundColor: 'tomato' }} />
       return (
         <ScopeProvider scope={scope}>
           <SidebarLayout {...this.props} />
diff --git a/docs/examples/index.js b/docs/examples/index.js
index df53d03..19fcd81 100644
--- a/docs/examples/index.js
+++ b/docs/examples/index.js
@@ -1,4 +1 @@
-import React from 'react'
-import { Library } from '../../components'
-
-export default Library
+export { Library as default } from '../../components'
diff --git a/src/SidebarLayout.js b/src/SidebarLayout.js
index fe473c7..4f39a36 100644
--- a/src/SidebarLayout.js
+++ b/src/SidebarLayout.js
@@ -142,12 +142,14 @@ const format = str => upperFirst(unhyphenate(str))
 
 const NavBar = ({
   title,
+  logo,
   focus,
   update,
 }) =>
   <Toolbar
     color='inherit'
     bg='transparent'>
+    {logo}
     <Heading
       px={2}
       fontSize={1}>
@@ -211,7 +213,11 @@ export const Pagination = ({ previous, next }) =>
     )}
   </Flex>
 
-const MobileNav = ({ title, update, }) =>
+const MobileNav = ({
+  title,
+  logo,
+  update
+}) =>
   <MobileOnly>
     <Toolbar px={0} color='inherit' bg='transparent'>
       <ButtonTransparent
@@ -221,7 +227,7 @@ const MobileNav = ({ title, update, }) =>
         mr='auto'
         title='Toggle Menu'
         onClick={e => update(toggle('menu'))}>
-        <MenuIcon />
+        {logo || <MenuIcon />}
       </ButtonTransparent>
       <Heading fontSize={1}>
         {title}
@@ -253,6 +259,7 @@ export default class Layout extends React.Component {
       route,
       location,
       title = 'x0',
+      logo,
       // theme,
       // color,
     } = this.props
@@ -273,6 +280,7 @@ export default class Layout extends React.Component {
       <React.Fragment>
         <MobileNav
           title={title}
+          logo={logo}
           update={update}
         />
 
@@ -283,6 +291,7 @@ export default class Layout extends React.Component {
             onClick={e => update(close)}>
             <Nav
               title={title}
+              logo={logo}
               routes={routes}
               update={update}
             />
diff --git a/src/entry.js b/src/entry.js
index 2cb2c85..d148e85 100644
--- a/src/entry.js
+++ b/src/entry.js
@@ -35,26 +35,18 @@ const getComponents = req => req.keys()
     module: req(key),
     Component: req(key).default || req(key),
   }))
+  .filter(component => !/404/.test(component.name))
   .filter(component => typeof component.Component === 'function')
 
 const initialComponents = getComponents(req)
 
 const DefaultApp = props => props.children
-const xDefaultApp = ({ children, routes }) => (
-  <Switch>
-    {children}
-    <Route render={props => (
-      <FileList
-        {...props}
-        routes={routes}
-      />
-    )} />
-  </Switch>
-)
 
 const Router = IS_CLIENT ? BrowserRouter : StaticRouter
 const appPath = req.keys().find(key => key === './_app.js')
 const App = appPath ? (req(appPath).default || req(appPath)) : DefaultApp
+const notFoundPath = req.keys().find(key => /404/.test(key))
+const NotFound = notFoundPath ? (req(notFoundPath).default) : FileList
 
 export const getRoutes = async (components = initialComponents) => {
   const promises = await components.map(async ({
@@ -127,9 +119,6 @@ export default class Root extends React.Component {
       path = '/'
     } = this.props
 
-    // add customization options
-    const NotFound = FileList
-
     const render = appProps => (
       <Switch>
         {routes.map(({ Component, ...route }) => (