add mobile styles

1 files changed, 6 insertions, 2 deletions

diff --git a/pages/index.js b/pages/index.js
index b441362..72f99f4 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,6 +3,7 @@ import React from 'react'
 import useUser from 'hooks/useUser'
 import useSettings from 'hooks/useSettings'
 import useApps from 'hooks/useApps'
+import useMediaQuery from 'hooks/useMediaQuery'
 import {Layout, App, Splash} from 'components'
 import {open} from 'helpers/windowActions'
 import appList from 'configs/appList'
@@ -10,6 +11,7 @@ import appList from 'configs/appList'
 const Home = () => {
   const {t} = useSettings()
   const {apps, setApps} = useApps()
+  const touchDevice = useMediaQuery('(pointer: coarse)');
   const {user} = useUser({
     redirectToLogin: true,
     redirectToVerify: true,
@@ -23,7 +25,7 @@ const Home = () => {
   const handleClick = (e, appProps) => {
     switch (e.detail) {
       case 1:
-        e.currentTarget.focus()
+        touchDevice ? open(appProps, setApps) : e.currentTarget.focus()
         break;
       case 2:
         open(appProps, setApps)
@@ -55,7 +57,9 @@ const Home = () => {
             </div>
           ))
         }
-        {apps && apps.map(app => {
+        {apps && apps.length > 0 && apps.map(app => {
+          if (!app) return null
+
           const AppComponent = appList[app.name].component
 
           return (