settings

1 files changed, 26 insertions, 7 deletions

diff --git a/components/Header.js b/components/Header.js
index a208e70..5279c80 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,10 +1,12 @@
 import styles from 'styles/Main.module.scss'
 import React, {useState} from 'react'
+import {useRouter} from 'next/router'
 import Link from 'next/link'
 import useUser from 'lib/useUser'
 import fetchJson from 'lib/fetchJson'
-import {toggleMin} from 'helpers/windowActions'
-import {useRouter} from 'next/router'
+import {focus, toggleMin} from 'helpers/windowActions'
+import {open} from 'helpers/windowActions'
+import appList from 'helpers/appList'
 
 const Header = ({apps, setApps}) => {
   const [userMenu, setUserMenu] = useState(false);
@@ -20,18 +22,32 @@ const Header = ({apps, setApps}) => {
     router.push('/login')
   }
 
+
+  const handleClick = (app, setApps) => {
+    if (app.min) {
+      toggleMin(app.name, setApps)
+    }
+    focus(app.name, setApps)
+  }
+
   return (
     <header className={styles.header}>
       <nav>
         <ul>
           {
-            apps && apps.map(app => (
+            apps && [...apps].sort((a,b) => a.name > b.name).map(app => (
               <li
                 key={app.name}
-                style={app.min ? {fontWeight: 600} : {}}
-                onClick={() => toggleMin(app.name, apps, setApps)}
+                onClick={() => handleClick(app, setApps)}
               >
-                <span>{app.name}</span>
+                <span
+                  style={{
+                    ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {},
+                    ...app.min ? {color: '#888'} : {}
+                  }}
+                >
+                  {app.name}
+                </span>
               </li>
             ))
           }
@@ -64,7 +80,10 @@ const Header = ({apps, setApps}) => {
                   <div className={styles.headerOverlay} onClick={() => setUserMenu(false)} />
                   <ul className={styles.submenu}>
                     <li>
-                      <span onClick={() => {}}>
+                      <span onClick={() => {
+                        open({appName: 'Settings', ...appList.Settings}, setApps)
+                        setUserMenu()
+                      }}>
                         Settings
                       </span>
                     </li>