1 files changed, 40 insertions, 22 deletions

diff --git a/components/Header.js b/components/Header.js
index 9ff3d75..83f0ff9 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -5,12 +5,15 @@ import Link from 'next/link'
 import useUser from 'hooks/useUser'
 import fetchJson from 'helpers/fetchJson'
 import {focus, toggleMin} from 'helpers/windowActions'
-import {open} from 'helpers/windowActions'
+import {open, close} from 'helpers/windowActions'
 import appList from 'configs/appList'
 import useSettings from 'hooks/useSettings'
+import {faTimes} from '@fortawesome/free-solid-svg-icons'
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
 const Header = ({apps, setApps}) => {
-  const [userMenu, setUserMenu] = useState(false);
+  const [userMenu, setUserMenu] = useState(false)
+  const [showApps, setShowApps] = useState(false)
   const {user, mutateUser} = useUser()
   const {t} = useSettings()
   const router = useRouter()
@@ -24,7 +27,6 @@ const Header = ({apps, setApps}) => {
     router.push('/login')
   }
 
-
   const handleClick = (app, setApps) => {
     if (app.min) {
       toggleMin(app.name, setApps)
@@ -35,25 +37,41 @@ const Header = ({apps, setApps}) => {
   return (
     <header className={styles.header}>
       <nav>
-        <ul>
-          {
-            apps && [...apps].sort((a,b) => a.name > b.name).map(app => (
-              <li
-                key={app.name}
-                onClick={() => handleClick(app, setApps)}
-              >
-                <span
-                  style={{
-                    ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {},
-                    ...app.min ? {color: '#888'} : {}
-                  }}
-                >
-                  {t(app.name)}
-                </span>
-              </li>
-            ))
-          }
-        </ul>
+        <div>
+          <span onClick={() => setShowApps(s => !s)} className='mobile-only'>
+            {apps && apps.length > 0 && apps[apps.length-1]?.name}
+            {apps && apps.length > 1 ? (' (' + (apps.length) + ')') : ''}
+          </span>
+          <ul className={showApps ? styles.showMobileAppList : 'desktop-only'}>
+            <li className="mobile-only">{t('open_apps')}</li>
+            {
+              apps && [...apps].sort((a,b) => a.name > b.name ? 1 : -1).map(app => {
+                if (!app) return null
+                return (
+                  <li
+                    key={app.name}
+                    onClick={() => handleClick(app, setApps)}
+                  >
+                    <span
+                      style={{
+                        ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {},
+                        ...app.min ? {color: '#888'} : {}
+                      }}
+                    >
+                      {t(app.name)}
+                      <span className='mobile-only' onClick={() => close(app.name, setApps)}>
+                        <FontAwesomeIcon icon={faTimes} />
+                      </span>
+                    </span>
+                  </li>
+                )
+              })
+            }
+            <li className="mobile-only">
+              <span onClick={() => setShowApps(false)} className='window__button'>{t('close')}</span>
+            </li>
+          </ul>
+        </div>
         <ul>
           {!user?.isLoggedIn && (
             <li>