feat: links

src/client/chat--right.jsx

@@ -3,6 +3,7 @@ import './chat--right.scss';
 import classnames from 'classnames';
 import React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
+import {Link} from 'react-router-dom';
 
 import {
   rightActiveIndexSelector,
@@ -46,6 +47,11 @@ export default function ChatRight() {
         isHorizontal
         onActive={(active) => dispatch(setRightActiveIndex(active))}
       />
+      <div className="right__links">
+        <Link className="right__link" to="/about">About</Link>
+        <span className="right__linksBullet">•</span>
+        <Link className="right__link" to="/logout">Log out</Link>
+      </div>
       {0 === active && channelUsers.length > 0 && <ChatRightUsers />}
       {1 === active && blockedIds.length > 0 && <ChatRightBlocked ids={blockedIds} />}
     </div>

src/client/chat--right.scss

@@ -1,4 +1,5 @@
 @import '~/client/scss/breakpoints.scss';
+@import '~/client/scss/colors.scss';
 
 .right {
   background-color: #373737;
@@ -55,3 +56,25 @@
   font-size: 0.7em;
 }
 
+.right__links {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5em;
+}
+
+.right__linksBullet {
+  color: #888;
+  font-size: 0.5em;
+  line-height: 2em;
+  margin: 0 1em;
+}
+
+.right__link {
+  color: lighten($color-active, 20%);
+  font-family: var(--title-font-family);
+  text-decoration: none;
+  transition: color 0.2s;
+  &:hover {
+    color: lighten($color-active, 40%);
+  }
+}