Make the tray responsive for mobile

custom/shared/components/Button/Button.js

@@ -33,9 +33,9 @@ export const Button = forwardRef(
 
     const content = (
       <>
-        {IconBefore && <IconBefore />}
+        {IconBefore && <IconBefore style={{ marginRight: '.5em'}}/>}
         {children}
-        {IconAfter && <IconAfter />}
+        {IconAfter && <IconAfter style={{ marginLeft: '.5em'}}/>}
       </>
     );
 

custom/shared/components/Tray/BasicTray.js

@@ -1,21 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { NETWORK_ASIDE } from '@custom/shared/components/Aside/NetworkAside';
 import { PEOPLE_ASIDE } from '@custom/shared/components/Aside/PeopleAside';
+import Button from '@custom/shared/components/Button';
 import { DEVICE_MODAL } from '@custom/shared/components/DeviceSelectModal';
 import { useCallState } from '@custom/shared/contexts/CallProvider';
 import { useMediaDevices } from '@custom/shared/contexts/MediaDeviceProvider';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { useResponsive } from '@custom/shared/hooks/useResponsive';
 import { ReactComponent as IconCameraOff } from '@custom/shared/icons/camera-off-md.svg';
 import { ReactComponent as IconCameraOn } from '@custom/shared/icons/camera-on-md.svg';
 import { ReactComponent as IconLeave } from '@custom/shared/icons/leave-md.svg';
 import { ReactComponent as IconMicOff } from '@custom/shared/icons/mic-off-md.svg';
 import { ReactComponent as IconMicOn } from '@custom/shared/icons/mic-on-md.svg';
+import { ReactComponent as IconMore } from '@custom/shared/icons/more-md.svg';
 import { ReactComponent as IconNetwork } from '@custom/shared/icons/network-md.svg';
 import { ReactComponent as IconPeople } from '@custom/shared/icons/people-md.svg';
 import { ReactComponent as IconSettings } from '@custom/shared/icons/settings-md.svg';
 import { Tray, TrayButton } from './Tray';
 
 export const BasicTray = () => {
+  const responsive = useResponsive();
+  const [showMore, setShowMore] = useState(false);
   const { callObject, leave } = useCallState();
   const { customTrayComponent, openModal, toggleAside } = useUIState();
   const { isCamMuted, isMicMuted } = useMediaDevices();
@@ -31,7 +36,7 @@ export const BasicTray = () => {
   };
 
   return (
-    <Tray>
+    <Tray className="tray">
       <TrayButton
         label="Camera"
         onClick={() => toggleCamera(isCamMuted)}
@@ -46,15 +51,48 @@ export const BasicTray = () => {
       >
         {isMicMuted ? <IconMicOff /> : <IconMicOn />}
       </TrayButton>
-      <TrayButton label="Settings" onClick={() => openModal(DEVICE_MODAL)}>
-        <IconSettings />
-      </TrayButton>
-      <TrayButton label="Network" onClick={() => toggleAside(NETWORK_ASIDE)}>
-        <IconNetwork />
-      </TrayButton>
-      <TrayButton label="People" onClick={() => toggleAside(PEOPLE_ASIDE)}>
-        <IconPeople />
-      </TrayButton>
+      {responsive.isMobile() && showMore && (
+        <div className="more-options">
+          <Button
+            className="translucent"
+            onClick={() => openModal(DEVICE_MODAL)}
+            IconBefore={IconSettings}
+          >
+            Settings
+          </Button>
+          <Button
+            className="translucent"
+            onClick={() => toggleAside(NETWORK_ASIDE)}
+            IconBefore={IconNetwork}
+          >
+            Network
+          </Button>
+          <Button
+            className="translucent"
+            onClick={() => toggleAside(PEOPLE_ASIDE)}
+            IconBefore={IconPeople}
+          >
+            People
+          </Button>
+        </div>
+      )}
+      {!responsive.isMobile() ? (
+        <>
+          <TrayButton label="Settings" onClick={() => openModal(DEVICE_MODAL)}>
+            <IconSettings />
+          </TrayButton>
+          <TrayButton label="Network" onClick={() => toggleAside(NETWORK_ASIDE)}>
+            <IconNetwork />
+          </TrayButton>
+          <TrayButton label="People" onClick={() => toggleAside(PEOPLE_ASIDE)}>
+            <IconPeople />
+          </TrayButton>
+        </>
+      ) : (
+        <TrayButton label="More" onClick={() => setShowMore(!showMore)}>
+          <IconMore />
+        </TrayButton>
+      )}
 
       {customTrayComponent}
 
@@ -63,6 +101,20 @@ export const BasicTray = () => {
       <TrayButton label="Leave" onClick={() => leave()} orange>
         <IconLeave />
       </TrayButton>
+      <style jsx>{`
+        .tray { position: relative };
+        .more-options {
+          background: var(--background);
+          position: absolute;
+          transform: translateX(calc(-50% + 26px));
+          bottom: calc(15% + var(--spacing-xxxs));
+          z-index: 99;
+          padding: var(--spacing-xxxs);
+          border-radius: var(--radius-md);
+          box-shadow: var(--shadow-depth-2);
+        }
+      `}
+      </style>
     </Tray>
   );
 };

custom/shared/hooks/useResponsive.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+
+let responsiveConfig = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+};
+
+export const useResponsive = () => {
+  const [windowSize, setWindowSize] = useState(window.innerWidth);
+
+  const handleChangeWindowSize = () => setWindowSize(window.innerWidth);
+
+  const getResponsiveConfig = (size) => {
+    const responsive = {};
+    Object.keys(responsiveConfig).forEach(config => {
+      responsive[config] = size > responsiveConfig[config];
+    });
+    return responsive;
+  };
+
+  const isMobile = () => {
+    const config = getResponsiveConfig(windowSize);
+    return !config.md && !config.lg && !config.xl;
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleChangeWindowSize);
+
+    return () => {
+      window.removeEventListener('resize', handleChangeWindowSize);
+    };
+  }, []);
+
+  return { config: getResponsiveConfig(windowSize), isMobile };
+};

custom/shared/icons/more-md.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" class="nc-icon-wrapper"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"></path></g></svg>