Some sidebar tweaks

components/Sidebar/README.md

@@ -1,17 +1,22 @@
-Buttons are one of the most basic types of controls for interacting with an application.
+A sidebar goes by many different names (Material UI refers to "Drawer")
 
-#### Button Types
+#### Example
 
 ```jsx
-<Button>Default</Button>
-<Button primary>Primary</Button>
-<Button destructive>Destructive</Button>
-```
-
-#### Button Sizes
-
-```jsx
-<Button small>Small</Button>
-<Button>Normal</Button>
-<Button large>Large</Button>
+    <div style={{position:'relative',height:'40px'}}>
+        <Sidebar
+            main={
+                <>
+                    <Sidebar.AppLogo
+                        icon={'U'}
+                        brand={'Jenkins'}
+                        name={'Design Language'}
+                    />
+                    <Sidebar.Item icon={'B'}>Branches</Sidebar.Item>
+                    <Sidebar.Item icon={'C'}>Commits</Sidebar.Item>
+                </>
+            }
+            footer={<Sidebar.Item icon={'F'}>Footer</Sidebar.Item>}
+        />
+    </div>
 ```

components/Sidebar/Sidebar.scss

@@ -108,10 +108,14 @@
 
 .NavHoverIcon {
     background: transparent;
-    border-radius: $border-radius;
+    border-radius: 4px;
     cursor: pointer;
-    padding: $unit;
+    width: 32px;
+    margin-right: 8px;
     bottom: 0;
+    align-items: center;
+    display: flex;
+
     &:hover {
         background: $nav-hover-color;
     }

components/Sidebar/Sidebar.stories.tsx

@@ -19,7 +19,7 @@ storiesOf('Sidebar', module).add('example', () => {
                     <Sidebar.Item icon={<GitCommit />}>Commits</Sidebar.Item>
                 </>
             }
-            footer={<Sidebar.Item icon={<GitCommit />}>Commits</Sidebar.Item>}
+            footer={<Sidebar.Item icon={<UserIcon size={32} />}>Footer</Sidebar.Item>}
         />
     );
 });

components/Sidebar/SidebarItem.tsx

@@ -8,9 +8,9 @@ export interface SidebarItemProps {
 
 export function SidebarItem({ children, icon, onClick }: SidebarItemProps) {
     return (
-        <div className="NavLink mt3" onClick={onClick}>
+        <div className="NavLink" onClick={onClick}>
             <div className="Nav-Bound">
-                {icon}
+                {icon && <div className="NavHoverIcon">{icon}</div>}
                 <div className="NavLink-Title">{children}</div>
             </div>
         </div>

docs/README.md

@@ -21,3 +21,7 @@ To publish updated styleguidist docs, run:
 ```
 npm run styleguide-build
 ```
+
+## Randon Notes
+
+Is this any good? http://typedoc.org/