styles moved to scss

1 files changed, 10 insertions, 58 deletions

diff --git a/components/Header.js b/components/Header.js
index 4302af9..3d1f471 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,3 +1,4 @@
+import styles from 'styles/Main.module.scss'
 import React, {useState} from 'react'
 import Link from 'next/link'
 import useUser from 'lib/useUser'
@@ -20,9 +21,9 @@ const Header = ({apps, setApps}) => {
   }
 
   return (
-    <header>
+    <header className={styles.header}>
       <nav>
-        <ul className='header__apps'>
+        <ul>
           {
             apps && apps.map(app => (
               <li
@@ -53,12 +54,17 @@ const Header = ({apps, setApps}) => {
           {user?.isLoggedIn && (
             <li>
               <p
-                className='user-menu'
+                className={styles.user}
                 onClick={() => setUserMenu(!userMenu)}
               >{user?.email}</p>
               {
                 userMenu && (
-                  <ul className='user-submenu'>
+                  <ul className={styles.submenu}>
+                    <li>
+                      <span onClick={() => {}}>
+                        Settings
+                      </span>
+                    </li>
                     <li>
                       <a href="/api/logout" onClick={handleLogout}>
                         Logout
@@ -71,60 +77,6 @@ const Header = ({apps, setApps}) => {
           )}
         </ul>
       </nav>
-      <style jsx>{`
-        header {
-          height: 2em;
-          padding: 0.5rem;
-          background-color: rgba(255, 255, 255, 0.4);
-          border-bottom: 1px solid rgba(255, 255, 255, 0.5)
-        }
-
-        nav {
-          display: flex;
-        }
-
-        .header__apps {
-          flex-grow: 1;
-          overflow: auto;
-        }
-
-        li {
-          margin-left: 1em;
-          margin-right: 1em;
-          display: inline-block;
-          cursor: pointer;
-        }
-
-        .header__separator {
-          margin-right: auto;
-        }
-
-        a {
-          color: #333;
-          font-weight: 600;
-          text-decoration: none;
-          align-items: center;
-        }
-
-        .user-menu {
-          font-weight: 600;
-          cursor: pointer;
-          position: relative;
-        }
-
-        .user-submenu {
-          position: absolute;
-          right: 0;
-          top: 2.1em;
-          width: 10em;
-          padding: .5em;
-          background-color: rgba(255, 255, 255, .9);
-          border: 1px solid rgba(255, 255, 255, .5)
-        }
-        .user-submenu a {
-          text-align: right;
-        }
-      `}</style>
     </header>
   )
 }