fix(docz-theme-default): sidebar search

doczjs · Jul 11, 2018 · 8fd77ec · 8fd77ec
1 parent dc3448a
commit 8fd77ec
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 39 deletions.
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Search.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Search.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { SFC } from 'react'
-import { Value } from 'react-powerplug'
 import styled from 'react-emotion'
 import SearchIcon from 'react-feather/dist/icons/search'
 
@@ -42,20 +41,12 @@ interface SearchProps {
 export const Search: SFC<SearchProps> = ({ onSearch, showing }) => (
   <Wrapper showing={showing}>
     <Icon />
-    <Value>
-      {({ value, setValue }: any) => (
-        <Input
-          type="text"
-          value={value}
-          placeholder="Search here..."
-          onChange={ev => {
-            const value = ev.target.value
-
-            setValue(value)
-            onSearch && onSearch(value)
-          }}
-        />
-      )}
-    </Value>
+    <Input
+      type="text"
+      placeholder="Search here..."
+      onChange={ev => {
+        onSearch && onSearch(ev.target.value)
+      }}
+    />
   </Wrapper>
 )
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -93,8 +93,17 @@ const Menus = styled('nav')`
 
   ${p =>
     p.theme.mq({
-      paddingLeft: [10, 20],
-      paddingRight: [10, 20],
+      padding: ['0 10px', '0 20px'],
+    })};
+`
+
+const Empty = styled('div')`
+  flex: 1;
+  opacity: 0.6;
+
+  ${p =>
+    p.theme.mq({
+      padding: ['0 20px', '0 30px'],
     })};
 `
 
@@ -263,27 +272,31 @@ export const Sidebar = () => (
               <LogoText>{title}</LogoText>
             )}
             <Search showing={isDesktop || !on} onSearch={handleSearchDocs} />
-            <Menus>
-              {docsWithoutMenu.map(doc => (
-                <Link
-                  key={doc.id}
-                  to={doc.route}
-                  onClick={handleSidebarToggle}
-                  doc={doc}
-                >
-                  {doc.name}
-                </Link>
-              ))}
-              {menus.map(menu => (
-                <Menu
-                  key={menu}
-                  menu={menu}
-                  docs={fromMenu(menu)}
-                  sidebarToggle={handleSidebarToggle}
-                  collapseAll={Boolean(state.searching)}
-                />
-              ))}
-            </Menus>
+            {docs.length < 1 ? (
+              <Empty>No document find.</Empty>
+            ) : (
+              <Menus>
+                {docsWithoutMenu.map(doc => (
+                  <Link
+                    key={doc.id}
+                    to={doc.route}
+                    onClick={handleSidebarToggle}
+                    doc={doc}
+                  >
+                    {doc.name}
+                  </Link>
+                ))}
+                {menus.map(menu => (
+                  <Menu
+                    key={menu}
+                    menu={menu}
+                    docs={fromMenu(menu)}
+                    sidebarToggle={handleSidebarToggle}
+                    collapseAll={Boolean(state.searching)}
+                  />
+                ))}
+              </Menus>
+            )}
             <Footer>
               Built with
               <FooterLink href="https://docz.site" target="_blank">