Add mobile actions dropdown menu. Closes #2231

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.module.scss

@@ -0,0 +1,15 @@
+.item {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  height: 15px;
+  margin-right: 5px;
+}
+
+.menu {
+  border: none;
+  background-color: transparent;
+  margin: 8px;
+}

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { ActionButtonMenu } from './ActionButtonMenu';
+
+export default {
+  title: 'owncast/Components/Action Buttons/Action Menu',
+  component: ActionButtonMenu,
+  parameters: {},
+} as ComponentMeta<typeof ActionButtonMenu>;
+
+const itemSelected = a => {
+  console.log('itemSelected', a);
+  action(a.title);
+};
+
+const Template: ComponentStory<typeof ActionButtonMenu> = args => (
+  <ActionButtonMenu {...args} externalActionSelected={a => itemSelected(a)} />
+);
+
+const actions = [
+  {
+    url: 'https://owncast.online/docs',
+    title: 'Documentation',
+    description: 'Owncast Documentation',
+    icon: 'https://owncast.online/images/logo.svg',
+    color: '#5232c8',
+    openExternally: false,
+  },
+  {
+    url: 'https://opencollective.com/embed/owncast/donate',
+    title: 'Support Owncast',
+    description: 'Contribute to Owncast',
+    icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
+    color: '#2b4863',
+    openExternally: false,
+  },
+];
+
+export const Example = Template.bind({});
+Example.args = {
+  actions,
+};

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+import { Dropdown, Menu, Space } from 'antd';
+import { DownOutlined, StarOutlined } from '@ant-design/icons';
+import styles from './ActionButtonMenu.module.scss';
+import { ExternalAction } from '../../../interfaces/external-action';
+
+export type ActionButtonMenuProps = {
+  actions: ExternalAction[];
+  externalActionSelected: (action: ExternalAction) => void;
+};
+
+export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
+  actions,
+  externalActionSelected,
+}) => {
+  const onMenuClick = a => {
+    const action = actions.find(x => x.url === a.key);
+    externalActionSelected(action);
+  };
+
+  const items = actions.map(action => ({
+    key: action.url,
+    label: (
+      <span className={styles.item}>
+        {action.icon && <img className={styles.icon} src={action.icon} alt={action.title} />}{' '}
+        {action.title}
+      </span>
+    ),
+  }));
+
+  const menu = <Menu items={items} onClick={onMenuClick} />;
+
+  return (
+    <Dropdown overlay={menu} trigger={['click']} className={styles.menu}>
+      <button type="button" onClick={e => e.preventDefault()}>
+        <Space>
+          <StarOutlined />
+          <DownOutlined />
+        </Space>
+      </button>
+    </Dropdown>
+  );
+};

web/components/ui/Content/Content.tsx

@@ -36,6 +36,7 @@ import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { FollowerCollection } from '../followers/FollowerCollection/FollowerCollection';
 import { ExternalAction } from '../../../interfaces/external-action';
 import { Modal } from '../Modal/Modal';
+import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
 
 const { Content: AntContent } = Layout;
 
@@ -113,6 +114,8 @@ const MobileContent = ({
   messages,
   currentUser,
   showChat,
+  actions,
+  setExternalActionToDisplay,
 }) => {
   if (!currentUser) {
     return null;
@@ -147,16 +150,23 @@ const MobileContent = ({
   const followersTabContent = <FollowerCollection name={name} />;
 
   const items = [
-    { label: 'Chat', key: '1', children: chatContent },
+    showChat && { label: 'Chat', key: '0', children: chatContent },
     { label: 'About', key: '2', children: aboutTabContent },
     { label: 'Followers', key: '3', children: followersTabContent },
   ];
 
   const height = `${useHeight(mobileContentRef)}px`;
 
+  const replacementTabBar = (props, DefaultTabBar) => (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
+      <DefaultTabBar {...props} style={{ width: '80%' }} />
+      <ActionButtonMenu actions={actions} externalActionSelected={setExternalActionToDisplay} />
+    </div>
+  );
+
   return (
     <div className={cn(styles.lowerSectionMobile)} ref={mobileContentRef} style={{ height }}>
-      <Tabs defaultActiveKey="0" items={items} />
+      <Tabs defaultActiveKey="0" items={items} renderTabBar={replacementTabBar} />
     </div>
   );
 };
@@ -293,6 +303,7 @@ export const Content: FC = () => {
               </div>
               <div className={styles.midSection}>
                 <div className={styles.buttonsLogoTitleSection}>
+                  {!isMobile && (
                     <ActionButtonRow>
                       {externalActionButtons}
                       <FollowButton size="small" />
@@ -304,6 +315,7 @@ export const Content: FC = () => {
                         <NotifyButton onClick={() => setShowNotifyPopup(true)} />
                       </NotifyReminderPopup>
                     </ActionButtonRow>
+                  )}
 
                   <Modal
                     title="Notify"
@@ -315,7 +327,7 @@ export const Content: FC = () => {
                   </Modal>
                 </div>
               </div>
-              {isMobile && isChatVisible ? (
+              {isMobile ? (
                 <MobileContent
                   name={name}
                   streamTitle={streamTitle}
@@ -326,6 +338,8 @@ export const Content: FC = () => {
                   messages={messages}
                   currentUser={currentUser}
                   showChat={showChat}
+                  actions={externalActions}
+                  setExternalActionToDisplay={externalActionSelected}
                 />
               ) : (
                 <DesktopContent