add mobile styles

2 files changed, 80 insertions, 63 deletions

diff --git a/components/App.js b/components/App.js
index b24aead..c539e72 100644
--- a/components/App.js
+++ b/components/App.js
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react'
 import useSettings from 'hooks/useSettings'
 import useMediaQuery from 'hooks/useMediaQuery'
-import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
+import {close, toggleMin, toggleMax, move, focus} from 'helpers/windowActions'
 import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
@@ -11,50 +11,49 @@ const App = ({children, app, setApps}) => {
   const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`);
 
   useEffect(() => {
-    move(app.name, winRef, setApps)
+    move(app, winRef, setApps)
   }, [])
 
   return (
-    <>
-      <div
-        ref={winRef}
-        className={
-          'window'
-          + (app.min ? ' hidden' : '')
-          + (app.max || forceMax ? ' maximized' : '')
-        }
-        style={{
-          height: app.height,
-          width: app.width,
-          ...app.pos.length
-            ? {top: app.pos[1], left: app.pos[0]}
-            : {
-                top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
-                left: `calc(( 100vw - ${app.width} ) / 2)`,
-            }
-        }}
-      >
-        <h2 className='window__title'>{t(app.name)}</h2>
-        <div className='window__content'>{children}</div>
-        <div className='window__title-buttons'>
-          { app.buttons.includes('min') && (
-            <span onClick={() => toggleMin(app.name, setApps)}>
-              <FontAwesomeIcon icon={faArrowUp} />
-            </span>
-          )}
-          { app.buttons.includes('max') && !forceMax && (
-            <span onClick={() => toggleMax(app.name, setApps)}>
-              <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
-            </span>
-          )}
-          { app.buttons.includes('close') && (
-            <span onClick={() => close(app.name, setApps)}>
-              <FontAwesomeIcon icon={faTimes} />
-            </span>
-          )}
-        </div>
+    <div
+      ref={winRef}
+      onClick={() => {focus(app.name, setApps)}}
+      className={
+        'window'
+        + (app.min ? ' hidden' : '')
+        + (app.max || forceMax ? ' maximized' : '')
+      }
+      style={{
+        height: app.height,
+        width: app.width,
+        ...app.pos.length
+          ? {top: app.pos[1], left: app.pos[0]}
+          : {
+              top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
+              left: `calc(( 100vw - ${app.width} ) / 2)`,
+          }
+      }}
+    >
+      <h2 className='window__title'>{t(app.name)}</h2>
+      <div className='window__content'>{children}</div>
+      <div className='window__title-buttons'>
+        { app.buttons.includes('min') && (
+          <span onClick={() => toggleMin(app.name, setApps)}>
+            <FontAwesomeIcon icon={faArrowUp} />
+          </span>
+        )}
+        { app.buttons.includes('max') && !forceMax && (
+          <span onClick={() => toggleMax(app.name, setApps)}>
+            <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
+          </span>
+        )}
+        { app.buttons.includes('close') && (
+          <span onClick={() => close(app.name, setApps)}>
+            <FontAwesomeIcon icon={faTimes} />
+          </span>
+        )}
       </div>
-    </>
+    </div>
   )
 }
 
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>