chore: restructure

src/client/chat--left.jsx

@@ -1,11 +1,11 @@
-import './chat--channels.scss';
+import './chat--left.scss';
 
 import classnames from 'classnames';
 import React, {useState} from 'react';
 
 import Bar from './bar';
 
-export default function ChatChannels() {
+export default function ChatLeft() {
   const [isOpen, setIsOpen] = useState(false);
   const [active, setActive] = useState(0);
   const toggleOpen = () => setIsOpen(!isOpen);
@@ -22,19 +22,19 @@ export default function ChatChannels() {
   return (
     <div
       className={classnames(
-        'channels',
+        'left',
         'chat--flexed',
-        isOpen ? 'channels--open' : 'channels--closed',
+        isOpen ? 'left--open' : 'left--closed',
       )}
     >
       <Bar isHorizontal={isOpen}>
-        <ul className="channels__buttons">
+        <ul className="left__buttons">
-          <li className="channels__brandItem">reddichat</li>
+          <li className="left__brandItem">reddichat</li>
           {
             buttons.map(({emoji, label}, i) => (
-              <li className="channels__buttonItem">
+              <li className="left__buttonItem">
                 <button
-                  className={classnames('channels__button', {active: isOpen && i === active})}
+                  className={classnames('left__button', {active: isOpen && i === active})}
                   onClick={() => {
                     if (i === active || !isOpen) {
                       toggleOpen();
@@ -44,13 +44,13 @@ export default function ChatChannels() {
                   type="button"
                 >
                   <span
-                    className="channels__buttonIcon"
+                    className="left__buttonIcon"
                     role="img"
                     aria-label={label}
                   >
                     {emoji}
                   </span>
-                  <span className="channels__buttonText">{label}</span>
+                  <span className="left__buttonText">{label}</span>
                 </button>
               </li>
             ))
@@ -76,4 +76,4 @@ export default function ChatChannels() {
   );
 }
 
-ChatChannels.propTypes = {};
+ChatLeft.propTypes = {};

src/client/chat--left.scss

@@ -1,20 +1,20 @@
-.channels {
+.left {
   background-color: #373737;
   transition: 0.2s width;
 }
 
-.channels--open {
+.left--open {
   width: 18em;
 }
 
-.channels__buttons {
+.left__buttons {
   display: flex;
-  .channels--closed & {
+  .left--closed & {
     flex-direction: column;
   }
 }
 
-.channels__brandItem {
+.left__brandItem {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -22,24 +22,24 @@
   font-size: 0.95em;
   padding: 1em;
   user-select: none;
-  .channels--closed & {
+  .left--closed & {
     font-size: 0.9em;
     text-align: center;
     padding: 1em 0 0.5em;
   }
 }
 
-.channels__buttonItem {
+.left__buttonItem {
   padding: 0.25em;
-  .channels--closed & {
+  .left--closed & {
     padding-bottom: 0;
   }
-  .channels--open & {
+  .left--open & {
     padding-right: 0;
   }
 }
 
-.channels__button {
+.left__button {
   background-color: #2a2a2a;
   border: none;
   height: 3.5em;
@@ -53,11 +53,11 @@
   }
 }
 
-.channels__buttonIcon {
+.left__buttonIcon {
   display: flow-root;
 }
 
-.channels__buttonText {
+.left__buttonText {
   font-size: 0.7em;
 }
 

src/client/chat--right.jsx

@@ -1,11 +1,11 @@
-import './chat--users.scss';
+import './chat--right.scss';
 
 import classnames from 'classnames';
 import React, {useState} from 'react';
 
 import Bar from './bar';
 
-export default function ChatUsers() {
+export default function ChatRight() {
   const [isOpen, setIsOpen] = useState(false);
   const [active, setActive] = useState(0);
   const toggleOpen = () => setIsOpen(!isOpen);
@@ -18,18 +18,18 @@ export default function ChatUsers() {
   return (
     <div
       className={classnames(
-        'users',
+        'right',
         'chat--flexed',
-        isOpen ? 'users--open' : 'users--closed',
+        isOpen ? 'right--open' : 'right--closed',
       )}
     >
       <Bar isHorizontal={isOpen}>
-        <ul className="users__buttons">
+        <ul className="right__buttons">
           {
             buttons.map(({emoji, label}, i) => (
-              <li className="users__buttonItem">
+              <li className="right__buttonItem">
                 <button
-                  className={classnames('users__button', {active: isOpen && i === active})}
+                  className={classnames('right__button', {active: isOpen && i === active})}
                   onClick={() => {
                     if (i === active || !isOpen) {
                       toggleOpen();
@@ -39,13 +39,13 @@ export default function ChatUsers() {
                   type="button"
                 >
                   <span
-                    className="users__buttonIcon"
+                    className="right__buttonIcon"
                     role="img"
                     aria-label={label}
                   >
                     {emoji}
                   </span>
-                  <span className="users__buttonText">{label}</span>
+                  <span className="right__buttonText">{label}</span>
                 </button>
               </li>
             ))
@@ -56,4 +56,4 @@ export default function ChatUsers() {
   );
 }
 
-ChatUsers.propTypes = {};
+ChatRight.propTypes = {};

src/client/chat--right.scss

@@ -1,35 +1,35 @@
-.users {
+.right {
   background-color: #373737;
   transition: 0.2s width;
 }
 
-.users .bar--vertical {
+.right .bar--vertical {
   float: right;
 }
 
-.users--open {
+.right--open {
   width: 18em;
 }
 
-.users__buttons {
+.right__buttons {
   display: flex;
   flex-direction: row-reverse;
-  .users--closed & {
+  .right--closed & {
     flex-direction: column;
   }
 }
 
-.users__buttonItem {
+.right__buttonItem {
   padding: 0.25em;
-  .users--closed & {
+  .right--closed & {
     padding-bottom: 0;
   }
-  .users--open & {
+  .right--open & {
     padding-left: 0;
   }
 }
 
-.users__button {
+.right__button {
   background-color: #2a2a2a;
   border: none;
   height: 3.5em;
@@ -43,11 +43,11 @@
   }
 }
 
-.users__buttonIcon {
+.right__buttonIcon {
   display: flow-root;
 }
 
-.users__buttonText {
+.right__buttonText {
   font-size: 0.7em;
 }
 

src/client/chat.jsx

@@ -2,15 +2,15 @@ import './chat.scss';
 
 import React from 'react';
 
-import ChatChannels from './chat--channels';
+import ChatLeft from './chat--left';
-import ChatUsers from './chat--users';
+import ChatRight from './chat--right';
 
 export default function Chat() {
   return (
     <div className="chat">
-      <ChatChannels />
+      <ChatLeft />
       <div className="chat__messages chat--flexed"></div>
-      <ChatUsers />
+      <ChatRight />
     </div>
   );
 }