add mobile styles

16 files changed, 378 insertions, 157 deletions

diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index 11aed5b..eeeab8f 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -15,7 +15,9 @@ const Export = ({setAction}) => {
   return (
     <section>
       <div className='window__submenu'>
-        <div onClick={() => {setAction('')}}>{t('back')}</div>
+        <div>
+          <div onClick={() => {setAction('')}}>{t('back')}</div>
+        </div>
       </div>
       <div className={`window__scroll ${styles.export}`}>
         <h3>{t('notes_click_to_export')}</h3>
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 5039061..238e305 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -12,6 +12,7 @@ const List = () => {
   const [fetchedNote, setFetchedNote] = useState()
   const [action, setAction] = useState('')
   const [loading, setLoading] = useState(false)
+  const [showSort, setShowSort] = useState(false)
   const {notes, error} = useNotes()
   const [sortedBy, sortBy, sortFn] = useSort(3)
   const {t} = useSettings()
@@ -34,36 +35,47 @@ const List = () => {
     action === '' ? (
       <>
         <div className='window__submenu'>
-          <div onClick={() => setAction('addNote')}>{t('notes_new')}</div>
-          <div onClick={() => setAction('importNotes')}>{t('import')}</div>
-          <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
+          <div>
+            <div onClick={() => setAction('addNote')}>{t('notes_new')}</div>
+            <div className='mobile-only' onClick={() => {setShowSort(s => !s)}}>{t('sort')}</div>
+            <div onClick={() => setAction('importNotes')}>{t('import')}</div>
+            <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
+          </div>
+        </div>
+        <div className='window__scroll'>
+          <table className={styles.notesList}>
+            <thead className={showSort ? styles.mobileSort : 'desktop-only'}>
+              <tr className="mobile-only">
+                <th>{t('sort_by')}</th>
+              </tr>
+              <tr>
+                <th onClick={() => sortBy(1)}>{t('title')} {sortedBy(1)}</th>
+                <th onClick={() => sortBy(2)}>{t('created')} {sortedBy(2)}</th>
+                <th onClick={() => sortBy(3)}>{t('modified')} {sortedBy(3)}</th>
+              </tr>
+              <tr className='mobile-only'>
+                <td className='window__button' onClick={() => setShowSort(false)}>{t('close')}</td>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                notes.length > 0
+                  ? (notes.sort(sortFn).map(note => (
+                    <ListItem
+                      key={note._id}
+                      note={note}
+                      setAction={setAction}
+                      setFetchedNote={setFetchedNote}
+                      setLoading={setLoading}
+                    />
+                  ))) : (
+                    <tr>
+                      <td>{t('notes_list_empty')}</td>
+                    </tr>
+                  )}
+            </tbody>
+          </table>
         </div>
-        <table className={styles.notesList}>
-          <thead>
-            <tr>
-              <th onClick={() => sortBy(1)}>{t('title')} {sortedBy(1)}</th>
-              <th onClick={() => sortBy(2)}>{t('created')} {sortedBy(2)}</th>
-              <th onClick={() => sortBy(3)}>{t('modified')} {sortedBy(3)}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {
-              notes.length > 0
-                ? (notes.sort(sortFn).map(note => (
-                  <ListItem
-                    key={note._id}
-                    note={note}
-                    setAction={setAction}
-                    setFetchedNote={setFetchedNote}
-                    setLoading={setLoading}
-                  />
-                ))) : (
-                  <tr>
-                    <td>{t('notes_list_empty')}</td>
-                  </tr>
-                )}
-          </tbody>
-        </table>
       </>
     ) : (
       <Actions
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index 4abefd3..2b1e832 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -42,8 +42,14 @@ const ListItem = ({note, setAction, setFetchedNote, setLoading}) => {
           <FontAwesomeIcon icon={faTrash} />
         </span>
       </td>
-      <td>{datestring(note.created_at)}</td>
-      <td>{datestring(note.updated_at)}</td>
+      <td>
+        <span className='mobile-only'>{t('created')}:</span>
+        {datestring(note.created_at)}
+      </td>
+      <td>
+        <span className='mobile-only'>{t('modified')}:</span>
+        {datestring(note.updated_at)}
+      </td>
     </tr>
   )
 }
diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
index ccaf343..b92c7c7 100644
--- a/apps/Notes/components/NoteView.js
+++ b/apps/Notes/components/NoteView.js
@@ -23,11 +23,13 @@ const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
   return (
     <section className={styles.noteView}>
       <div className='window__submenu'>
-        <div onClick={() => {setFetchedNote(); setAction('')}}>{t('back')}</div>
-        <div onClick={() => copyToClipboard(content, t, setPopup)}>{t('copy')}</div>
-        <div onClick={() => {setAction('editNote')}}>{t('edit')}</div>
-        <div onClick={() => exportNote(fetchedNote)}>{t('export')}</div>
-        <div onClick={e => {removeNote(e, _id, mutateNotes, t, setPopup, setAction)}}>{t('remove')}</div>
+        <div>
+          <div onClick={() => {setFetchedNote(); setAction('')}}>{t('back')}</div>
+          <div onClick={() => copyToClipboard(content, t, setPopup)}>{t('copy')}</div>
+          <div onClick={() => {setAction('editNote')}}>{t('edit')}</div>
+          <div onClick={() => exportNote(fetchedNote)}>{t('export')}</div>
+          <div onClick={e => {removeNote(e, _id, mutateNotes, t, setPopup, setAction)}}>{t('remove')}</div>
+        </div>
       </div>
 
       <div className='window__scroll'>
diff --git a/apps/Notes/styles/_listItem.scss b/apps/Notes/styles/_listItem.scss
index 5e7376f..fcee9aa 100644
--- a/apps/Notes/styles/_listItem.scss
+++ b/apps/Notes/styles/_listItem.scss
@@ -23,24 +23,34 @@
         opacity: 0;
         font-size: 80%;
         transition: .3s opacity linear .3s;
+
+        @media(max-width: 40em) {
+          display: none;
+        }
       }
     }
+
+    &:nth-of-type(n+2) span {
+      padding-right: .5em;
+    }
   }
 
-  &:hover {
-    background: var(--color-window-menu-alt);
-    border-radius: .5em;
-    // cursor: pointer;
+  @media(hover: hover) {
+    &:hover {
+      background: var(--color-window-menu-alt);
+      border-radius: .5em;
+      // cursor: pointer;
 
-    & > td:first-of-type > span:nth-child(n+2){
-      color: var(--color-window-buttons);
-      visibility: visible;
-      opacity: 1;
+      & > td:first-of-type > span:nth-child(n+2){
+        color: var(--color-window-buttons);
+        visibility: visible;
+        opacity: 1;
+      }
     }
-  }
 
-  & > td:first-of-type > span:nth-child(n+2):hover {
-    color: var(--color-text-alt);
-    background-color: var(--color-glass);
+    & > td:first-of-type > span:nth-child(n+2):hover {
+      color: var(--color-text-alt);
+      background-color: var(--color-glass);
+    }
   }
 }
diff --git a/apps/Notes/styles/_noteView.scss b/apps/Notes/styles/_noteView.scss
index cf6a080..63e3fa3 100644
--- a/apps/Notes/styles/_noteView.scss
+++ b/apps/Notes/styles/_noteView.scss
@@ -4,7 +4,6 @@
     to {opacity: 1;}
   }
 
-  padding: 1rem;
   position: absolute;
   top: 0;
   right: 0;
@@ -15,13 +14,12 @@
   h2 {
     font-size: 1.25em;
     font-weight: 600;
-    padding: 1rem;
     user-select: text;
   }
 
   p {
+    padding-top: 1em;
     line-height: 1.33;
-    padding: 0 1rem 1rem;
     white-space: pre-line;
     user-select: text;
   }
diff --git a/apps/Notes/styles/_notesList.scss b/apps/Notes/styles/_notesList.scss
index f55757f..4580d62 100644
--- a/apps/Notes/styles/_notesList.scss
+++ b/apps/Notes/styles/_notesList.scss
@@ -40,4 +40,75 @@
       animation: fade-in .3s;
     }
   }
+
+  @media(max-width: 40em) {
+    thead {
+      display: flex;
+
+      tr:first-of-type {
+        flex-shrink: 1;
+      }
+    }
+
+    tr {
+      flex-direction: column;
+    }
+
+    tbody {
+      tr {
+        padding-bottom: 1em;
+      }
+
+      td:first-of-type {
+        font-weight: 600;
+      }
+
+      td:nth-of-type(n+2) {
+        font-size: .8em;
+        padding-top: .5em;
+        color: var(--color-decor);
+      }
+    }
+  }
+}
+
+.mobileSort {
+  @media(max-width: 40em) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color-window-popup);
+    border-radius: .5em;
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
+    padding: 1.5em;
+    width: 15em;
+
+    tr:nth-of-type(1) > th {
+      font-weight: normal;
+    }
+
+    tr:nth-of-type(2) {
+      padding-left: 1.5em;
+
+      th {
+        padding: .75em;
+
+        svg {
+          margin-left: .5em;
+        }
+      }
+    }
+
+    tr:nth-of-type(3) {
+      text-align: center;
+
+      & > td {
+        display: inline-block;
+      }
+    }
+  }
 }
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>
diff --git a/configs/translations.js b/configs/translations.js
index 4d204ea..a11c291 100644
--- a/configs/translations.js
+++ b/configs/translations.js
@@ -17,9 +17,12 @@ const translations = {
     save: 'Save',
     back: 'Back',
     cancel: 'Cancel',
+    close: 'Close',
     select_all: 'Select all',
     import: 'Import',
     export: 'Export',
+    sort: 'Sort',
+    sort_by: 'Sort by:',
     choose_files: 'Choose files',
     import_finished: 'Import finished.',
     no_connection: 'No connection',
@@ -28,6 +31,7 @@ const translations = {
     title: 'Title',
     created: 'Created',
     modified: 'Modified',
+    open_apps: 'Open apps:',
     Notes: 'Notes',
     Settings: 'Settings',
     mail_ver_subject: 'Verification of your new My Apps account',
@@ -86,9 +90,12 @@ const translations = {
     save: 'Zapisz',
     back: 'Powrót',
     cancel: 'Anuluj',
+    close: 'Zamknij',
     select_all: 'Wybierz wszystkie',
     import: 'Wyślij',
     export: 'Pobierz',
+    sort: 'Sortuj',
+    sort_by: 'Sortuj wg:',
     choose_files: 'Wybierz pliki',
     import_finished: 'Wysyłanie zakończone.',
     no_connection: 'Brak połączenia',
@@ -97,6 +104,7 @@ const translations = {
     title: 'Tytuł',
     created: 'Utworzono',
     modified: 'Zmodyfikowano',
+    open_apps: 'Otwarte aplikacje:',
     Notes: 'Notatki',
     Settings: 'Ustawienia',
     mail_ver_subject: 'Weryfikacja Twojego nowego konta w aplikacji My Apps.',
@@ -155,9 +163,12 @@ const translations = {
     save: 'Ahorrar',
     back: 'Regreso',
     cancel: 'Cancelar',
+    close: 'Cerrar',
     select_all: 'Elegir todos',
     import: 'Enviar',
     export: 'Descargar',
+    sort: 'Ordenar',
+    sort_by: 'Ordenar por:',
     choose_files: 'Seleccione archivos',
     import_finished: 'Envío completo.',
     no_connection: 'Sin conexión',
@@ -224,9 +235,12 @@ const translations = {
     save: 'Speichern',
     back: 'Zurückkehren',
     cancel: 'Abbrechen',
+    close: 'Schließen',
     select_all: 'Alles auswählen',
     import: 'Senden',
     export: 'Herunterladen',
+    sort: 'Sortieren',
+    sort_by: 'Sortieren nach:',
     choose_files: 'Dateien auswählen',
     import_finished: 'Senden abgeschlossen.',
     no_connection: 'Keine Verbindung',
diff --git a/helpers/windowActions.js b/helpers/windowActions.js
index 8ff361b..b6d86b6 100644
--- a/helpers/windowActions.js
+++ b/helpers/windowActions.js
@@ -1,4 +1,4 @@
-export const close = (appName, setApps) => {setApps(apps => apps.filter(a => a.name !== appName))}
+export const close = (appName, setApps) => {setApps(apps => apps.filter(a => a && a.name !== appName))}
 
 export const open = ({appName, buttons, height, width}, setApps) => {
   setApps(apps => (
@@ -38,19 +38,19 @@ export const toggleMax = (appName, setApps) => setApps(apps => ([
 ]))
 
 
-export const move = (appName, winRef, setApps) => {
+export const move = (app, winRef, setApps) => {
   winRef.current.onmousedown = (event) => {
-    if (event.target.classList && event.target.classList.contains('window__title')) {
+    if (!app.max && event.target.classList && event.target.classList.contains('window__title')) {
       const shiftX = event.clientX - winRef.current.getBoundingClientRect().left
       const shiftY = event.clientY - winRef.current.getBoundingClientRect().top
       winRef.current.classList.add('moving')
-      focus(appName, setApps)
+      focus(app.name, setApps)
 
       function moveAt(pageX, pageY) {
         const x = pageX - shiftX
         const y = pageY - shiftY - 32
 
-        setApps(apps => ([...apps.map(a => a.name === appName
+        setApps(apps => ([...apps.map(a => a.name === app.name
           ? {...a, pos: [x + 'px', y < 0 ? 0 : y + 'px']}
           : a
         )]))
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 (
diff --git a/styles/global.scss b/styles/global.scss
index 0a542a9..04473b8 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -32,3 +32,16 @@ textarea, input {
   padding-right: 2rem;
 }
 
+.mobile-only {
+  display: none!important;
+
+  @media(max-width: 40em) {
+    display: inline-block!important;
+  }
+}
+
+.desktop-only {
+  @media(max-width: 40em) {
+    display: none!important;
+  }
+}
diff --git a/styles/global/_themes.scss b/styles/global/_themes.scss
index 9319fa5..e0b146f 100644
--- a/styles/global/_themes.scss
+++ b/styles/global/_themes.scss
@@ -13,7 +13,7 @@
   --color-window-border-top: rgba(255,255,255,.7);
   --color-window-border-bottom: #ccc;
   --color-window-content: #fff;
-  --color-window-popup: #fff;
+  --color-window-popup: #eee;
   --color-window-buttons: #666;
   --color-window-buttons-alt: #222;
   --color-window-menu: #eee;
@@ -42,7 +42,7 @@
   --color-window-border-top: rgba(255,255,255,.7);
   --color-window-border-bottom: #ccc;
   --color-window-content: #fff;
-  --color-window-popup: #fff;
+  --color-window-popup: #eee;
   --color-window-buttons: #666;
   --color-window-buttons-alt: #222;
   --color-window-menu: #eee;
diff --git a/styles/global/_window.scss b/styles/global/_window.scss
index 08ddfaf..c489796 100644
--- a/styles/global/_window.scss
+++ b/styles/global/_window.scss
@@ -1,11 +1,14 @@
 .window {
   position: absolute;
-  transition-property: opacity, visibility, transform, width, height, top, left;
-  transition-duration: .3s;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   border-radius: .5em;
   color: var(--color-text);
 
+  @media(min-width: 40em) {
+    transition-property: opacity, visibility, transform, width, height, top, left;
+    transition-duration: .3s;
+  }
+
   &.moving {
     transition: none
   }
@@ -29,19 +32,6 @@
     height: 100%;
     width: 100%;
   }
-    // top: 50%;
-    // left: 50%;
-
-    // @media (min-width: 80em) {
-      // width: 64em;
-      // left: calc((100vw - 64em) / 2)
-    // }
-
-    // @media (min-height: 80em) {
-      // width: 64em;
-      // left: calc((100vh - 64em) / 2)
-    // }
-  // }
 
   &__title {
     position: absolute;
@@ -86,6 +76,10 @@
         color: var(--color-window-buttons-alt);
       }
     }
+
+    @media(max-width: 40em) {
+      display: none;
+    }
   }
 
   &__content {
@@ -96,7 +90,6 @@
     right: 0;
     bottom: 0;
     left: 0;
-    padding: 1em;
     border-bottom-left-radius: .5em;
     border-bottom-right-radius: .5em;
   }
@@ -109,18 +102,35 @@
 
   .window__submenu {
     display: block;
-    margin: -1em -1em 1em;
     height: 2em;
+    width: 100%;
     background: var(--color-window-menu);
 
-    & > div {
+    & > div > div {
       // cursor: pointer;
       display: inline-block;
       padding: .5em;
       transition: .3s background;
+      white-space: nowrap;
 
-      &:hover {
-        background-color: var(--color-window-menu-alt);
+      @media(hover: hover) {
+        &:hover {
+          background-color: var(--color-window-menu-alt);
+        }
+      }
+    }
+
+
+    @media(max-width: 40em) {
+      height: 3em;
+      overflow: auto;
+
+      & > div {
+        display: flex;
+      }
+
+      & > div > div {
+        padding: 1em;
       }
     }
   }
@@ -128,7 +138,7 @@
   &__scroll {
     height: 100%;
     overflow: auto;
-    margin: -1em -1em 0;
+    padding: 1em;
   }
 
   &__buttons--popup {
@@ -150,8 +160,10 @@
     // cursor: pointer;
     transition: .3s background-color;
 
-    &:hover {
-      background-color:  var(--color-button-alt);
+    @media(hover: hover) {
+      &:hover {
+        background-color:  var(--color-button-alt);
+      }
     }
   }
 
@@ -163,8 +175,10 @@
       border-top: 1px solid var(--color-popup-error-border);
       border-bottom: 1px solid  var(--color-popup-error-border);
 
-      &:hover {
-        background-color: var(--color-popup-error-button-alt);
+      @media(hover: hover) {
+        &:hover {
+          background-color: var(--color-popup-error-button-alt);
+        }
       }
     }
   }
diff --git a/styles/main/_header.scss b/styles/main/_header.scss
index 9fab16b..e6ac70f 100644
--- a/styles/main/_header.scss
+++ b/styles/main/_header.scss
@@ -6,34 +6,92 @@
   nav {
     display: flex;
 
-    & > ul:first-of-type {
+    & > div {
       flex-grow: 1;
-      overflow: auto;
+      overflow-y: auto;
+
+      & > span {
+        padding-left: .5em;
+        line-height: 2em;
+        font-weight: 600;
+      }
+
+      & > ul {
+        display: flex;
+      }
     }
 
-    & > ul {
+    & > ul,
+    & > div > ul {
       display: block;
 
       & > li {
         display: inline-block;
 
+        & > span > span {
+          padding: .75em;
+          display: inline-block;
+          margin-left: .5em;
+          color: var(--color-error);
+        }
+
         & > span,
         & > a {
           display: inline-block;
           color: var(--color-text);
           text-decoration: none;
           align-items: center;
-          padding: .25em .5em;
-          margin: .25em;
           border-radius: .5em;
           transition: .3s background, .3s color;
+          white-space: nowrap;
+          padding: .25em .5em;
+          margin: .25em;
 
-          &:hover {
-            background-color: var(--color-selected);
-            color: var(--color-text-alt);
+          @media(hover: hover) {
+            &:hover {
+              background-color: var(--color-selected);
+              color: var(--color-text-alt);
+            }
           }
         }
       }
     }
   }
 }
+
+.showMobileAppList {
+  @media(max-width: 40em) {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--color-window-popup);
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
+    border-radius: .5em;
+    padding: 1em;
+    min-width: 13em;
+
+    li {
+      width: 100%;
+      padding: 0;
+      margin: -.25em 0;
+    }
+
+    & > li:first-of-type {
+      padding: .5em .5em 1em;
+      white-space: nowrap;
+    }
+
+    & > li:last-of-type {
+      width: 100%;
+      padding-top: 1em;
+      text-align: center;
+
+      span {
+        height: 2.1em;
+        padding: .5em .75em;
+      }
+    }
+  }
+}