Feature/issue#90 shellbar

src/App.scss

@@ -23,7 +23,7 @@ $fd-fonts-path: '../node_modules/fiori-fundamentals/dist/fonts/';
     }
 
     .fd-popover {
-        margin-right: 60px;
+        // margin-right: 60px;
     }
 
     .fd-button--grouped {

src/Button/Button.js

@@ -35,7 +35,7 @@ export const Button = props => {
 };
 
 Button.propTypes = {
-  option: PropTypes.oneOf(['', 'emphasized' , 'light']),
+  option: PropTypes.oneOf(['', 'emphasized' , 'light', 'shell']),
   type: PropTypes.oneOf(['', 'standard' , 'positive', 'negative', 'medium']),
   compact: PropTypes.bool,
   glyph: PropTypes.string,

src/Menu/Menu.js

@@ -4,79 +4,69 @@ import { Link } from 'react-router-dom';
 
 // ------------------------------------------- Menu ------------------------------------------
 export const Menu = props => {
-  const { id, addonBefore, children } = props;
-  return (
-    <nav
-      className={`fd-menu${addonBefore ? ' fd-menu--addon-before' : ''}`}
-      id={id}
-    >
-      {children}
-    </nav>
-  );
+    const { id, addonBefore, children } = props;
+    return (
+        <nav className={`fd-menu${addonBefore ? ' fd-menu--addon-before' : ''}`} id={id}>
+            {children}
+        </nav>
+    );
 };
 
 Menu.propTypes = {
-  id: PropTypes.string,
-  addonBefore: PropTypes.bool
+    id: PropTypes.string,
+    addonBefore: PropTypes.bool
 };
 
 // ---------------------------------------- Menu List ----------------------------------------
 export const MenuList = props => {
-  const { children } = props;
-  return <ul className="fd-menu__list">{children}</ul>;
+    const { children } = props;
+    return <ul className="fd-menu__list">{children}</ul>;
 };
 
 // ---------------------------------------- Menu Item ----------------------------------------
 export const MenuItem = props => {
-  const { url, link, isLink, separator, addon, children } = props;
-  return (
-    <React.Fragment>
-      <li>
-        {addon ? (
-          <div className="fd-menu__addon-before">
-            {<span className={'sap-icon--' + addon} />}
-          </div>
-        ) : null}
-        {link ? (
-          <Link
-            to={link}
-            className={`fd-menu__item${isLink ? ' fd-menu__link' : ''}`}
-          >
-            {children}
-          </Link>
-        ) : null}
-        {url ? (
-          <a
-            href={url}
-            className={`fd-menu__item${isLink ? ' fd-menu__link' : ''}`}
-          >
-            {children}
-          </a>
-        ) : null}
-      </li>
-      {separator ? <hr /> : null}
-    </React.Fragment>
-  );
+    const { url, link, isLink, separator, addon, children, onclick } = props;
+    return (
+        <React.Fragment>
+            <li>
+                {addon ? (
+                    <div className="fd-menu__addon-before">{<span className={'sap-icon--' + addon} />}</div>
+                ) : null}
+                {link ? (
+                    <Link to={link} className={`fd-menu__item${isLink ? ' fd-menu__link' : ''}`}>
+                        {children}
+                    </Link>
+                ) : null}
+                {url ? (
+                    <a href={url} className={`fd-menu__item${isLink ? ' fd-menu__link' : ''}`}>
+                        {children}
+                    </a>
+                ) : null}
+                {!url && !link ? <a className="fd-menu__item" onClick={onclick}>{children}</a> : null}
+            </li>
+            {separator ? <hr /> : null}
+        </React.Fragment>
+    );
 };
 
 MenuItem.propTypes = {
-  url: PropTypes.string,
-  separator: PropTypes.bool,
-  addon: PropTypes.string,
-  isLink: PropTypes.bool
+    url: PropTypes.string,
+    separator: PropTypes.bool,
+    addon: PropTypes.string,
+    isLink: PropTypes.bool
 };
 
 // ---------------------------------------- Menu Group ----------------------------------------
 export const MenuGroup = props => {
-  const { title, children } = props;
-  return (
-    <div className="fd-menu__group">
-      <h1 className="fd-menu__title">{title}</h1>
-      {children}
-    </div>
-  );
+    const { title, children } = props;
+    return (
+        <div className="fd-menu__group">
+            <h1 className="fd-menu__title">{title}</h1>
+            {children}
+        </div>
+    );
 };
 
 MenuGroup.propTypes = {
-  title: PropTypes.string
+    title: PropTypes.string
 };

src/Routes.js

@@ -43,6 +43,7 @@ import { ToggleComponent } from './Toggle/Toggle.Component';
 import { TreeComponent } from './Tree/Tree.Component';
 import { TimeComponent } from './Time/Time.Component';
 import { TimePickerComponent } from './TimePicker/TimePicker.Component';
+import { ShellbarComponent } from './Shellbar/Shellbar.Component';
 
 export default class Routes extends Component {
   constructor(props) {
@@ -131,6 +132,11 @@ export default class Routes extends Component {
           name: 'Search Input',
           component: SearchInputComponent
         },
+        {
+          url: '/shellbar',
+          name: 'Shellbar',
+          component: ShellbarComponent
+        },
         {
           url: '/sideNavigation',
           name: 'Side Navigation',