feat(menu): use button component in menu (#263)

* feat(overlay): add overlay component

* feat(overlay): add react portals

* feat(menu): add menu to overlay

src/scripts/components/language-selector/language-selector.styl

@@ -0,0 +1,5 @@
+@require '../../../variables.styl'
+
+.language
+  &:hover, &:focus
+    color: $main

src/scripts/components/language-selector/language-selector.tsx

@@ -1,8 +1,8 @@
 import React, {FunctionComponent} from 'react';
-import {FormattedMessage} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
 import setLanguageAction from '../../actions/set-language';
+import Button from '../button/button';
 
 import {Language} from '../../types/language';
 
@@ -16,9 +16,11 @@ const LanguageSelector: FunctionComponent = () => {
   return (
     <ul>
       {languages.map(language => (
-        <li key={language} onClick={() => setLanguage(language)}>
-          <FormattedMessage id={`language.${language}`} />
-        </li>
+        <Button
+          key={language}
+          onClick={() => setLanguage(language)}
+          label={`language.${language}`}
+        />
       ))}
     </ul>
   );

src/scripts/components/menu/menu.styl

@@ -2,28 +2,18 @@
 
 .menuContainer
   padding: 10px
+  text-align-last: center
+  font-family: Arial, Helvetica, sans-serif
 
-.menuButton
-  border: none
-  background: none
-  color: $textWhite
-  font-size: 1em
-  cursor: pointer
+.logo
+  padding-top: emCalc(20px)
+  fill: $main
 
 .menuList
-  position: absolute
-  top: 0
-  right: 0
-  margin: 0
   padding: 0
-  padding-top: 15%
-  min-width: 250px
   width: 100%
   height: 100%
-  border-radius: 5px
-  background: $black
   list-style: none
-  opacity: 0.9
 
 .menuListItem
   display: flex
@@ -34,20 +24,3 @@
   padding: 10px 15px
   color: $textWhite
   cursor: pointer
-
-  svg
-    padding-right: 15px
-    fill: $textWhite
-
-  a
-    display: flex
-    flex-flow: wrap
-    align-items: center
-    color: $textWhite
-    text-decoration: none
-
-    &:hover, &:focus
-      color: $main
-
-  &:hover, &:focus
-    color: $main

src/scripts/components/menu/menu.tsx

@@ -1,6 +1,4 @@
-import React, {FunctionComponent, useState} from 'react';
-import {Link} from 'react-router-dom';
-import {useIntl, FormattedMessage} from 'react-intl';
+import React, {FunctionComponent} from 'react';
 
 import {PresenterIcon} from '../icons/presenter-icon';
 import {ShowCaseIcon} from '../icons/show-case-icon';
@@ -9,70 +7,59 @@ import {ShareIcon} from '../icons/share-icon';
 import {InfoIcon} from '../icons/info-icon';
 import {ExportIcon} from '../icons/export-icon';
 import LanguageSelector from '../language-selector/language-selector';
+import Button from '../button/button';
+import {CCILogo} from '../icons/cci-logo';
 
 import {MenuItem} from '../../types/menu-item';
 
 import styles from './menu.styl';
 
 const Menu: FunctionComponent = () => {
-  const intl = useIntl();
   const menuItems: MenuItem[] = [
     {
-      id: 'presenter-mode',
-      name: intl.formatMessage({id: 'presenterMode'}),
+      id: 'presenterMode',
       link: '/present',
       icon: PresenterIcon
     },
     {
-      id: 'show-case-mode',
-      name: intl.formatMessage({id: 'showcaseMode'}),
+      id: 'showcaseMode',
       link: '/showcase',
       icon: ShowCaseIcon
     },
     {
       id: 'language',
-      name: intl.formatMessage({id: 'language'}),
       icon: LanguageIcon
     },
-    {id: 'share', name: intl.formatMessage({id: 'share'}), icon: ShareIcon},
-    {id: 'export', name: intl.formatMessage({id: 'export'}), icon: ExportIcon},
-    {id: 'info', name: intl.formatMessage({id: 'info'}), icon: InfoIcon}
+    {id: 'share', icon: ShareIcon},
+    {id: 'export', icon: ExportIcon},
+    {id: 'info', icon: InfoIcon}
   ];
 
-  const [isOpen, setIsOpen] = useState(false);
-  const onButtonClickHandler = () => setIsOpen(!isOpen);
-
   return (
     <div className={styles.menuContainer}>
-      <button
-        onClick={() => onButtonClickHandler()}
-        title={intl.formatMessage({id: 'more'})}
-        className={styles.menuButton}>
-        <FormattedMessage id="more" />
-      </button>
-      {isOpen && (
-        <ul className={styles.menuList} onClick={() => setIsOpen(false)}>
-          {menuItems.map(menuItem => {
-            const Icon = menuItem.icon;
-
-            return (
-              <li className={styles.menuListItem} key={menuItem.id}>
-                {menuItem.link ? (
-                  <Link to={menuItem.link}>
-                    <Icon /> {menuItem.name}
-                  </Link>
-                ) : (
-                  <React.Fragment>
-                    <Icon /> {menuItem.name}
-                  </React.Fragment>
-                )}
-
-                {menuItem.id === 'language' && <LanguageSelector />}
-              </li>
-            );
-          })}
-        </ul>
-      )}
+      <ul className={styles.menuList}>
+        {menuItems.map(menuItem => (
+          <li className={styles.menuListItem} key={menuItem.id}>
+            {menuItem.link ? (
+              <Button
+                label={menuItem.id}
+                link={menuItem.link}
+                icon={menuItem.icon}
+              />
+            ) : (
+              <Button
+                label={menuItem.id}
+                icon={menuItem.icon}
+                onClick={() => console.log('placeholder')}
+              />
+            )}
+            {menuItem.id === 'language' && <LanguageSelector />}
+          </li>
+        ))}
+      </ul>
+      <div className={styles.logo}>
+        <CCILogo />
+      </div>
     </div>
   );
 };

src/scripts/types/menu-item.d.ts

@@ -2,7 +2,6 @@ import {FunctionComponent} from 'react';
 
 export interface MenuItem {
   id: string;
-  name: string;
   link?: string;
   icon: FunctionComponent;
 }