feat(docz-theme-default): add sidebar footer

doczjs · May 26, 2018 · ffc4b18 · ffc4b18
1 parent 1150373
commit ffc4b18
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 9 deletions.
diff --git a/packages/docz-theme-default/librc.js b/packages/docz-theme-default/librc.js
@@ -0,0 +1,5 @@
+const svg = require('rollup-plugin-svg')
+
+module.exports = {
+  plugins: [svg()],
+}
diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -44,6 +44,7 @@
     "@babel/preset-react": "^7.0.0-beta.49",
     "@types/classnames": "^2.2.3",
     "@types/prismjs": "^1.9.0",
-    "babel-plugin-emotion": "^9.1.0"
+    "babel-plugin-emotion": "^9.1.0",
+    "rollup-plugin-svg": "^1.0.1"
   }
 }
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -3,8 +3,11 @@ import { Docs, Link, Entry, ThemeConfig } from 'docz'
 import styled from 'react-emotion'
 
 import { Menu, isActive } from './Menu'
+import logo from '../../../images/docz.svg'
 
 const Wrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
   height: 100%;
   background: ${p => p.theme.colors.grayLight};
   ${p => p.theme.styles.sidebar};
@@ -60,6 +63,25 @@ const LogoText = styled('h1')`
   }
 `
 
+const Menus = styled('nav')`
+  flex: 1;
+`
+
+const Footer = styled('div')`
+  padding: 10px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: ${p => p.theme.colors.grayDark};
+  border-top: 1px dashed ${p => p.theme.colors.gray};
+
+  a {
+    padding: 0;
+    margin-left: 5px;
+  }
+`
+
 export const Sidebar = () => (
   <Docs>
     {({ docs, menus }) => {
@@ -77,14 +99,22 @@ export const Sidebar = () => (
               )
             }
           </ThemeConfig>
-          {docsWithoutMenu.map(doc => (
-            <Link key={doc.id} to={doc.slug} isActive={isActive}>
-              {doc.name}
-            </Link>
-          ))}
-          {menus.map(menu => (
-            <Menu key={menu} menu={menu} docs={fromMenu(menu)} />
-          ))}
+          <Menus>
+            {docsWithoutMenu.map(doc => (
+              <Link key={doc.id} to={doc.slug} isActive={isActive}>
+                {doc.name}
+              </Link>
+            ))}
+            {menus.map(menu => (
+              <Menu key={menu} menu={menu} docs={fromMenu(menu)} />
+            ))}
+          </Menus>
+          <Footer>
+            Built with
+            <a href="#" target="_blank">
+              <img src={logo} width={40} alt="Docz" />
+            </a>
+          </Footer>
         </Wrapper>
       )
     }}