Multiple style fixes, added top bar to layout

src/components/layout.js

@@ -55,65 +55,62 @@ function Donate() {
   )
 }
 
-function MessageButton({
-  userSpecificMotd,
-  setShowMotdModal,
-  refetchGlobalData,
-}) {
+function UserStatus({ userId, unreads }) {
   return (
-    <div className="msgs">
+    <div className={styles.userStatus}>
+      <div className={'uid'} title="User ID">
+        UID: {userId || '...'}
+      </div>
+      <Link href="/chat">
+        <a className={styles.unreadNotification}>
+          <span>💬</span>
+          {unreads && unreads.length > 0 ? <div>{unreads.length}</div> : null}
+        </a>
+      </Link>
+
       <div
+        className={styles.logout}
+        title="Kijelentkezés"
         onClick={() => {
-          if (!userSpecificMotd) {
-            return
-          }
-          setShowMotdModal(true)
-          if (userSpecificMotd.seen) {
-            return
-          }
-          fetch(constants.apiUrl + 'infos', {
-            method: 'POST',
+          fetch(constants.apiUrl + 'logout', {
+            method: 'GET',
             credentials: 'include',
             headers: {
               Accept: 'application/json',
               'Content-Type': 'application/json',
             },
-            body: JSON.stringify({
-              userSpecificMotdSeen: true,
-            }),
           })
-            .then((resp) => {
-              return resp.json()
-            })
-            .then(() => {
-              refetchGlobalData()
-            })
+          location.reload()
         }}
-        style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
-        title={
-          userSpecificMotd && !userSpecificMotd.seen ? 'Új üzeneted van!' : ''
-        }
       >
-        {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
+        Logout
       </div>
     </div>
   )
 }
 
-export default function Layout({
-  children,
-  router,
-  globalData,
-  refetchGlobalData,
-}) {
+function MenuIcon({ setSidebarOpen, sidebarOpen }) {
+  return (
+    <div
+      onClick={() => {
+        setSidebarOpen(!sidebarOpen)
+      }}
+      className={styles.menuicon}
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+  )
+}
+
+export default function Layout({ children, router, globalData }) {
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [windowSize, setWindowSize] = useState([100, 200])
-  const [showMotdModal, setShowMotdModal] = useState(false)
   const [donateShowing, setDonateShowing] = useState(false)
-  const [showNewMsgModal, setShowNewMsgModal] = useState(true)
 
   const userId = globalData.userId
-  const userSpecificMotd = globalData.userSpecificMotd
+  const unreads = globalData.unreads
 
   useEffect(() => {
     setDonateShowing(!!router.query.donate)
@@ -143,7 +140,7 @@ export default function Layout({
   const snowflakeCount = (windowSize[0] + windowSize[1]) / 26
 
   return (
-    <div>
+    <>
       {renderSnow() && (
         <div
           style={{
@@ -157,34 +154,31 @@ export default function Layout({
           <Snowfall snowflakeCount={snowflakeCount} />
         </div>
       )}
-      <div className="sidebar">
-        <div className="headercontainer">
-          <span
-            onClick={() => {
-              setSidebarOpen(!sidebarOpen)
-            }}
-            className="menuicon"
-          >
-            <div />
-            <div />
-            <div />
-          </span>
-          <div className="sidebarheader">
-            <Link href="/">
-              <a>
-                <img
-                  style={{
-                    maxWidth: '100%',
-                    border: 'none',
-                    margin: '1px',
-                  }}
-                  src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
-                  alt="FryLabs"
-                />
-              </a>
-            </Link>
-          </div>
+      <div className={styles.topBar}>
+        <MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
+        <Link href="/">
+          <a>
+            <img
+              src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+              alt="FryLabs"
+            />
+          </a>
+        </Link>
+        <div className={styles.topBarLinks}>
+          <Link href="/contribute">
+            <a>Teendők</a>
+          </Link>
+          <Link href="/pwRequest">
+            <a>Jelszó kérés</a>
+          </Link>
+          <Link href="/ranklist">
+            <a>Ranklista</a>
+          </Link>
         </div>
+        <div className={'seperator'} />
+        <UserStatus unreads={unreads} userId={userId} />
+      </div>
+      <div className={styles.sidebar}>
         {sidebarOpen ? (
           <>
             <div id="sideBarLinks" className={styles.sidebarLinks}>
@@ -215,33 +209,6 @@ export default function Layout({
                 Donate
               </a>
             </div>
-            <div className={'userStatus'}>
-              <MessageButton
-                userSpecificMotd={userSpecificMotd}
-                setShowMotdModal={setShowMotdModal}
-                refetchGlobalData={refetchGlobalData}
-              />
-              <div className={'uid'} title="User ID">
-                UID: {userId || '...'}
-              </div>
-              <div
-                className={'logout'}
-                title="Kijelentkezés"
-                onClick={() => {
-                  fetch(constants.apiUrl + 'logout', {
-                    method: 'GET',
-                    credentials: 'include',
-                    headers: {
-                      Accept: 'application/json',
-                      'Content-Type': 'application/json',
-                    },
-                  })
-                  location.reload()
-                }}
-              >
-                Logout
-              </div>
-            </div>
           </>
         ) : null}
       </div>
@@ -254,27 +221,8 @@ export default function Layout({
           <Donate />
         </Modal>
       ) : null}
-      {showMotdModal ? (
-        <Modal
-          closeClick={() => {
-            setShowMotdModal(false)
-          }}
-        >
-          <div style={{ textAlign: 'center' }}>Üzenet admintól:</div>
-          <div dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }} />
-        </Modal>
-      ) : null}
-      {userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? (
-        <Modal
-          closeClick={() => {
-            setShowNewMsgModal(false)
-          }}
-        >
-          Új üzeneted van, kattints a 📬-ra bal alul a megtekintéséhez!
-        </Modal>
-      ) : null}
-      <div className="content">{children}</div>
+      <div className={styles.content}>{children}</div>
       <BB />
-    </div>
+    </>
   )
 }