From 0d7d2cb64fce6e832b6a3bdd02736faa1f2bc1be Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sun, 9 May 2021 20:03:44 +1000
Subject: [PATCH] Fix mobile layout

---
 src/Main.tsx                  |  6 ++++--
 src/components/MessageBox.tsx | 11 ++++++-----
 src/components/Sidebar.tsx    |  7 ++++++-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/Main.tsx b/src/Main.tsx
index 538e0472..ad151e56 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -29,7 +29,7 @@ const Main = (props: MainProps) => {
   const [messages, setMessages] = React.useState<
     { message: Types.TextPacket; ack: boolean }[]
   >([]);
-  const [settingsModalOpen, setSettingsModalOpen] = useState<boolean>(false);
+  const [sidebarOpen, setSidebarOpen] = useState<boolean>(false);
 
   React.useEffect(() => {
     const textPacketEvent = props.connection.onTextPacketEvent.subscribe(
@@ -86,7 +86,8 @@ const Main = (props: MainProps) => {
         <MessageBox
           connection={props.connection}
           isReady={props.isReady}
-          setSettingsModalOpen={setSettingsModalOpen}
+          sidebarOpen={sidebarOpen}
+          setSidebarOpen={setSidebarOpen}
           translations={props.translations}
         />
       </div>
@@ -100,6 +101,7 @@ const Main = (props: MainProps) => {
         setLanguage={props.setLanguage}
         translations={props.translations}
         myId={props.myNodeInfo.myNodeNum}
+        sidebarOpen={sidebarOpen}
         darkmode={props.darkmode}
         setDarkmode={props.setDarkmode}
       />
diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
index 81ee4a17..ca655cfb 100644
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.tsx
@@ -7,7 +7,8 @@ import type { languageTemplate } from '../App';
 
 export interface MessageBoxProps {
   translations: languageTemplate;
-  setSettingsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  sidebarOpen: boolean;
+  setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
   connection: IHTTPConnection;
   isReady: boolean;
 }
@@ -21,11 +22,11 @@ const MessageBox = (props: MessageBoxProps) => {
     }
   };
   return (
-    <div className="flex text-lg font-medium border rounded-md space-x-2 md:space-x-0 w-full">
+    <div className="flex text-lg font-medium space-x-2 md:space-x-0 w-full">
       <div
-        className="flex p-3 text-xl hover:text-gray-500 text-gray-400 rounded-md shadow-md focus:outline-none cursor-pointer md:hidden"
+        className="flex p-3 text-xl hover:text-gray-500 text-gray-400 rounded-md border shadow-md focus:outline-none cursor-pointer md:hidden"
         onClick={() => {
-          props.setSettingsModalOpen(true);
+          props.setSidebarOpen(!props.sidebarOpen);
         }}
       >
         <MenuIcon className="m-auto h-6 2-6" />
@@ -46,7 +47,7 @@ const MessageBox = (props: MessageBoxProps) => {
           onChange={(e) => {
             setCurrentMessage(e.target.value);
           }}
-          className={`p-3 placeholder-gray-400 text-gray-700 relative rounded-md shadow-md focus:outline-none w-full pr-10 ${
+          className={`p-3 placeholder-gray-400 text-gray-700 relative rounded-md border shadow-md focus:outline-none w-full pr-10 ${
             props.isReady ? 'cursor-text' : 'cursor-not-allowed'
           }`}
         />
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 9b12281b..4bbe3640 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -22,13 +22,18 @@ interface SidebarProps {
   setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
   translations: languageTemplate;
   myId: number;
+  sidebarOpen: boolean;
   darkmode: boolean;
   setDarkmode: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const Sidebar = (props: SidebarProps) => {
   return (
-    <div className="flex flex-col rounded-md md:ml-0 shadow-md border w-full max-w-sm">
+    <div
+      className={`${
+        props.sidebarOpen ? 'flex' : 'hidden md:flex'
+      } flex-col rounded-md md:ml-0 shadow-md border w-full max-w-sm`}
+    >
       <Nodes
         isReady={props.isReady}
         nodes={props.nodes}