feat(core) add a help menu with links to docs and community (#4903)

spinnaker · Feb 23, 2018 · 4849bdf · 4849bdf
1 parent e8d3973
commit 4849bdf
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 0 deletions.
diff --git a/app/scripts/modules/core/src/header/SpinnakerHeader.tsx b/app/scripts/modules/core/src/header/SpinnakerHeader.tsx
@@ -5,6 +5,7 @@ import { UIRouterContext } from '@uirouter/react-hybrid';
 
 import { NgReact } from 'core/reactShims';
 import { GlobalSearch } from 'core/search/global/GlobalSearch';
+import { HelpMenu } from 'core/help/HelpMenu';
 
 import './SpinnakerHeader.css';
 
@@ -82,6 +83,7 @@ export class SpinnakerHeader extends React.Component<{}, ISpinnakerHeaderState>
               <UserMenu />
               <GlobalSearch />
               <WhatsNew />
+              <HelpMenu />
             </ul>
           </div>
         }

diff --git a/app/scripts/modules/core/src/help/HelpMenu.less b/app/scripts/modules/core/src/help/HelpMenu.less
@@ -0,0 +1,32 @@
+.help-menu {
+  border: 0;
+
+  .dropdown-toggle,
+  .dropdown-toggle:active {
+    border: 0;
+    font-size: 14px;
+    font-weight: 200;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    border-radius: 0;
+    color: var(--color-white);
+
+    .caret {
+      margin-left: 3px;
+    }
+  }
+
+  .dropdown.open {
+    .dropdown-toggle {
+      background-color: transparent;
+      text-decoration: none;
+      color: var(--color-white);
+      box-shadow: none;
+    }
+  }
+
+  .dropdown-menu {
+    border: 0;
+  }
+}
diff --git a/app/scripts/modules/core/src/help/HelpMenu.tsx b/app/scripts/modules/core/src/help/HelpMenu.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Dropdown, MenuItem, Glyphicon } from 'react-bootstrap';
+
+import './HelpMenu.less';
+
+const DOCS_URL = 'https://spinnaker.io/docs';
+const COMMUNITY_URL = 'https://spinnaker.io/community';
+
+export const HelpMenu = () => {
+  return (
+    <li className="help-menu">
+      <Dropdown id="help-menu-dropdown" pullRight={true}>
+        <Dropdown.Toggle className="hidden-lg" noCaret={true}>
+          <Glyphicon glyph="question-sign" />
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <MenuItem href={DOCS_URL} target="_blank">
+            Docs
+          </MenuItem>
+          <MenuItem divider={true} />
+          <MenuItem href={COMMUNITY_URL} target="_blank">
+            Community Resources
+          </MenuItem>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Dropdown id="help-menu-dropdown-large" pullRight={true}>
+        <Dropdown.Toggle className="hidden-xs hidden-sm hidden-md">
+          Help
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <MenuItem href={DOCS_URL} target="_blank">
+            Docs
+          </MenuItem>
+          <MenuItem href={COMMUNITY_URL} target="_blank">
+            Community Resources
+          </MenuItem>
+        </Dropdown.Menu>
+      </Dropdown>
+    </li>
+  );
+};