Added logout button

src/components/layout.js

@@ -115,6 +115,7 @@ export default function Layout({
               </a>
             </div>
             <div className="userStatus">
+              <div className="msgs">
                 <div
                   onClick={() => {
                     if (!userSpecificMotd) {
@@ -151,7 +152,24 @@ export default function Layout({
                 >
                   {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
                 </div>
-              <div>User ID: {userId || '...'}</div>
+                <div title="User ID">UID: {userId || '...'}</div>
+              </div>
+              <div
+                className="logout"
+                onClick={() => {
+                  fetch(constants.apiUrl + 'logout', {
+                    method: 'GET',
+                    credentials: 'include',
+                    headers: {
+                      Accept: 'application/json',
+                      'Content-Type': 'application/json',
+                    },
+                  })
+                  location.reload()
+                }}
+              >
+                Logout
+              </div>
             </div>
             {showMotdModal ? (
               <Modal

src/defaultStyles.css

@@ -37,6 +37,11 @@ a {
   overflow: auto;
 }
 
+.content {
+  margin-left: 200px;
+  padding: 1px 16px;
+}
+
 .sidebar a {
   display: block;
   color: black;
@@ -55,26 +60,6 @@ a {
   color: white;
 }
 
-.userStatus {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
-  margin-top: auto;
-}
-
-.userStatus :first-child {
-  font-size: 35px;
-}
-
-.userStatus > div {
-  margin: 3px 5px;
-}
-
-.content {
-  margin-left: 200px;
-  padding: 1px 16px;
-}
-
 .menuicon div {
   height: 5px;
   background-color: var(--bright-color);
@@ -259,3 +244,34 @@ select {
 select:hover {
   border: 1px solid #99f;
 }
+
+.userStatus {
+  display: flex;
+  margin-top: auto;
+  margin-bottom: 20px;
+
+  align-items: center;
+  justify-content: space-between;
+}
+
+.msgs {
+  display: flex;
+  align-items: center;
+}
+
+.logout {
+  padding: 7px;
+  cursor: pointer;
+}
+
+.logout:hover {
+  color: #fff;
+}
+
+.msgs :first-child {
+  font-size: 35px;
+}
+
+.msgs > div {
+  margin: 0px 5px;
+}