From 102fc816f83a384f45d28dab09e4c5b5209dd874 Mon Sep 17 00:00:00 2001
From: Guillem Borrell <borrell.guillem@bcg.com>
Date: Wed, 12 Jun 2024 09:22:58 +0200
Subject: [PATCH] Toggle menubar on mobile

---
 src/hellocomputer/static/index.html |  4 ++--
 src/hellocomputer/static/script.js  | 10 ++++++++++
 src/hellocomputer/static/style.css  |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/hellocomputer/static/index.html b/src/hellocomputer/static/index.html
index 97f8b04..8465d3f 100644
--- a/src/hellocomputer/static/index.html
+++ b/src/hellocomputer/static/index.html
@@ -124,8 +124,8 @@
                     </div>
                     <div class="chat-input">
                         <div class="input-group">
-                            <textarea id="chatTextarea" class="form-control" placeholder="Type a message..." rows="1"
-                                style="resize: none;"></textarea>
+                            <textarea id="chatTextarea" class="form-control" placeholder="Type a message..."
+                                rows="1"></textarea>
                             <div class="input-group-append">
                                 <button id="sendButton" class="btn btn-primary" type="button">Send</button>
                             </div>
diff --git a/src/hellocomputer/static/script.js b/src/hellocomputer/static/script.js
index 66fbb3a..63d2de6 100644
--- a/src/hellocomputer/static/script.js
+++ b/src/hellocomputer/static/script.js
@@ -13,6 +13,16 @@ $('#menu-toggle').click(function (e) {
     toggleMenuArrow(document.getElementById('menu-toggle'));
 });
 
+document.addEventListener("DOMContentLoaded", function () {
+    console.log('Width: ' + window.innerWidth + ' Height: ' + window.innerHeight);
+    if ((window.innerWidth <= 800) && (window.innerHeight <= 600)) {
+        $('#sidebar').toggleClass('toggled');
+        toggleMenuArrow(document.getElementById('menu-toggle'));
+        console.log('Mobile device detected. Hiding sidebar.');
+    }
+}
+);
+
 const textarea = document.getElementById('chatTextarea');
 const sendButton = document.getElementById('sendButton');
 const chatMessages = document.querySelector('.chat-messages');
diff --git a/src/hellocomputer/static/style.css b/src/hellocomputer/static/style.css
index 8345961..0d946ef 100644
--- a/src/hellocomputer/static/style.css
+++ b/src/hellocomputer/static/style.css
@@ -57,7 +57,7 @@ html {
 .chat-input {
     position: fixed;
     bottom: 0;
-    width: calc(100% - 250px);
+    width: 100%;
     /* Adjust width considering the sidebar */
     max-width: 600px;
     background: #fff;