feat: Add help dropdown menu

packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx

@@ -9,7 +9,12 @@ import {
   Classes,
   Tooltip,
   Position,
+  MenuItem,
+  Menu,
+  MenuDivider,
 } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+
 import { FormattedMessage as T, Icon, Hint, If } from '@/components';
 
 import DashboardTopbarUser from '@/components/Dashboard/TopbarUser';
@@ -19,9 +24,20 @@ import DashboardBackLink from '@/components/Dashboard/DashboardBackLink';
 import withUniversalSearchActions from '@/containers/UniversalSearch/withUniversalSearchActions';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import withDashboard from '@/containers/Dashboard/withDashboard';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import QuickNewDropdown from '@/containers/QuickNewDropdown/QuickNewDropdown';
-import { DashboardHamburgerButton, DashboardQuickSearchButton } from './_components';
+import {
+  DashboardHamburgerButton,
+  DashboardQuickSearchButton,
+} from './_components';
+
+import { DialogsName } from '@/constants/dialogs';
+import {
+  COMMUNITY_BIGCAPITAL_LINK,
+  DOCS_BIGCAPITAL_LINK,
+} from '@/constants/routes';
+
 import { compose } from '@/utils';
 
 /**
@@ -41,6 +57,9 @@ function DashboardTopbar({
 
   // #withGlobalSearch
   openGlobalSearch,
+
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -112,11 +131,34 @@ function DashboardTopbar({
               />
             </Tooltip>
 
-            <Button
+            <Popover2
-              className={Classes.MINIMAL}
+              content={
-              icon={<Icon icon={'help-24'} iconSize={20} />}
+                <Menu>
-              text={<T id={'help'} />}
+                  <MenuItem
-            />
+                    text={'Documents'}
+                    onClick={() => window.open(DOCS_BIGCAPITAL_LINK)}
+                    labelElement={<Icon icon={'share'} iconSize={16} />}
+                  />
+                  <MenuItem
+                    text={'Community support'}
+                    onClick={() => window.open(COMMUNITY_BIGCAPITAL_LINK)}
+                    labelElement={<Icon icon={'share'} iconSize={16} />}
+                  />
+                  <MenuItem
+                    text={'Keyboard shortcuts'}
+                    onClick={() => openDialog(DialogsName.KeyboardShortcutForm)}
+                  />
+                  <MenuDivider />
+                  <MenuItem text={'Share feedback'} />
+                </Menu>
+              }
+            >
+              <Button
+                className={Classes.MINIMAL}
+                icon={<Icon icon={'help-24'} iconSize={20} />}
+                text={<T id={'help'} />}
+              />
+            </Popover2>
             <NavbarDivider />
           </NavbarGroup>
         </Navbar>
@@ -138,4 +180,5 @@ export default compose(
     pageHint,
   })),
   withDashboardActions,
+  withDialogActions,
 )(DashboardTopbar);

packages/webapp/src/constants/routes.ts

@@ -0,0 +1,2 @@
+export const DOCS_BIGCAPITAL_LINK = 'https://docs.bigcapital.app';
+export const COMMUNITY_BIGCAPITAL_LINK = 'https://community.bigcapital.app';

packages/webapp/src/static/json/icons.tsx

@@ -642,4 +642,10 @@ export default {
     ],
     viewBox: '0 0 16 16',
   },
+  share: {
+    path: [
+      'M10.99 13.99h-9v-9h4.76l2-2H.99c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h11c.55 0 1-.45 1-1V7.24l-2 2v4.75zm4-14h-5c-.55 0-1 .45-1 1s.45 1 1 1h2.59L7.29 7.28a1 1 0 00-.3.71 1.003 1.003 0 001.71.71l5.29-5.29V6c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z'
+    ],
+    viewBox: '0 0 16 16',
+  }
 };