Chat

src/components/layout.js

@@ -4,12 +4,14 @@ import dynamic from 'next/dynamic'
 
 const Snowfall = dynamic(() => import('react-snowfall'), { ssr: false })
 
+import LogoutIcon from './logoutIcon.js'
 import Modal from './modal.js'
-import tabs from '../data/tabs.json'
 import constants from '../constants.json'
 import BB from './b.js'
 
 import styles from './layout.module.css'
+import tabs from '../data/tabs.json'
+import topBarLinks from '../data/topBarLinks.json'
 
 const renderSnow = () => {
   const date = new Date()
@@ -56,15 +58,19 @@ function Donate() {
 }
 
 function UserStatus({ userId, unreads }) {
+  const unreadCount = unreads ? unreads.length : 0
   return (
     <div className={styles.userStatus}>
       <div className={'uid'} title="User ID">
         UID: {userId || '...'}
       </div>
       <Link href="/chat">
-        <a className={styles.unreadNotification}>
+        <a
+          title={`Chat${unreadCount ? ' (' + unreadCount + ' új üzenet)' : ''}`}
+          className={styles.unreadNotification}
+        >
           <span>💬</span>
-          {unreads && unreads.length > 0 ? <div>{unreads.length}</div> : null}
+          {unreadCount ? <div>{unreadCount}</div> : null}
         </a>
       </Link>
 
@@ -83,7 +89,7 @@ function UserStatus({ userId, unreads }) {
           location.reload()
         }}
       >
-        Logout
+        <LogoutIcon size={28} />
       </div>
     </div>
   )
@@ -165,15 +171,20 @@ export default function Layout({ children, router, globalData }) {
           </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>
+          {Object.keys(topBarLinks).map((key) => {
+            const item = topBarLinks[key]
+
+            return (
+              <Link key={key} href={item.href}>
+                <a
+                  onClick={closeSideBar}
+                  className={href.includes(key) ? styles.active : undefined}
+                >
+                  {item.text}
+                </a>
+              </Link>
+            )
+          })}
         </div>
         <div className={'seperator'} />
         <UserStatus unreads={unreads} userId={userId} />