ui: mobile sexiness

src/client/app.scss

@@ -1,6 +1,8 @@
 .app {
   width: 100vw;
   height: 100vh;
+  overflow: hidden;
+  position: relative;
 }
 
 .panes {

src/client/chat--center.jsx

@@ -6,7 +6,9 @@ import ChatMessages from './chat--messages';
 
 export default function ChatCenter() {
   return (
-    <div className="center flexed">
+    <div
+      className="center flexed"
+    >
       <ChatMessages />
     </div>
   );

src/client/chat--center.scss

@@ -1,3 +1,11 @@
+@import '~/client/scss/breakpoints.scss';
+
 .center {
+  background-color: #212121;
   flex-grow: 1;
+  width: 100%;
+  z-index: 100;
+  @include breakpoint(tablet) {
+    width: auto;
+  }
 }

src/client/chat--left.jsx

@@ -7,10 +7,10 @@ import useBreakpoints from './hooks/useBreakpoints';
 import Bar from './bar';
 
 export default function ChatLeft() {
-  const {desktop} = useBreakpoints();
+  const {desktop, tablet} = useBreakpoints();
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = () => setIsOpen(!isOpen);
-  const showsAsOpen = isOpen || desktop;
+  const showsAsOpen = isOpen || desktop || !tablet;
   const buttons = [
     {
       icon: '📜',

src/client/chat--left.scss

@@ -1,6 +1,12 @@
+@import '~/client/scss/breakpoints.scss';
+
 .left {
   background-color: #373737;
+  transform: translateX(-100%);
   transition: 0.2s width;
+  @include breakpoint(tablet) {
+    transform: none;
+  }
 }
 
 .left.open {

src/client/chat--right.jsx

@@ -7,10 +7,10 @@ import useBreakpoints from './hooks/useBreakpoints';
 import Bar from './bar';
 
 export default function ChatRight() {
-  const {desktop} = useBreakpoints();
+  const {desktop, tablet} = useBreakpoints();
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = () => setIsOpen(!isOpen);
-  const showsAsOpen = isOpen || desktop;
+  const showsAsOpen = isOpen || desktop || !tablet;
   const buttons = [
     {
       icon: '🙃',

src/client/chat--right.scss

@@ -1,6 +1,13 @@
+@import '~/client/scss/breakpoints.scss';
+
 .right {
   background-color: #373737;
+  right: 0;
+  transform: translateX(100%);
   transition: 0.2s width;
+  @include breakpoint(tablet) {
+    transform: none;
+  }
 }
 
 .right .bar--vertical {

src/client/chat.jsx

@@ -1,14 +1,59 @@
 import './chat.scss';
 
-import React from 'react';
+import React, {useRef} from 'react';
 
+import useBreakpoints from './hooks/useBreakpoints';
 import ChatCenter from './chat--center';
 import ChatLeft from './chat--left';
 import ChatRight from './chat--right';
 
 export default function Chat() {
+  const ref = useRef(null);
+  const {tablet} = useBreakpoints();
+  let origin;
+  const onPointerEvents = {
+    onPointerDown: (event) => {
+      if (ref.current) {
+        origin = {
+          left: parseInt(ref.current.style.left, 10),
+          point: event.clientX,
+        };
+      }
+    },
+    onPointerMove: (event) => {
+      if (origin) {
+        ref.current.classList.add('moving');
+        const offset = event.clientX - origin.point + origin.left;
+        const max = Math.min(window.innerWidth - 32, (2 + 16) * 16);
+        ref.current.style.left = `${Math.max(-max, Math.min(max, offset))}px`;
+      }
+    },
+    onPointerUp: () => {
+      const left = parseInt(ref.current.style.left, 10);
+      const max = Math.min(window.innerWidth - 32, (2 + 16) * 16);
+      if (left >= max / 2) {
+        ref.current.style.left = `${max}px`;
+      }
+      else if (left <= -max / 2) {
+        ref.current.style.left = `${-max}px`;
+      }
+      else {
+        ref.current.style.left = 0;
+      }
+      origin = undefined;
+      ref.current.classList.remove('moving');
+    },
+  };
+  if (tablet && ref.current) {
+    ref.current.style.left = 0;
+  }
   return (
-    <div className="chat">
+    <div
+      className="chat"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...(tablet ? {} : onPointerEvents)}
+      ref={ref}
+    >
       <ChatLeft />
       <ChatCenter />
       <ChatRight />

src/client/chat.scss

@@ -3,15 +3,22 @@
 .chat {
   display: flex;
   height: 100%;
+  position: absolute;
   width: 100%;
+  &:not(.moving) {
+    transition: 0.2s left;
+  }
 }
 
 .flexed {
-  display: none;
+  position: absolute;
   height: 100%;
   width: 4em;
   overflow: hidden;
+  &:not(.center) {
+    max-width: calc(100% - 2em);
+  }
   @include breakpoint(tablet) {
-    display: block;
+    position: static;
   }
 }