sidenav

src/components/SideNav.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import {ReactComponent as Dashboard} from '../assets/dashboard.svg';
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+const layout = css`
+    positon: absolute;
+    width:25%;
+    height:100vh;
+`;
+const linkStyle=css`
+    text-decoration: none;
+`;
+const listStyle=css`
+    list-style: none;
+`;
+const listLinkStyle =css`
+padding: 10px 20px 10px 20px;
+cursor: pointer;
+:hover{
+    border: 1px solid rgba(200,200,200,0.2);    
+    }
+`;
+
+export const SideNavBar = () => {
+    return (
+        <div css={layout}>
+            <div>
+                <ul css={listStyle}>
+                    <li css={listLinkStyle}>
+                        <a href="" css={linkStyle}>
+                            <Dashboard /> Dashboard
+                        </a>
+                    </li>
+                    <li css={listLinkStyle}>
+                        <a href="" css={linkStyle}>Pages
+                        </a>
+                    </li>
+                    <li css={listLinkStyle}>
+                        <a href="" css={linkStyle}>Posts
+                        </a>
+                    </li>
+                    <li css={listLinkStyle}>
+                        <a href="" css={linkStyle}>Themes
+                        </a>
+                    </li>
+                    <li css={listLinkStyle}>
+                        <a href="" css={linkStyle}>Plugins
+                        </a>
+                    </li>
+                    <li css={listLinkStyle}>
+                        <a href="" css={linkStyle}>Settings
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}

src/stories/SideNav.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {SideNavBar} from '../components/SideNav';
+
+export default {
+    title: 'SideNavBar',
+}
+
+export const SideNav =() =>(
+    <SideNavBar></SideNavBar>
+)